Angular 2应用程序在ASP.NET 5环境中不起作用 [英] Angular 2 application not working in an ASP.NET 5 Environment
问题描述
我有一个Angular 2应用程序(在ASP.NET 5环境中)，该应用程序在Chrome中运行，在IE 11中运行时，我在控制台中收到以下错误消息
I have an Angular 2 application (In an ASP.NET 5 environment) that is working when running in Chrome, when running in IE 11 I'm getting the following error message in the console
错误:语法错误:语法错误
Error: SyntaxError: Syntax error
在ZoneDelegate.prototype.invoke
( http://localhost:52801/lib/angular2-polyfills.js:347: 14 )
在Zone.prototype.run
( http://localhost:52801/lib/angular2-polyfills.js:242: 18 )
在匿名功能
( http://localhost:52801/lib/angular2-polyfills.js:597: 18 )
at ZoneDelegate.prototype.invoke
(http://localhost:52801/lib/angular2-polyfills.js:347:14)
at Zone.prototype.run
(http://localhost:52801/lib/angular2-polyfills.js:242:18)
at Anonymous function
(http://localhost:52801/lib/angular2-polyfills.js:597:18)
据我了解，从IE 11运行Angular 2应用程序时会出现问题，可以通过按正确的顺序包含各种shim和polyfills文件来解决大多数这些问题.这是我包含的JavaScript文件
From what I have read there are problems when running Angular 2 applications from IE 11, most of these problems can be resolved by including the various shim and polyfills files in the correct order. Here are my javascript files that I include
<script src="~/lib/es6-shim.js"></script>
<script src="~/lib/systemjs/dist/system-polyfills.js"></script>
<script src="~/lib/shims_for_ie.js"></script>
<script src="~/lib/angular2-polyfills.js"></script>
<script src="~/lib/systemjs/dist/system.js"></script>
<script src="~/lib/rx.js"></script>
<script src="~/lib/angular2.dev.js"></script>
<script src="~/lib/router.dev.js"></script>
和我的系统配置
<script>
System.config({ packages: { app: { defaultExtension: 'js' } } });
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
要让该应用程序在IE 11中运行，我还需要做其他事情吗?
Is there anything else that I have to do to get the application to run in IE 11?
推荐答案
You can also work through my Setting up Angular 2 in an ASP.NET 5 environment article on Code Project and download the source files.
经过大量研究，我终于设法使Angular 2在ASP.NET 5环境中工作.
After a lot of research I finally managed to get Angular 2 working within an ASP.NET 5 environment.
首先，请确保至少安装了以下版本的IDE和其他软件工具.
First of all make sure that you at least have the following versions of the IDE and other software tools installed.
- Visual Studio 2015 14.0.24720.00更新1
- Resharper Ultimate 2016.1.2(如果您使用的是ReSharper)
- TypeScript 1.8.6
- nodejs 4.4.5
要成功设置Angular 2应用程序，您需要以下文件
To successfully setup an Angular 2 application you would need the following files
[Project Root Folder]/typings.json包含
[Project Root Folder]/typings.json containing
{
"globalDependencies":
{
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
"node": "registry:dt/node#4.0.0+20160509154515"
}
}
[项目根文件夹]/package.json包含
[Project Root Folder]/package.json containing
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.11",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"gulp": "3.9.1",
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}
}
[项目根文件夹]/gulpfile.js包含
[Project Root Folder]/gulpfile.js containing
var gulp = require('gulp');
var rimraf = require('rimraf');
var paths = {
npm: './node_modules/',
angular: './wwwroot/lib/@angular/',
angular2InMemoryWebApi: './wwwroot/lib/angular2-in-memory-web-api/',
rxjs: './wwwroot/lib/rxjs/',
lib: './wwwroot/lib/'
};
var angular = [
paths.npm + '@angular/**/*'
];
var angular2InMemoryWebApi = [
paths.npm + 'angular2-in-memory-web-api/**/*'
];
var rxjs = [
paths.npm + 'rxjs/**/*'
];
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('angular', function() {
return gulp.src(angular).pipe(gulp.dest(paths.angular));
});
gulp.task('angular2InMemoryWebApi', function () {
return gulp.src(angular2InMemoryWebApi)
.pipe(gulp.dest(paths.angular2InMemoryWebApi));
});
gulp.task('rxjs', function () {
return gulp.src(rxjs).pipe(gulp.dest(paths.rxjs));
});
gulp.task('libs',function() {
return gulp.src(libs).pipe(gulp.dest(paths.lib));
});
gulp.task('clean', function(callback) {
rimraf(paths.lib, callback);
});
请记住执行这些gulp任务，这些任务会将Angular 2依赖项移至[Project Root Folder]/wwwroot.
Remember to execute these gulp tasks that will move the Angular 2 dependencies to the [Project Root Folder]/wwwroot.
[Project Root Folder]/scripts/app.component.ts文件包含
[Project Root Folder]/scripts/app.component.ts file containing
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: Congratulations on your fisrt Angular 2 application in an ASP.NET 5 environment!'
})
export class AppComponent { }
[Project Root Folder]/scripts/main.ts文件包含
[Project Root Folder]/scripts/main.ts file containing
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
[Project Root Folder]/tsconfig.json文件包含
[Project Root Folder]/tsconfig.json file containing
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "wwwroot/app/"
},
"exclude": [
"node_modules",
"wwwroot"
]
}
[Project Root Folder]/wwwroot/systemjs.config.js包含的文件
[Project Root Folder]/wwwroot/systemjs.config.js file containing
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'lib/@angular',
'angular2-in-memory-web-api': 'lib/angular2-in-memory-web-api',
'rxjs': 'lib/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/' + pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
};
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);
[Project Root Folder]/wwwroot/index.html包含的文件
[Project Root Folder]/wwwroot/index.html file containing
<html>
<head>
<title>Angular 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="lib/shim.min.js"></script>
<script src="lib/zone.js"></script>
<script src="lib/reflect.js"></script>
<script src="lib/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
这篇关于Angular 2应用程序在ASP.NET 5环境中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
