Question

我使用this将我的ng2应用程序从RC4升级到RC5，稍后将从RC5升级到C7。我正在变得烦人的错误

http://localhost:5001/ember-cli-live-reload.js无法加载资源：服务器响应状态为404（未找到） http://localhost:5001/traceur无法加载资源：服务器回复状态为404（未找到）zone.js：344未处理承诺拒绝：（SystemJS）XHR错误（404 Not Found）加载 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）在ZoneDelegate.invokeTask（http://localhost:5001/vendor/zone.js/dist/zone.js:225:37）在Zone.runTask（http://localhost:5001/vendor/zone.js/dist/zone.js:125:47）在XMLHttpRequest.ZoneTask.invoke（http://localhost:5001/vendor/zone.js/dist/zone.js:293:33）错误 loading http://localhost:5001/traceur无法加载转发器 transpile http://localhost:5001/vendor/@angular/forms/index.js错误加载http://localhost:5001/vendor/@angular/forms/index.js为来自http://localhost:5001/app/app.module.js的“@ angular / forms”;区： ;任务：Promise.then;值：错误：（SystemJS）XHR错误（404 未找到）加载http://localhost:5001/traceur（...）（SystemJS）XHR 错误（404 Not Found）loading http://localhost:5001/traceur错误：加载http://localhost:5001/traceur XHR错误（404 Not Found）在XMLHttpRequest.wrapFn [as _onreadystatechange]（http://localhost:5001/vendor/zone.js/dist/zone.js:636:29）在ZoneDelegate.invokeTask（http://localhost:5001/vendor/zone.js/dist/zone.js:225:37）在Zone.runTask（http://localhost:5001/vendor/zone.js/dist/zone.js:125:47）在XMLHttpRequest.ZoneTask.invoke（http://localhost:5001/vendor/zone.js/dist/zone.js:293:33）错误 loading http://localhost:5001/traceur无法加载转发器 transpile http://localhost:5001/vendor/@angular/forms/index.js错误加载http://localhost:5001/vendor/@angular/forms/index.js为来自“@ angular / forms” http://localhost:5001/app/app.module.jsconsoleError @ zone.js：344 zone.js：346错误：未捕获（在承诺中）：错误：（SystemJS）XHR错误（404 Not Found）loading http://localhost:5001/traceur（...）consoleError @ zone.js：346

罪魁祸首是

无法加载转换器以进行转换   http://localhost:5001/vendor/@angular/forms/index.js

加载http://localhost:5001/vendor/@angular/forms/index.js时出错   来自http://localhost:5001/app/app.module.js
的“@ angular / forms”

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 });

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

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'},
...

此策略的缺点是您在一个文件中包含整个包。这可能会使调试变得更难。

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

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

Answer 2

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

"@angular/forms": "version 0.3.0"

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

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

2 个答案: