Kamran Pervaiz Kamran Pervaiz - 2 months ago 125
AngularJS Question

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

I upgraded my ng2 app today from RC4 to RC5 using this and will upgrade from RC5 to C7 later. I am getting annoying error


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


the culprit lines are


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


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


I can't seem to get my head around that why it is unable to load Forms. It was working with RC4 for sure...any suggestion is welcome.

Answer

To be able to migrate to RC05 from RC04 I believe you have to use older version of the forms module

"@angular/forms": "version 0.3.0"

I would suggest to directly try to update to Angular2 version 2.0.0.

Comments