Angular2 Rc4 到 Rc5 迁移：无法加载网站 (traceur/forms)

Question

我今天使用 this 将我的 ng2 应用程序从 RC4 升级到 RC5，稍后将从 RC5 升级到 C7。我遇到了烦人的错误

http://localhost:5001/ember-cli-live-reload.js Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:5001/traceur Failed to load resource: the server responded with a status of 404 (Not Found) zone.js:344 Unhandled Promise rejection: (SystemJS) XHR error (404 Not Found) loading http://localhost:5001/traceur Error: XHR error (404 Not Found) loading http://localhost:5001/traceur at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:5001/vendor/zone.js/dist/zone.js:636:29) at ZoneDelegate.invokeTask (http://localhost:5001/vendor/zone.js/dist/zone.js:225:37) at Zone.runTask (http://localhost:5001/vendor/zone.js/dist/zone.js:125:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:5001/vendor/zone.js/dist/zone.js:293:33) Error loading http://localhost:5001/traceur Unable to load transpiler to transpile http://localhost:5001/vendor/@angular/forms/index.js Error loading http://localhost:5001/vendor/@angular/forms/index.js as "@angular/forms" from http://localhost:5001/app/app.module.js ; Zone: ; Task: Promise.then ; Value: Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:5001/traceur(…) (SystemJS) XHR error (404 Not Found) loading http://localhost:5001/traceur Error: XHR error (404 Not Found) loading http://localhost:5001/traceur at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:5001/vendor/zone.js/dist/zone.js:636:29) at ZoneDelegate.invokeTask (http://localhost:5001/vendor/zone.js/dist/zone.js:225:37) at Zone.runTask (http://localhost:5001/vendor/zone.js/dist/zone.js:125:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:5001/vendor/zone.js/dist/zone.js:293:33) Error loading http://localhost:5001/traceur Unable to load transpiler to transpile http://localhost:5001/vendor/@angular/forms/index.js Error loading http://localhost:5001/vendor/@angular/forms/index.js as "@angular/forms" from http://localhost:5001/app/app.module.jsconsoleError @ zone.js:344 zone.js:346 Error: Uncaught (in promise): Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:5001/traceur(…)consoleError @ zone.js:346

罪魁祸首是

Unable to load transpiler to transpile http://localhost:5001/vendor/@angular/forms/index.js

Error loading http://localhost:5001/vendor/@angular/forms/index.js as "@angular/forms" from http://localhost:5001/app/app.module.js

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './app.routes';

import { AppComponent }  from './app.component';
import { FactoryFormComponent } from "./factory/factory-form.component";
import { SupplierFormComponent } from "./supplier/supplier-form.component";
import { BusinessAreaFormComponent } from './business-area/business-area-form.component';
import { HomeComponent } from "./home/home.component";

import { FactoryService } from "./factory/factory.service";
import { SupplierService } from "./supplier/supplier.service";
import { AppService } from "./shared/app.service";
import { UtilityService } from "./shared/utility.service";
import { HomeService } from "./home/home.service";
import { BusinessAreaService } from './business-area/business-area.service';


@NgModule({
    imports: [BrowserModule, routing, FormsModule, HttpModule],
    declarations: [AppComponent, HomeComponent, FactoryFormComponent, SupplierFormComponent, BusinessAreaFormComponent],
    bootstrap: [AppComponent],
    providers: [AppService, UtilityService, FactoryService, SupplierService, HomeService, BusinessAreaService]
})
export class AppModule { }

packages.json

{
  "name": "xxxx",
  "version": "0.0.0",
  "license": "xxxx",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "postinstall": "typings install",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "angular2-in-memory-web-api": "0.0.20",
    "systemjs": "0.19.38",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.12",
    "bootstrap": "^3.3.6",
    "es6-shim": "0.35.1",
    "ng2-bootstrap": "^1.0.17"
  },
  "devDependencies": {
    "angular-cli": "1.0.0-beta.6",
    "codelyzer": "0.0.20",
    "cucumber": "^1.2.1",
    "ember-cli-inject-live-reload": "1.4.0",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "0.2.3",
    "karma-jasmine": "0.3.8",
    "protractor": "3.3.0",
    "protractor-cucumber-framework": "^0.6.0",
    "ts-node": "0.5.5",
    "tslint": "3.11.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.5"
  }
}

