.Net Core + Angular 2：无法加载模块

Question

我正在尝试使用 Visual Studio 更新 3 在 .Net Core 中的 gulp 的帮助下实现 Angular 2 使用 npm 版本 4.4.4 和节点版本 v6.10.0 并已安装 Typescript 工具。都是

这是我的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。包.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。打字.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 中的所有其他文件

项目构建成功，但执行时出错，如下所示

请帮帮我，我到底错过了什么？

Answer 1

首先使用 systemjs.config,js 文件丢失，所以添加它，并根据 systemjs.config.js 文件更改 gulpfile 中所需的角度相关文件，所以这里是一个更改

1. 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'
   ]);
   

2. 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