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

我今天将我的ng2应用程序从RC4升级到RC5，使用this，稍后将从RC5升级到C7。我越来越讨厌错误Angular2 Rc4到Rc5迁移：无法加载网站（traceur /表单）

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

角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合作......任何建议都是值得欢迎的。

来源

2016-09-19 Kamran Pervaiz

为了能够从RC04我认为你必须使用旧版本的形式模块的

"@angular/forms": "version 0.3.0"

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

来源

2016-09-19 10:33:22 magiccrafter

你的意思是直接升级角2至2.0.0？我认为最新的是RC7是不是？ –

@KamranPervaiz Angular2在几天前发布。 – Dinistro

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。这也是最近的变化。

来源

2016-09-19 10:57:47 rzelek

umd.js？这是新的扩展吗？我正在使用angular-cli。它会起作用吗？ –

我也在角上。 UMD是通用模块定义的简短版本。这只是一个标志，该模块可以通过RequireJS和NodeJS导入。更多信息：https：//github.com/umdjs/umd – rzelek

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

回答

相关问题