ビジュアルスタジオ2017でAngular 2、 ノードがインストールされたASP.NET MVCプロジェクトを作成しました。ノードモジュールのロードに失敗しました
package.json私は
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<title>@ViewData["Title"] - LanguageSchool.Web</title>
<environment include="Development">
<script [email protected]("~/node_modules/html5-history-api/history.min.js")></script>
<script src="./node_modules/classlist.js/classList.min.js"></script>
<script src="./node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/intl/dist/Intl.complete.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="./node_modules/systemjs/dist/system.src.js"></script>
<script src="rxjs.module.min.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import("app/main").catch(function (err) { console.error(err); });
</script>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css"
rel="stylesheet" />
<link href="node_modules/font-awesome/css/font-awesome.min.css"
rel="stylesheet" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
を追加したヘッド部で
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"scripts": {
"webpack-script": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"-vs-binding": {
"BeforeBuild": [
"webpack-script"
]
},
"devDependencies": {
"bootstrap": "^4.0.0-beta",
"clean-webpack-plugin": "^0.1.16",
"imports-loader": "^0.7.1",
"jquery": "^2.2.4",
"popper.js": "^1.12.5",
"ts-loader": "^2.3.5",
"typescript": "^2.5.2",
"webpack": "^3.5.6",
"concurrently": "2.2.0",
"systemjs-builder": "0.15.32",
"json-server": "0.8.21",
"jsonwebtoken": "7.1.9"
},
"dependencies": {
"@angular/animations": "^4.3.6",
"@angular/common": "^4.3.6",
"@angular/compiler": "^4.3.6",
"@angular/compiler-cli": "^4.3.6",
"@angular/core": "^4.3.6",
"@angular/forms": "^4.3.6",
"@angular/http": "^4.3.6",
"@angular/platform-browser": "^4.3.6",
"@angular/platform-browser-dynamic": "^4.3.6",
"@angular/platform-server": "^4.3.6",
"@angular/router": "^4.3.6",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.4",
"reflect-metadata": "^0.1.10",
"rxjs": "5.0.1",
"zone.js": "^0.8.4",
"core-js": "^2.4.1",
"classlist.js": "^1.1.20150312",
"systemjs": "0.19.40",
"bootstrap": "^4.0.0-beta",
"font-awesome": "^4.7.0",
"intl": "^1.2.5",
"html5-history-api": "^4.2.8",
"file-loader": "^0.11.2",
"css-loader": "^0.28.7",
"jquery": "^2.2.4",
"popper": "^1.0.0",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.5.6"
}
}
systemjs.config.js
(function (global) {
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [ // <-----
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/' + pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
};
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);
_Layout.cshtmlしかし、私はページをロードしてみてくださいいくつかのエラーが表示されます：
ソースの読み込みに失敗しました "https://localhost:44341/node_modules/html5-history-api/history.min.js" localhost：44341：10 withソースの読み込みに失敗しました "https://localhost:44341/node_modules/classlist.js/classList.min.js"。 localhost：44341：11 withソースの読み込みに失敗しました "https://localhost:44341/node_modules/core-js/client/shim.min.js"。 localhost：44341：12 withとのローディングに失敗しました "https://localhost:44341/node_modules/intl/dist/Intl.complete.js"。 localhost：44341：13 withソースの読み込みに失敗しました "https://localhost:44341/node_modules/zone.js/dist/zone.min.js"。 localhost：44341：14 withソースの読み込みに失敗しました "https://localhost:44341/node_modules/reflect-metadata/Reflect.js"。 localhost：44341：15 withソース "https://localhost:44341/node_modules/systemjs/dist/system.src.js"の読み込みに失敗しました。 localhost：44341：16 withソースの読み込みに失敗しました "https://localhost:44341/rxjs.module.min.js"。 localhost：44341：17 ソースとのローディングに失敗しました "https://localhost:44341/systemjs.config.js"。
更新： main.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
app.components.ts
import { Component } from "@angular/core";
@Component({
selector: "app",
template: `<div class="bg-success p-a-1 text-xs-center">
This is SportsStore
</div>`
})
export class AppComponent { }
スタートパッケージはどのように入手できましたか？ ** CLI？**、どのページから**ダウンロード**できましたか？ **あなたは**パッケージを復元しましたか？ https://www.tutorialspoint.com/angular2/angular2_hello_world.htm –
@VictorHugoTerceros確かに、npm install。すべてのパッケージはnode_modulesディレクトリにあります。質問コードを – amplifier