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.
