从路由器弃用的2.0.0-rc.2迁移到[email protected]

Question

6月份，我开始学习Angular2，当时angular.io quickstart和“英雄之旅”（教程）是基于在路由器弃用和旧的main.ts语法（现在我们有ngModules）。

我在升级这两件事情时遇到了问题：使用ngModule（app.module.ts）并使用新的路由器。

错误：

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 (…)

抛出的index.html在行：

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

main.ts（OLD，作品）

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 （新，不起作用）

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

旧的路由（在app.component.ts）

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

新的路由（在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

我发现错误，我有过类似的问题在这里：Angular2: error at startup of the app "http://localhost:3000/traceur 404 (Not Found)"

的评论在ts文件的开头杀死应用程序。好吧，至少在评论中输入。疯狂的错误..

我main.ts -file是这样的：

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