Angular 2 RC 5 路由器

Question

主要问题是在我的 AuthService（我在 AppComponent 中注入）中注入了路由器，该路由器提供给加载的模块，这会导致此错误。我将其从 Auth Service 中删除并留在我的 AppComponent 中，所以在首先加载至少一个组件。

我目前正在尝试弄清楚新版本的 Angular 是如何工作的。 我收到了错误：

在注入路由器之前至少引导一个组件。

我的 app.module 如下所示：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {HttpModule} from '@angular/http';
import {routing, APP_ROUTER_PROVIDERS, children } from './app.routes';

import {appStateProvider} from './providers/AppStateProvider'
// Import configured routes
import {AuthGuard} from './services/auth.guard'
import {AuthService} from './services/auth.service';
import {AppComponent } from './app.component';
import {LoginComponent} from './components/login.component'
import {HomeComponent} from './components/home.component'


    @NgModule({
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing,
        children

      ],
       providers: [
        appStateProvider, 
        APP_ROUTER_PROVIDERS,
        AuthService,
        InsaService
      ],
      declarations: [
        AppComponent,
        LoginComponent,
        HomeComponent,
        NewsComponent
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

main.ts 文件：

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

platformBrowserDynamic().bootstrapModule(AppModule);

和应用组件：

import {Component, OnInit, OnDestroy} from '@angular/core'
import { Router,Routes,
         NavigationExtras, ROUTER_DIRECTIVES } from '@angular/router';
import {Http} from '@angular/http';
import {AuthService} from  './services/auth.service'

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
})


export class AppComponent implements OnInit, OnDestroy {

  private authenticated: boolean = false;
  private loginSubscriber;

  constructor(private _appStateProvider: appStateProvider, private _authService: AuthService, private _insaService: InsaService, private _router:Router) {
    console.log("AppComponent logged")
    if (this._authService.isLoggedIn()) {
      this._router.navigate(['/home']);
    }
    else {
      this._router.navigate(['/login']);
    }
  }

  ngOnInit() {
    this.loginSubscriber = this._authService.LoggedInStatusChangedEmitter.subscribe(
      (loggedin) => {
        this.authenticated = loggedin.value;
      }
    );
  }

  logout(sender: any) {
    this._authService.logout();
  }

  ngOnDestroy(){
    this.loginSubscriber.unsubscribe();
  }
}

我将应用更新到 RC5 并遵循文档，但不知道是什么导致了错误。

Answer 1

从 RC4 升级到 RC5 后，我遇到了同样的问题。它是由在路由提供程序数组中包含组件引起的。

export const appRoutingProviders: any[] = [
    SomeComponent <-- don't do this!  
];

export const appRouterModule = RouterModule.forRoot(appRoutes);

Answer 2

小提示：尝试实现一些功能模块来清理您的代码。使调试代码更容易一些。您可以阅读更多关于功能模块的信息：https://angular.io/docs/ts/latest/guide/ngmodule.html#!#feature-modules

Answer 3

我认为您的 app.module.ts 文件存在一些问题。如果您采用自己的方法，我预计这是由于使用appRoutingProviders 而不是APP_ROUTER_PROVIDERS 造成的。

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

@NgModule({
  imports: [ BrowserModule, routing ],
  declarations: [ AppComponent, homeComponent, /* etc... */ ],
  providers: [
    appRoutingProviders // <- this is what you were missing
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Answer 4

不确定这是否会有所帮助，但您可以尝试以下方法。

app.module

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

import { appRouterProviders } from "./app.routes";

import { AppComponent } from "./app.component";
import { HeaderComponent } from "./header.component";
import { SidenavComponent } from './sidenav.component';
import { FooterComponent } from './footer.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule
    ],
    declarations: [
        AppComponent,
        HeaderComponent,
        FooterComponent,
        SidenavComponent           
    ],
    bootstrap: [AppComponent],
    providers: [appRouterProviders]
})

export class AppModule {
    constructor(private _appRef: ApplicationRef) { }

    ngDoBootstrap() {
        this._appRef.bootstrap(AppComponent);
    }
}

app.routes.ts

import { provideRouter, Routes } from '@angular/router';

import { MyComponent } from "./my.component";

export const routes: Routes = [
    {
        path: '',
        redirectTo: '/my',
        pathMatch: 'full'
    },
    {
        path: 'my',
        component: MyComponent
    }
];

export const appRouterProviders = provideRouter(routes);

ma​​in.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Answer 5

我有一个类似的错误，问题是将路由器注入到一些现有组件的构造函数中，删除了注入并且错误消失了。尝试按照控制台中显示的堆栈跟踪，看看您是否可以识别它抱怨的组件。在我的例子中，尝试实例化将路由器注入构造函数的服务提供者时发生此错误。