Angular 角2 RC 5路由器

主要问题是，在我的AuthService（我在AppComponent中注入了）中注入了路由器，路由器提供给加载的模块，这导致了此错误。我将其从Auth服务中删除，并将其保留在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并按照文档进行了操作，但不知道是什么导致了错误。

小提示：尝试实现一些功能模块来清理代码。使调试代码变得更容易。您可以在中阅读有关功能模块的更多信息：

我认为您的

app.module.ts

文件存在一些问题。我认为这是由于使用

approvingproviders

而不是

APP\u ROUTER\u 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 { }

从“/app.component”导入{AppComponent}；
从“/app.routes”导入{routing，appRoutingProviders}；
@NGD模块({
导入：[浏览器模块，路由]，
声明：[AppComponent、homeComponent、/*等...*/]，
供应商：[
ApprovingProviders/不确定这是否有帮助，但您可以尝试以下方法

应用程序模块

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

应用程序路由.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);

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

main.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);

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

我有一个类似的错误，问题是将路由器注入到一些现有组件的构造函数中，删除了注入，错误消失了。请尝试跟踪控制台中显示的堆栈跟踪，看看您是否可以识别它抱怨的组件。此错误发生在尝试实例化一个已安装的服务提供商时在我的例子中，将路由器注入构造函数。
在从RC4升级到RC5后，我遇到了同样的问题。这是由于在路由提供程序阵列中包含组件造成的

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

export const appRouterModule = RouterModule.forRoot(appRoutes);

export const approvingproviders:any[]=[
SomeComponent否，我忘了共享我的app.routes.ts文件，它使用：export const app_ROUTER_PROVIDERS:any[]=[AuthGuard]；export const routing=RouterModule.forRoot（路由）；哦，我明白了……忽略它。我发现了另一个区别（不确定它是否重要），但在NgModule中，示例通常在提供者上面有声明，你试过了吗？不，没有。我对Angular团队在A2的RC版本中所做的所有突破性更改感到非常恼火：（是的，这太烦人了。抱歉-我不知道还有什么建议。我目前正在一个项目中使用RC5和v3路由器（RC1）工作正常吗？为什么我们必须从
路径：'
重定向到某个地方？我们如何使
路径：'
使用组件
AppComponent
？类似这样：{path:''，重定向到：'/app'，路径匹配：'full'}，{path:'app'，component:AppComponent}如果您真的需要注入呢？我的服务在构造函数中注入了路由器，这导致了错误。在其他组件中注入路由器不会导致错误，因为从那时起AppCmponent已启动。：）我相信问题出在你注入路由器的AuthGuard内部。这里也有同样的问题。你找到解决办法了吗？嗨！我更新了我的答案，请检查：）没有清楚地得到你的答案，你能澄清你的解决方案吗