Angular 2 RC 5 router

Question

The main issue was that in my AuthService (which I injected in AppComponent) had injected Router, which is provided to the loaded Module, which causes this error.I removed it from Auth Service and left it in my AppComponent, so at least one component is loaded first.

I'm currently try to figure out how does new version of angular works. I'm getting the error:

Bootstrap at least one component before injecting Router.

My app.module looks like this:

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 file:

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

platformBrowserDynamic().bootstrapModule(AppModule);

and app component:

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

I updated app to RC5 and followed documentation but don't know what caused the error.

Answer 1

I had this same issue after upgrading from RC4 to RC5. It was caused by including components in the routing providers array.

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

export const appRouterModule = RouterModule.forRoot(appRoutes);

Answer 2

I had a similar error, the problem was injecting Router into constructor of some existing components, removed the injection and error went away. Try following the stack trace shown in the console to see if you can identify which component it is complaining about. This error occurred while attempting to instantiate a service provider that was injecting Router into constructor, in my case.

Answer 3

Not sure if this will help but you can try the below.

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 4

I think you have some issues with your app.module.ts file. I expect this is caused by useing appRoutingProviders rather than APP_ROUTER_PROVIDERS if you are taking your approach.

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 5

Small tip: Try to implement some Feature Modules to clean up your code. Makes it a little easier to debug your code. You can read more about feature modules in: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#feature-modules