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

Question

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

http://localhost:5001/ember-cli实时重新加载。js加载资源失败：服务器响应状态为404（未找到）http://localhost:5001/traceur加载资源失败：服务器以404（未找到）区域的状态响应。js:344未处理的promise拒绝：（SystemJS）XHR错误（404未找到）加载http://localhost:5001/traceur错误：XHR错误（404未找到）正在加载http://localhost:5001/traceur在XMLHttpRequest中。wrapFn[as_onreadystatechange](http://localhost:5001/vendor/zone.js/dist/zone.js:636:29)在分区公使馆。调用任务(http://localhost:5001/vendor/zone.js/dist/zone.js:225:37)在这个区域。运行任务(http://localhost:5001/vendor/zone.js/dist/zone.js:125:47)在XMLHttpRequest.ZoneTask。调用(http://localhost:5001/vendor/zone.js/dist/zone.js:293:33)加载错误http://localhost:5001/traceur无法将Transbiler加载到Transbilehttp://localhost:5001/vendor/@角度/形状/索引。js错误加载http://localhost:5001/vendor/@角度/形状/索引。js作为来自的“@angular/forms”http://localhost:5001/app/app.module.js ; 区域：；任务：promise。然后值：错误：（SystemJS）XHR错误（404未找到）正在加载http://localhost:5001/traceur（…）（SystemJS）XHR错误（404未找到）正在加载http://localhost:5001/traceur错误：XHR错误（404未找到）正在加载http://localhost:5001/traceur在XMLHttpRequest中。wrapFn[as_onreadystatechange](http://localhost:5001/vendor/zone.js/dist/zone.js:636:29)在分区公使馆。调用任务(http://localhost:5001/vendor/zone.js/dist/zone.js:225:37)在这个区域。运行任务(http://localhost:5001/vendor/zone.js/dist/zone.js:125:47)在XMLHttpRequest.ZoneTask。调用(http://localhost:5001/vendor/zone.js/dist/zone.js:293:33)加载错误http://localhost:5001/traceur无法将Transbiler加载到Transbilehttp://localhost:5001/vendor/@角度/形状/索引。js错误加载http://localhost:5001/vendor/@角度/形状/索引。js作为来自的“@angular/forms”http://localhost:5001/app/app.module.jsconsoleError@zone。js:344区域。js:346错误：未捕获（promise中）：错误：（SystemJS）XHR错误（404未找到）加载http://localhost:5001/traceur（…）[e-mail]:346

罪魁祸首是：

无法加载转译器转译http://localhost:5001/vendor/@角/形式/index.js

加载错误http://localhost:5001/vendor/@角度/形状/索引。js作为来自的“@angular/forms”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"
  }
}

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

我会建议直接尝试更新到angular 2 2 . 0 . 0版本。

Answer 2

Angular团队已经改变了他们关于软件包中ES版本的政策。在过去，你有ES5脚本，所有的东西都很有魅力。目前，包内的文件是用ES6编写的。SystemJS从“某处”找到< code > import { something }；内部，并尝试将脚本转换到ES5(这是traceur的目的)。

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

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

系统配置文件:

...
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 team标记为私有的API。这也是最近的变化。

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