系统-config.ts

// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
};

/** User packages configuration. */
const packages: any = {
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
    // Angular specific barrels.
    '@angular/core',
    '@angular/common',
    '@angular/compiler',
    '@angular/http',
    '@angular/router',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/forms',

    // Thirdparty barrels.
    'rxjs',
    'ng2-bootstrap',

    // App specific barrels.
    'app',
    'app/shared',
    'app/factory',
    'app/data',
    'app/supplier',
    'app/home',
    'app/business-area',
    'app/contact',
  'app/relationship',
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
    cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
    map: {
        '@angular': 'vendor/@angular',
        'rxjs': 'vendor/rxjs',
        'main': 'main.js',
        'moment': 'vendor/moment/moment.js',
        'ng2-bootstrap': 'vendor/ng2-bootstrap/ng2-bootstrap.js'
    },
    packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

angular-cli-build.js

// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function (defaults) {
    return new Angular2App(defaults, {
        vendorNpmFiles: [
          'systemjs/dist/system-polyfills.js',
          'systemjs/dist/system.src.js',
          'zone.js/dist/**/*.+(js|js.map)',
          'es6-shim/es6-shim.js',
          'reflect-metadata/**/*.+(ts|js|js.map)',
          'rxjs/**/*.+(js|js.map)',
          '@angular/**/*.+(js|js.map)',
          'ng2-bootstrap/**/*.js',
          'moment/moment.js',
          'bootstrap/dist/**/*'
        ]
    });
};

我似乎无法理解为什么它无法加载表单。它确实与 RC4 一起工作......欢迎任何建议。

Answer 1

为了能够从 RC04 迁移到 RC05，我相信你必须使用旧版本的表单模块

"@angular/forms": "version 0.3.0"

我建议直接尝试更新到 Angular2 版本 2.0.0。

Answer 2

Angular 团队更改了他们关于软件包中 ES 版本的政策。过去，你有 ES5 脚本，一切都很好用。目前，包内的文件是用 ES6 编写的。 SystemJS 在内部找到 import {something} from 'somewhere'; 并尝试将脚本转换为 ES5（这是 traceur 的目的）。

解决方法：更改 SystemJS 配置或设置 traceur 以在客户端浏览器中转换脚本。

我更喜欢第一种方法，因为它更快更容易设置：

系统-config.ts:

...
const packages: any = {
  'rxjs' : {main: 'Rx'},
  '@angular/core' : {main: 'bundles/core.umd.js'},
  '@angular/common' : {main: 'bundles/common.umd.js'},
  '@angular/upgrade' : {main: 'bundles/upgrade.umd.js'},
  '@angular/compiler' : {main: 'bundles/compiler.umd.js'},
  '@angular/forms' : {main: 'bundles/forms.umd.js'},
  '@angular/router' : {main: 'bundles/router.umd.js'},
  '@angular/platform-browser' : {main: 'bundles/platform-browser.umd.js'},
  '@angular/platform-browser-dynamic': {main: 'bundles/platform-browser-dynamic.umd.js'},
  '@angular/http' : {main: 'bundles/http.umd.min.js'},
...

此策略的缺点是您将整个包放在一个文件中。这会使调试变得更加困难。

此外，请记住，您将不会被允许访问被 angular 团队标记为私有的 API。这也是最近的变化。

更多信息请点击这里： https://github.com/angular/angular/blob/master/CHANGELOG.md

Angular2 Rc4 到 Rc5 迁移：无法加载网站 (traceur/forms)

Angular2 Rc4 to Rc5 Migration: unable to load website (traceur/forms)

migration

typescript

angular-cli

angular