Can not set up routes in Angular 2

Question

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

Seems to be you navigating to "user" instead configured route "users". — Naresh S
– Naresh S, Commented Oct 30, 2016 at 6:02
ah sorry now i am getting this error error_handler.js:47 EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'UserComponent' Error: Cannot find primary outlet to load 'UserComponent' — axcl
– axcl, Commented Oct 30, 2016 at 6:07

micronyks · Accepted Answer · 2016-10-30 06:11:33Z

2

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>

answered Oct 30, 2016 at 6:11

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can not set up routes in Angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related