Migrating from router-deprecated 2.0.0-rc.2 to rou

Question

I started learning Angular2 back in June when the angular.io quickstart and the "tour of heroes" (tutorial) were based on router-deprecated and the old main.ts-syntax (now we have ngModules).

I have problems in upgrading both things: Using ngModule (app.module.ts) and using the new router.

Error:

http://localhost:3000/traceur Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:22 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur(…)

thrown in index.html in line:

System.import('app').catch(function(err){ console.error(err); });

main.ts (OLD, works)

import { bootstrap }      from '@angular/platform-browser-dynamic';
import { AppComponent }   from './app.component';
import { HTTP_PROVIDERS, Http, Headers, Response } from '@angular/http';
import 'rxjs/Rx'; // required to use the .map()-Function on a Observable-Object



// Custom Services
import { GlobalSessionService } from './global-session.service';
import { NavbarMenuService } from './navbar-menu.service';

bootstrap(AppComponent,
    [
        HTTP_PROVIDERS,
        Http,
        GlobalSessionService,
        NavbarMenuService
    ]
);

main.ts (NEW, doesn't work)

import { AppComponent }   from './app.component';
// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// The app module
import { AppModule } from './app.module';
// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import { routing, appRoutingProviders } from './app.routing';

// Custom Services
import { GlobalSessionService } from './global-session.service';
import { NavbarMenuService } from './navbar-menu.service';


@NgModule({
  imports: [ BrowserModule, routing ],
  declarations: [ AppComponent ],
  providers: [
        appRoutingProviders,
        HTTP_PROVIDERS,
        Http,
        GlobalSessionService,
        NavbarMenuService
    ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

old routing (in app.component.ts)

  @RouteConfig([
  { path: '/unsere-angebote',
    name: 'UnsereAngebote', 
    component: UnsereAngeboteComponent,
    useAsDefault: true
  },
  { path: '/ihre-loesungen',
    name: 'IhreLoesungen',
    component: IhreLoesungenComponent
  },
  ...

new routing (in app.routes.ts)

import { Routes, RouterModule } from '@angular/router';
...
import { TrainingsComponent } ...
...
import {NewsComponent} from ...


const appRoutes: Routes = [
  ...
  { path: '/news',
    component: NewsComponent
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

export const appRoutingProviders: any[] = [

];

export const routing = RouterModule.forRoot(appRoutes);

systemjs.config.js

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

package.json

{
  "name": "abc-project",
  "version": "0.1.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },

  "dependencies": {
    "@angular/common":                    "2.0.0-rc.5",
    "@angular/compiler":                  "2.0.0-rc.5",
    "@angular/core":                      "2.0.0-rc.5",
    "@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",
    "systemjs": "0.19.36",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "bootstrap": "^3.3.7"
  },

  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^1.8.10",
    "typings":"^1.3.2"
  }
}

Answer 1

I found the error, I had a similar problem like here: Angular2: error at startup of the app "http://localhost:3000/traceur 404 (Not Found)"

The comment at the beginning of a ts-file kills the application. well, at least imports in a comment. crazy bug..

my main.ts-file looked like this:

/*import { bootstrap }      from '@angular/platform-browser-dynamic';
import { AppComponent }   from './app.component';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import 'rxjs/Rx'; // required to use the .map()-Function on a Observable-Object
*/

/*
// Custom Services
import { GlobalSessionService } from './global-session.service';
import { NavbarMenuService } from './navbar-menu.service';

bootstrap(AppComponent,
    [
        HTTP_PROVIDERS,
        Http,
        GlobalSessionService,
        NavbarMenuService
    ]
);*/


import { bootstrap }      from '@angular/platform-browser-dynamic';
import { AppComponent }   from './app.component';
import { HTTP_PROVIDERS, Http, Headers, Response } from '@angular/http';
import 'rxjs/Rx'; // required to use the .map()-Function on a Observable-Object



// Custom Services
import { GlobalSessionService } from './global-session.service';
import { NavbarMenuService } from './navbar-menu.service';

bootstrap(AppComponent,
    [
        HTTP_PROVIDERS,
        Http,
        GlobalSessionService,
        NavbarMenuService
    ]
);