Angular2がrc5と@ angular/routerに更新されました - オリジナル例外：ルータのプロバイダがありません

Question

私はrc4 - > rc5からプロジェクトを更新しました。それはうまくいくようです。 これと同時に、@angular/router-deprecatedから@angular/routerにコードを更新しました。

私のアプリケーションは、公開と保護の2つのセクションで構成されています（公開はすべてのユーザー用、保護は管理者用）。しかし、現在、私はちょうど1つのルートが動作するようにしたい、その後私は他のページを修正することができます。

私は私が正しいと信じているすべてのコードを、更新したと私はこれを追加すると、私は例外に

ORIGINAL EXCEPTION: No provider for Router!

を取得 [routerLink]="['Home']"

私のページにこれを追加するまで、ページがロード言ったように

この行をもう一度コメントアウトすると、すべてのページが正常に読み込まれます。ここで

私のコードの一部

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { RouterModule } from '@angular/router'; 
import { HttpModule } from '@angular/http'; 

import { AppRoutes } from './app.routes'; 
import { AppComponent } from './app.component'; 
import { PublicComponent } from './public.component'; 
//import { ProtectedComponent } from './protected.component'; 

// cms 
import { HomeComponent } from './cms/home.component'; 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     RouterModule.forRoot(AppRoutes) 
    ], 
    declarations: [ 
     AppComponent, 
     PublicComponent, 
     HomeComponent 
    ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { } 

app.routes.ts

import { PublicComponent } from './public.component'; 
import { ProtectedComponent } from './protected.component'; 

// public 
import { HomeComponent } from './cms/home.component'; 


export const AppRoutes = [ 
    { 
     path: '', 
     component: PublicComponent, 
     children: [ 
      { 
       path: '', 
       redirectTo: 'home', 
       pathMatch: 'full' 
      }, 
      { 
       path: 'home', 
       component: HomeComponent 
      }, 
     ] 
    }, 
    // { 
    //  path: 'admin/...', 
    //  component: ProtectedComponent 
    // } 
]; 

app.component.ts

です

import { Component, ViewContainerRef } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router' 

@Component({ 
    selector: 'app-root', 
    template: '<router-outlet></router-outlet>', 
    directives: [ ROUTER_DIRECTIVES ] 
}) 

export class AppComponent { 
    viewContainerRef: ViewContainerRef; 

    constructor(viewContainerRef: ViewContainerRef) { 
     this.viewContainerRef = viewContainerRef; 
    } 
} 

main.ts私はRouterを追加しようとしている

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule); 

public.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router, ROUTER_DIRECTIVES } from '@angular/router'; 
import { CmsService } from './cms/cms.service'; 
import { ModuleService } from './module/module.service'; 
import { MenuItem } from './cms/models/menu-item'; 
import { Settings } from './cms/models/settings'; 
import { CollapseDirective } from 'ng2-bootstrap/components/collapse'; 
import { OffClickDirective } from './shared/offclick.directive'; 

@Component({ 
    selector: 'public', 
    templateUrl: 'app/public.component.html', 
    directives: [ ROUTER_DIRECTIVES, CollapseDirective, OffClickDirective ], 
    providers: [ CmsService, ModuleService ] 
}) 

export class PublicComponent { 
    menu: MenuItem[]; 
    settings: Settings; 
    isCollapsed: boolean = true; 

    constructor(
     private cmsService: CmsService, 
     private router: Router) { 
    } 
} 

public.component.html

<div class="navbar navbar-dark bg-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <a class="navbar-brand" [routerLink]="['Home']"> 
      <span class="fa fa-home fa-2x" aria-hidden="true"></span> 
      <span class="sr-only">Home</span> 
     </a> 
    </div> 
</div> 

プロバイダーセクションはpublic.component.tsですが、私は以下のように別の例外があります。

Error: Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?, ?)

私は明らかに何かを逃しましたが、何が分かりません。どんな助けでも大歓迎です。

はちょうどここに、それは助け包む私のpackage.jsonファイル内の角度の参照がapp.module.ts

調整

app.module.tsから

"dependencies": { 
    "@angular/common": "^2.0.0-rc.5", 
    "@angular/compiler": "^2.0.0-rc.5", 
    "@angular/core": "^2.0.0-rc.5", 
    "@angular/forms": "^0.3.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.3" 
} 

Answer 1

1. 削除routermoduleにもあります

   ... 
   import { routing, appRoutingProviders } from './app.routing'; 
   ... 
   
   @NgModule({ 
       imports: [ 
       ... 
       routing, 
       ... 
       ], 
       ... 
       providers: [ 
       ... 
       appRoutingProviders, 
       ... 
       ], 
       bootstrap: [AppComponent], 
   }) 
   export class AppModule { } 
   

2. app.routingを調整します。TS：どこでも

   import { Routes, RouterModule } from '@angular/router'; 
   import { DashboardComponent } from './dashboard/dashboard.component'; 
   ... 
   import { Http, HTTP_PROVIDERS } from '@angular/http'; 
   
   const appRoutes: Routes = [ 
       { path: '', redirectTo: '/dashboard', pathMatch: 'full'}, 
       { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard]}, 
       ... 
       { path: '**', redirectTo: 'dashboard', pathMatch: 'full'} 
   ]; 
   
   export const appRoutingProviders: any[] = [ 
       ... 
       Http, 
       HTTP_PROVIDERS 
   ]; 
   
   export const routing = RouterModule.forRoot(appRoutes); 
   

3. 削除ROUTER_DIRECTIVES