.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

工程顺利建设的所有其他文件，但在执行类似下面

请帮助遇到错误我，我错过了什么？

来源

2017-03-31 ganesh jangam

首先使用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

来源

2017-04-03 05:52:26

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

回答

相关问题