Angular 2 应用程序无法在 ASP.NET 5 环境中运行

Question

我有一个在 Chrome 中运行的 Angular 2 应用程序（在 ASP.NET 5 环境中），在 IE 11 中运行时我在控制台中收到以下错误消息

错误：语法错误：语法错误

在 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)

根据我的阅读，从 IE 11 运行 Angular 2 应用程序时会出现问题，这些问题中的大多数可以通过按正确顺序包含各种 shim 和 polyfills 文件来解决。这是我包含的 javascript 文件

<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 中运行？

Answer 1

您也可以阅读我关于代码项目的Setting up Angular 2 in an ASP.NET 5 environment 文章并下载源文件。

经过大量研究，我终于设法让 Angular 2 在 ASP.NET 5 环境中工作。

首先确保您至少安装了以下版本的 IDE 和其他软件工具。

• Visual Studio 2015 14.0.24720.00 更新 1
• Resharper Ultimate 2016.1.2（如果您使用的是 ReSharper）
• TypeScript 1.8.6
• nodejs 4.4.5

要成功设置 Angular 2 应用程序，您需要以下文件

[项目根文件夹]/typings.json 包含

{
    "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 包含

{
    "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 包含

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 依赖项移动到 [项目根文件夹]/wwwroot。

[项目根文件夹]/scripts/app.component.ts 文件包含

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 { }

[项目根文件夹]/scripts/main.ts 文件包含

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

[项目根文件夹]/tsconfig.json 文件包含

{
    "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "wwwroot/app/"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

[项目根文件夹]/wwwroot/systemjs.config.js 文件包含

/**
* 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);

[项目根文件夹]/wwwroot/index.html 文件包含

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