Routing when nested components are used on AppComponent

Question

I am fairly new to Angular 2 and having a problem with Routing. I have just started to explore the Routing. I will explain the structure and what I have achieved so far,

app.router.ts

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

import { AppComponent } from './app.component';
import { LoginComponent } from "../app/login/login.component"

export const router: Routes = [
    { path: '', component: LoginComponent },
    { path: 'login', component: LoginComponent }, 
    { path: 'dashboard', component: AppComponent }
];

export const routes:  ModuleWithProviders = RouterModule.forRoot(router);

app.module.ts

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

import { HttpModule } from '@angular/http';

import {UiSwitchModule} from 'angular2-ui-switch'

import { AppComponent } from './app.component';
import { AllReportsComponent } from "../app/all-reports/all-reports.component"
import { AvailableReportsComponent } from "../app/available-reports/available-reports.component"
import { NextReportsComponent } from "../app/next-reports/next-reports.component"
import { UrlsComponent } from "../app/urls/urls.component"
import { LoginComponent } from "../app/login/login.component"
import { TaskApi } from "../app/api/TaskApi"

import { routes } from "../app/app.router"

@NgModule({
    imports: [ 
        BrowserModule, 
        FormsModule, 
        UiSwitchModule,
        HttpModule,
        routes
    ],
    declarations: [ 
        AppComponent, 
        AllReportsComponent, 
        AvailableReportsComponent, 
        NextReportsComponent,
        UrlsComponent, 
        LoginComponent        
        ],
    bootstrap: [AppComponent]
})

export class AppModule {

}

app.html

   <div>
        <all-reports></all-reports>
       <available-reports></available-reports>
        <next-reports></next-reports>
        <urls></urls>
   </div>

app.component.ts (very simple)

import { Component } from "@angular/core"

@Component({
    templateUrl: '../app/app.html'
})

export class AppComponent {

}

and login.component.ts

import { Component } from '@angular/core';
import { TaskApi } from '../api/TaskApi';
import * as models from '../model/models';

@Component({

    styleUrls: ['/app/css/login.css'],
    templateUrl: '../../app/login/login.html',
    providers: [TaskApi]
})

export class LoginComponent {

}

Now it can be seen that I am using multiple directives on app.html and all the respective components are working fine.

The problem I am facing is when I introduce Routing then I am able to understand where to use "router-outlet". I have used it on Index.html but it does not work and gives error about ng-component. So to just test around I have used following in Index.html,

<body>   
    <base href="/"> 
    <ng-component></ng-component>
</body>

After I do this then my AppComponent is displayed by default where the LoginComponent should be displayed by default. On console, It also gives me error "Error: Cannot find primary outlet to load 'LoginComponent'"

Kindly guide me if I am using 4 directives on App.html as mentioned above then in that case how the routing will work. To summarize, I want to display Login page on localhost:3009/login and localhost:3009 and I want to display Home page (app.html) in localhost:3009/dashboard and app.html is using 4 directives to display 4 child components on it.

score 2 · Accepted Answer · answered May 08 '17 at 13:08

Angular Routing

Since Angular is single page application the routing functionality helps to display different view in single page.

How to use router to change view?

since app.component.html is main view for most user. Iam also consider app.component.html as main view.

Router-outlet

  Router-outer helps to load the change in our angular application.

app.component.html

<router-outlet></router-outlet>

Set AppComponent Default page as router-outlet and create new Dashboard.component.html in your main view.

router.ts

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

import { AppComponent } from './app.component';

import { DashboardComponent } from './dashboard.component';
import { LoginComponent } from "../app/login/login.component"

export const router: Routes = [
    { path: '', component: LoginComponent },
    { path: 'login', redirectTo: '', pathMatch: 'full' }, 
    { path: 'dashboard', component: DashboardComponent }
];

export const routes:  ModuleWithProviders = RouterModule.forRoot(router);

Thanks a lot. I didn't thought to add a new component and use App component as base for other components. I was trying to use App Component for itself and others. — Adnan Yaseen, May 08 '17 at 13:50

score 0 · Answer 2 · answered May 10 '17 at 06:23

The problem with your code is that there is no 'router-outlet', so angular doesn't understand where to display the view.

The 'router-outlet' directive marks where the router displays a view.

In your code, since in app.component.ts you are using app.html so you should use <router-outlet> </router-outlet> in that HTML file.

Your app.html file should look like this:

<router-outlet> </router-outlet>

These below things should not be used in the app component HTML file. They should be used in their the corresponding components.

   <all-reports></all-reports>
   <available-reports></available-reports>
   <next-reports></next-reports>
   <urls></urls>

For further understanding, please refer to the official documentation of Angular2. They have explained it pretty well here https://angular.io/docs/ts/latest/guide/router.html

Routing when nested components are used on AppComponent

2 Answers2

Angular Routing

How to use router to change view?

app.component.html

router.ts