5- Routing Component URLs(provideRouter Component)

Once your angular2JS app is up and running on server, the localhost link(http://localhost:4200) loads only one component/view no matter how the URL is modified as,
http://localhost:4200/home (or) http://localhost:4200/phonebook (or) http://localhost:4200/lfhvf??**,
all returns the same view content.

This post talks about how to customize and display content by routing a view to each component and a relative URL using the provideRouter Component in the package @angular.router

Considering the project structure,
The main project folder has an index.html which includes the tag<app-root> that routes and replaces the section's content to the View of Root component. Based on the app that has been created during the previous links,

Main project directory >> index.html >>(<app-root></app-root>) ==> rootComponentView

==><app-home></app-home>==>homeComponentView

However, whatever the URL , the same view loads up,
Hence we use the provideRouter Component to channelize the loading of Components/Views based on the URL.


Steps to do this:

Note: For demo purposes, lets create another sub-component called Phonebook using the Editor terminal as done previously.


Step 1: 
>>Create a routes' file, in which we export our defined routes,and further,
>>these routes can be loaded in the main.ts file via the app.routes.ts file that has been configured for all Modules(components, Bootstrap,etc). main.ts is referred by angular to understand all the configurations.

• create app.routes.ts file directly under the src/app folder.
• Create an array of path and component relation arrays. Remember to include the import statements for the declarations.
• Export the array as done to any other component in their .ts files using the provideRouter Component.

         app.routes.ts                                                                                                                
import {PhoneBookComponent} from './phone-book/phone-book.component';         
import {HomeComponent} from './home/home.component';         
import {providerRouter} from ''@angular/router';         

const APP_ROUTES = [                    
                    {path:'',component: HomeComponent},
                    {path:'PhoneBook',component: PhoneBookComponent}
         ]         export const APP_ROUTES_PROVIDER = [
           providerRouter(APP_ROUTES )
         ];
                                                                                                                                   

• Now, we need to declare this constant(array of links) within the app.modules.ts(as in screenshot below), passed to the bootstrap funtion along with RootComponent as seen in the screenshot, which is configured in main.ts, where the angularJS acknowledges the links and relates them to the appropriate Component/URL.(We include the below text(highlighted in green) in app.modules.ts file

       

Step 2 :

• Now, replace the hard-coded component tags in the main view, such as <app-home></app-home> with <router-outlet></router-outlet>.Doing so, will handle in loading the related view based on the url requested. 
• <router-outlet></router-outlet>
• However, this tag needs to be imported in the root component file. The import statement for <router-outlet> is:  
• import {ROUTER_DIRECTIVES} from '@angular/router';