axcl axcl - 1 month ago 28
Javascript Question

Can not set up routes in Angular 2

By following Steps to implement routing on Official sites i have set up some routes for my new ng2 application but i can not make it work.

My Routes Files.

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { SchoolComponent } from './school/school.component';
import { AdminComponent } from './admin/admin.component';
import { HomeComponent } from './home/home.component';

// Route Configuration
export const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'users', component: UserComponent },
{ path: 'schools', component: SchoolComponent },
{ path: 'admins', component: AdminComponent },
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);


Module File

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { SchoolComponent } from './school/school.component';
import { AdminComponent } from './admin/admin.component';
import { HomeComponent } from './home/home.component';
import { routing } from './app.routes';

@NgModule({
declarations: [
AppComponent,
UserComponent,
SchoolComponent,
AdminComponent,
HomeComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing
],
providers: [],
bootstrap: [AppComponent],

})
export class AppModule { }


When i try to access routes i got these errors in console

error_handler.js:47 EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'UserComponent'
Error: Cannot find primary outlet to load 'UserComponent'


I can not find out what i am doing wrong. Any Help will be appreciated. Thanks

Answer

Cannot find primary outlet means you haven't added router-outlet to HTML . you just need to added it in HTML like this,

<router-outlet></router-outlet>
Comments