.Net Core + Angular 2:无法加载模块
问题描述:
我尝试使用Visual Studio更新3 与npm版本4.4.4和节点版本v6.10.0并且已经在.Net Core中使用Angular 2安装了Typescript工具。所有的.Net Core + Angular 2:无法加载模块
这里是我的Github链接
和代码
1.gulpfile.js
/// <binding BeforeBuild='libs' Clean='clean' />
var gulp = require('gulp');
var rimraf = require('rimraf')
var paths = {
npm: './node_modules/',
lib: './wwwroot/lib/'
};
var libs = [
paths.npm + 'core-js/client/shim.min.js',
paths.npm + 'zone.js/dist/zone.js',
paths.npm + 'reflect-metadata/Reflect.js',
paths.npm + 'systemjs/dist/system.src.js'
];
gulp.task('libs', function() {
return gulp.src(libs).pipe(gulp.dest(paths.lib));
});
gulp.task('clean', function (callback) {
rimraf(paths.lib, callback);
});
2的package.json
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
"@angular/forms": "~2.4.0",
"@angular/http": "~2.4.0",
"@angular/platform-browser": "~2.4.0",
"@angular/platform-browser-dynamic": "~2.4.0",
"@angular/router": "~3.4.0",
"angular-in-memory-web-api": "~0.2.1",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"
},
"devDependencies": {
"gulp": "^3.9.1",
"rimraf": "^2.6.1"
}
}
3简短描述。 tsconfig.json
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"module": "commonjs",
"outDir": "wwwroot/app/",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"exclude": [
"node_modules",
"wwwroot/lib",
"wwwroot/app"
]
}
4. typings.json
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
}
}
而且从我的最后question
工程顺利建设的所有其他文件,但在执行类似下面
请帮助遇到错误我,我错过了什么?
答
首先使用systemjs.config的,JS文件丢失,从而增加它并按照在gulpfile所需的角度相关文件systemjs.config.js文件更改所以这里是一个变化
-
gulpfile。 JS /////
//var gulp = require('gulp'); //var rimraf = require('rimraf') //var paths = { // npm: './node_modules/', // lib: './wwwroot/lib/' //}; //var libs = [ // paths.npm + 'core-js/client/shim.min.js', // paths.npm + 'zone.js/dist/zone.js', // paths.npm + 'reflect-metadata/Reflect.js', // paths.npm + 'systemjs/dist/system.src.js' //]; //gulp.task('libs', function() { // return gulp.src(libs).pipe(gulp.dest(paths.lib)); //}); //gulp.task('clean', function (callback) { // rimraf(paths.lib, callback); //}); var gulp = require('gulp'); var libs = './wwwroot/libs/'; gulp.task('default', function() { // place code for your default task here }); gulp.task('restore:core-js', function() { gulp.src([ 'node_modules/core-js/client/*.js' ]).pipe(gulp.dest(libs + 'core-js')); }); gulp.task('restore:zone.js', function() { gulp.src([ 'node_modules/zone.js/dist/*.js' ]).pipe(gulp.dest(libs + 'zone.js')); }); gulp.task('restore:reflect-metadata', function() { gulp.src([ 'node_modules/reflect-metadata/reflect.js' ]).pipe(gulp.dest(libs + 'reflect-metadata')); }); gulp.task('restore:systemjs', function() { gulp.src([ 'node_modules/systemjs/dist/*.js' ]).pipe(gulp.dest(libs + 'systemjs')); }); gulp.task('restore:rxjs', function() { gulp.src([ 'node_modules/rxjs/**/*.js' ]).pipe(gulp.dest(libs + 'rxjs')); }); gulp.task('restore:angular-in-memory-web-api', function() { gulp.src([ 'node_modules/angular-in-memory-web-api/**/*.js' ]).pipe(gulp.dest(libs + 'angular-in-memory-web-api')); }); gulp.task('restore:angular', function() { gulp.src([ 'node_modules/@angular/**/*.js' ]).pipe(gulp.dest(libs + '@angular')); }); gulp.task('restore:bootstrap', function() { gulp.src([ 'node_modules/bootstrap/dist/**/*.*' ]).pipe(gulp.dest(libs + 'bootstrap')); }); gulp.task('restore', [ 'restore:core-js', 'restore:zone.js', 'restore:reflect-metadata', 'restore:systemjs', 'restore:rxjs', 'restore:angular-in-memory-web-api', 'restore:angular', 'restore:bootstrap' ]);
-
wwwroot文件夹下的index.html文件
<html> <head> <title>Angular QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <script src="libs/core-js/shim.min.js"></script> <script src="libs/zone.js/zone.js"></script> <script src="libs/reflect-metadata/Reflect.js"></script> <script src="libs/systemjs/system.src.js"></script> <!-- 2. Configure SystemJS --> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function (err) { console.error(err); }); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>
和最重要的3.systemjs.config.js文件
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'libs/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
更新的代码在Github