我正在尝试使用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
中的所有其他文件项目构建成功但在执行时遇到错误
请帮助我,我到底错过了什么?
答案 0 :(得分:0)
首先使用systemjs.config,js文件丢失所以添加它并根据systemjs.config.js文件更改gulpfile中所需的角度相关文件所以这里是一个更改
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);
更新了代码