Question

主要问题是我的AuthService（我在AppComponent中注入）注入了Router，它被提供给加载的Module，导致出现此错误。我将其从Auth Service中删除并将其保留在AppComponent中，所以在首先加载至少一个组件。

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

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

我的app.module看起来像这样：

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

platformBrowserDynamic().bootstrapModule(AppModule);

main.ts文件：

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();
  }
}

和app组件：

ToArray

我将应用更新到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);

<强> main.ts

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

Answer 5

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

Angular 2 RC 5路由器

5 个答案: