Angular2更新爲rc5和@角/路由器 - 原來的例外：沒有供應商路由器

我已經從rc4 - > rc5更新了我們的項目。這似乎工作正常。與此同時，我也更新了從@angular/router-deprecated到@angular/router的代碼。Angular2更新爲rc5和@角/路由器 - 原來的例外：沒有供應商路由器

我的應用程序由2個部分組成，公共和受保護（公共用於所有用戶，受保護僅用於管理員）。但目前我只想讓1條路線工作，然後我可以修復其他網頁。

正如我說，我已經更新了所有的代碼，我相信這是正確的，並且頁面加載，直到我加入這個到我的網頁[routerLink]="['Home']"

如果我添加了這一點，那麼我得到的異常

ORIGINAL EXCEPTION: No provider for Router!

如果我再次註釋此行，頁面加載正常。

下面是我的一些代碼

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

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>

我曾嘗試加入Router到public.component.ts中的提供者部分，但然後我得到另一個例外，如下所示。

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

我明顯錯過了一些東西，但不知道是什麼。任何幫助將非常感激。

只是包住它幫助，這裏是我的package.json文件的角度引用以及

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

來源

2016-08-19 Gillardo

從app.module.ts

調整app.module.ts

刪除routermodule

... 
import { routing, appRoutingProviders } from './app.routing'; 
... 

@NgModule({ 
    imports: [ 
    ... 
    routing, 
    ... 
    ], 
    ... 
    providers: [ 
    ... 
    appRoutingProviders, 
    ... 
    ], 
    bootstrap: [AppComponent], 
}) 
export class AppModule { }

調整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);

到處卸下ROUTER_DIRECTIVES

來源

2016-08-19 08:40:53

Angular2更新爲rc5和@角/路由器 - 原來的例外：沒有供應商路由器

回答

相關問題