SHARE

Hey ninjas, in this Angular 2 tutorial I’ll be showing you how we can set up routing in our Angular 2 application.

—– COURSE LINKS:
+ Repo – https://github.com/iamshaunjp/angular-2-playlist
+ Atom editor – https://atom.io/
+ Download Node.js – https://nodejs.org/en/

———————————————————————————————
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== PSD to WordPress Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W

============ Node.js for Beginners Playlist =============

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

30 COMMENTS

  1. What should i do ?

    ERROR in C:/Users/Animus/Documents/angularjs/ninja-directory/src/app/app.component.ts (3,10): Module '"C:/Users/Animus/Documents/angularjs/ninja-directory/node_modules/@angular/router/index"' has no exported member 'ROUTER_DIRECTIVES'.

    ERROR in C:/Users/Animus/Documents/angularjs/ninja-directory/src/app/app.component.ts (8,3): Argument of type '{ selector: string; templateUrl: string; styleUrls: string[]; directives: any[]; }' is not assignable to parameter of type 'Component'.
    Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.

    ERROR in C:/Users/Animus/Documents/angularjs/ninja-directory/src/app/app.routes.ts (3,9): Module '"C:/Users/Animus/Documents/angularjs/ninja-directory/node_modules/@angular/router/index"' has no exported member 'provideRouter'.

    ERROR in C:/Users/Animus/Documents/angularjs/ninja-directory/src/main.ts (10,1): Cannot find name 'bootstrap'.

    ERROR in C:/Users/Animus/Documents/angularjs/ninja-directory/src/main.ts (10,11): Cannot find name 'AppComponent'.

    ERROR in C:/Users/Animus/Documents/angularjs/ninja-directory/src/main.ts (10,1): Cannot find name 'bootstrap'.

    ERROR in C:/Users/Animus/Documents/angularjs/ninja-directory/src/main.ts (10,11): Cannot find name 'AppComponent'.

  2. Hey guys. Also struggled with routing. But now it's really simple.
    Check it out https://angular.io/guide/router

    app.module.ts file looks like this :

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { RouterModule, Routes } from '@angular/router'; // This is what we need for routing

    import { AppComponent } from './app.component';
    import { HomeComponent } from './home/home.component';
    import { DirectoryComponent } from './directory/directory.component';

    const appRoutes: Routes = [
    { path: 'directory', component: DirectoryComponent},
    { path: '', component: HomeComponent}
    ];

    @NgModule({
    declarations: [
    AppComponent,
    HomeComponent,
    DirectoryComponent
    ],
    imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes) // Add here array with paths and components
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

    app.component.html file looks like this:

    <header>
    <h1>Welcome to my App</h1>
    </header>
    <nav>
    <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/directory">Directory</a></li>
    </ul>
    </nav>
    <section id='main'>
    <!–<app-home [ninja]="ninja" (onYell)="yell($event)"></app-home>–>
    <router-outlet></router-outlet> // Views will be loaded here

    </section>

  3. While adding bootstrap (AppComponent, [APP_ROUTER_PROVIDER]) in main.ts file, it shows an error "Cannot find the name Bootstrap"

  4. I really want to use your Angular tutorials, however it's out dated already…. You style of explaining is superb; just really sucks a lot of stuff doesn't work with angular 4…

  5. Hello Sir,
    i tried your code but it is showing error. I am using angular 2.4 version. There is no bootstrapcomponent code in my Main.ts file.
    Please help with full code.
    thank you

  6. 2017 Routing Method – No need for routes.ts file

    – import { RouterModule } from '@angular/router';

    – In @NgModule decorator of app.module.ts
    RouterModule.forRoot([
    {
    path: 'directory',
    component: DirectoryComponent

    },
    {
    path: 'home',
    component: HomeComponent
    }
    ])
    ]

    -In app.component.html
    <a routerLink="/home">Home</a>

    <a routerLink="/directory">Directory</a>

    <router-outlet></router-outlet>

    If you created your components like the ninja and imported them in the root module..this should work

  7. Thank you, I had a problem with Home redirection because I was using "/" as route path but in your video I saw that I have to use "" instead. Thanks!!

  8. very nice tuto :
    I have this error in/@angular/router/index"' has no exported member 'ROUTER_DIR
    ECTIVES'.)

    Knowing that in pakcage.json i have : "@angular/router": "^3.3.1",

  9. Props to barbarianmeetscoding for the following solution for RC5:

    /* Routing RC5 */
    /* app.routes.ts */
    import { Routes, RouterModule } from '@angular/router';
    import { DirectoryComponent } from "./directory/directory.component";
    import { HomeComponent } from "./home/home.component";

    const routes: Routes = [
    {
    path: '',
    component: HomeComponent
    },
    {
    path: 'directory',
    component: DirectoryComponent
    }
    ];
    export const routing = RouterModule.forRoot(routes);

    /* app.module.ts */
    import { Routing } from './app.routes';

    @NgModule({
    declarations: [

    ],
    imports: [

    Routing // Import
    ],

    })
    export class AppModule { }

    /* app.component.html */
    <router-outlet></router-outlet>

  10. I got it to work, but I can't guarantee that I followed best practices. I am not Net Ninja!

    I made a git repository for the code that that I got to work for this lesson. You can get it like this:

    git clone https://github.com/amnotafraid/ninja-directory -b Lesson16

    Alternately, you can just look at the code here: https://github.com/amnotafraid/ninja-directory/tree/Lesson16

    Please see the readme here for changes: https://github.com/amnotafraid/ninja-directory/blob/Lesson16/README.md

  11. Hi Dear Ninja, can you do this part again with the new version. It tired me a lot but not working with same code as you did. Thanks

  12. After generating the directory component, I created a routes file, src/app/app.routes.ts, that just had a const array in it:

    import { DirectoryComponent } from "./directory/directory.component";
    import { HomeComponent } from "./home/home.component";

    export const APP_ROUTES = [
    { path: 'directory', component: DirectoryComponent },
    { path: '', component: HomeComponent }
    ];

    There were no changes to src/main.ts.

    To src/app/app.module.ts, I added this:

    import { APP_ROUTES } from './app.routes';

    And to the imports array, I added this element:

    RouterModule.forRoot(APP_ROUTES)

    And finally, in src/app/app.component.html:

    <router-outlet></router-outlet>

    In src/index.html, I had to add this as the first thing after <head>:

    <base href="/">

    So, there is less to do in what? RC5 are we calling it?

  13. Thank you for great tutorial. All was going perfect until this lesson. Unfortunately this one stopped whole progress. Routing was changed, and previous comments are not helpful.

  14. Hi, I'm loving your videos but I've got to this stage and its not working – due to RC5… I've tried some of the solutions below but it looks like I've made some big mistakes and can't move on… Are there any files available that I can use?

  15. Stuck getting "Argument of type '{ declarations: (ModuleWithProviders | typeof AppComponent | typeof DirectoryComponent)[]; import…' is not assignable to parameter of type 'NgModule'."

  16. What if I want to route using regular expression? For instante,┬áredirecting to product.module when /category/productName, and redirecting to category.component when /category/2…

  17. feeding APP_ROUTES into main.ts is no longer necessary:

    1. app.module.ts (truncated):

    import { RouterModule } from "@angular/router";

    @NgModule({
    declarations: [
    AppComponent,
    DirectoryComponent,
    HomeComponent,
    ],
    imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
    { path: '', component: HomeComponent },
    { path: 'directory', component: DirectoryComponent },
    // { path: '**', component: PageNotFoundComponent }
    ])
    ],
    providers: [],
    bootstrap: [AppComponent]
    })

    ================================

    2. app.component.html:

    <h1>Angular Router</h1>
    <nav>
    <a routerLink="/" routerLinkActive="active">Home</a>
    <a routerLink="/directory" routerLinkActive="active">Directory</a>
    </nav>
    <router-outlet></router-outlet>

  18. I thought you should have error in the home.component.html complaining about ninja.name and .belt ! so if you want to fix that error u would use the same binding with the router-outlet ?

LEAVE A REPLY

Please enter your comment!
Please enter your name here