CODEWITHSUNDEEP
angular
srghma
srghma

Reputation: 5343

No provider for RouterOutletMap

Newest Angular 2.0.0 and via newest angular-cli 1.0.0-beta.14, node: 6.6.0, os: linux x64

What I do:

1) Create new project

ng new angular-test
ng g component projects
ng g component typings

2) Add simple routing

/src/app/app.component.html

 <router-outlet></router-outlet>

/src/app/app.module.ts

export const ROUTES: Routes = [
  {
    path: '',
    redirectTo: '/projects',
    pathMatch: 'full'
  },
  {
    path: 'projects',
    component: ProjectsComponent,
  },
  {
    path: '/typings',
    component: TypingsComponent
  },
  {
    path: '**', redirectTo: ''
  }
];

@NgModule({
  declarations: [
    AppComponent,
    ProjectsComponent,
    TypingsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forChild(ROUTES)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

What I get:

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:3:0 caused by: No provider for RouterOutletMap!
ORIGINAL EXCEPTION: No provider for RouterOutletMap!

enter image description here

How I tried to fix this

I tried to add RouterOutletMap to providers in AppModule, exception don't throw, but app don't redirect to projects and don't show nesting components

Upvotes: 12

Views: 11720

Answers (2)

Chanaka Fernando
Chanaka Fernando

Reputation: 2335

I also had this issue and . this is how i avoid that..... some time this will be helped. best wishes!

The Routing array -- app.routes.ts

const appRoutes:Routes =[
 {
   path: 'home',
   component: CarouselComponent
 },
 {
  path: 'profile',
  component:UserDashboardComponentComponent,
  children: [
     {
      path: 'overview',
      component: ProfileOverviewComponent
     },
     {
      path: 'post',
      component: PostAddComponent
     }
    ]
   }
];

 export const WebRouting: ModuleWithProviders =RouterModule.forRoot(appRoutes);

app.module.ts

@NgModule({
 declarations: [
  AppComponent,
  CarouselComponent,
  .......
],
 imports: [
  BrowserModule,
  MdTabsModule,
  MaterialModule,
  MdInputModule,
  BrowserAnimationsModule,
  FormsModule,
  HttpModule,
  WebRouting
],
 providers: [],
 bootstrap: [AppComponent],
})

export class AppModule { }

tempale.html

  <li>
    <a [routerLink]="['/profile/overview']" routerLinkActive="active" > 
      Overview
    </a>
  </li>
  <li>
    <a [routerLink]="['/profile/post']"routerLinkActive="active">
      PostAdd
    </a>
  </li>

Upvotes: 0

Paul Samsotha
Paul Samsotha

Reputation: 209072

You need to call RouterModule.forRoot for the app module, not forChild. The former adds all the core providers, while the latter doesn't. You should use forChild for child modules, not the app module.

Upvotes: 27

Related Questions