Angular 2 Tutorial #16 - Routing

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:

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

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

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

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

[md.altafhussain]

Update : dont create a new app-route.ts file instead write the code in app.module.ts file :
Mine app.module.ts file

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

const routes: Routes = [
{path : 'directive', component : DirectiveComponent},
{path :'', component : HomeComponent}

];

@NgModule({
declarations: [
AppComponent,
HomeComponent,
DirectiveComponent
],
imports: [RouterModule.forRoot(routes),
BrowserModule,
FormsModule,
HttpModule
],
exports: [RouterModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


In app.component .html file simply add and no need to change any more files

[faboneproject]

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

[antoniochacon]

great tutorial, your are making the best tutorial im following these days about angular2

[vladimiralekhin]

Hi!
We just remove <app-home> tag with [ninja]. So, how can I send a ninja to home-component using <router-outlet>?

[alexisgc]

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!!

[turayalomo]

Hello. Thanks for your video. I got stuck in this video. And following the comments seems to be getting me more confused. I checked the link you provided, (github), seems to be empty. How can we complete this video please? Thank you.

[huihao]

You explained everything crystal clear. Thank you.

[VarunPerla]

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

[pulkitbanta]

I'm not able to import 'providerRoute' as it says that this is not available in angular 8.
I'm not able to go further with the video.. so any solutions here ?

[paulbassek]

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?

[redsnakeintown]

does atom has a plugin to autoimport classes when you write code

[felipe.drumond]

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...

[mga]

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 ?

[shethshaily]

on click of a botton i need to display the angular 2 google maps.

do i have to implement using routing?

[commanderbensisko]

I'm stuck here on this routing feature. From comments below, routing has changed in Angular 8.
I would be grateful for some direction on how to alter my code accordingly.

[rob.ale]

Why didn't you remove HomeComponent from directives?

[dipeshpamnani]

how can I route to particular page on a click of button?

[Stinow]

hey m8, nice video and thank you!

One question; how do the ROUTER_DIRECTIVES in app.component.ts and the <router-outlet> tag in app.component.html ADD UP?

Thx!

[PavlosVasileiadis]

Thank you but Routing has changed in RC5...

[RajKishor-eokv]

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