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

时间:2017-03-31 12:18:41

标签: .net angular typescript asp.net-core

我正在尝试使用Visual Studio update 3在.Net Core中帮助实现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。的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

中的所有其他文件

项目构建成功但在执行时遇到错误

enter image description here

请帮助我,我到底错过了什么?

1 个答案:

答案 0 :(得分:0)

首先使用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. 和最重要的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

    更新了代码