CODEWITHSUNDEEP
angulartypescriptangular-ui-router
Arun
Arun

Reputation: 3680

Angular Type Script Router Configuration not working. Always redirects to home Page

I am pretty new to Angular. When i hit the app with localhost:9500/pp URL, it always direct to the home page.

This is my app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {RouterModule} from '@angular/router';

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

import {GrowlModule, MenubarModule} from 'primeng/primeng';

import {FlightModule} from './flight/flight.module';

@NgModule({
    declarations: [
        AppComponent,
        NavComponent
    ],
    imports: [
        RouterModule.forRoot([
            { path: '', redirectTo: '', pathMatch: 'full'}
        ]),
        BrowserModule,
        BrowserAnimationsModule,
        RouterModule,
        FlightModule,
        MenubarModule,
        GrowlModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

This is my flight.module.ts

import {NgModule} from '@angular/core';
import {ViewFlightComponent} from './view-flight.component';
import {CommonModule} from '@angular/common';
import {HttpModule} from '@angular/http';

import {DataTableModule} from 'primeng/primeng';
import {RouterModule} from '@angular/router';

@NgModule ({
    declarations: [
        ViewFlightComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        DataTableModule,
        RouterModule.forChild([
            {path: 'pp', component: ViewFlightComponent}
        ])
    ],
    providers: []
})

export class FlightModule {
}

This is my ViewFlightComponent

import {Component} from '@angular/core';


@Component({
    templateUrl: './view-flight.component.html',
    styleUrls: ['./view-flight.component.css']
})

export class ViewFlightComponent {
}

This is my view-flight.comoponent.html

<div>
    Hello ..
</div>

When i hit the app with localhost:9500/pp URL, it always direct to the home page.

I tried a lot.. Not sure what I am missing. Please help

Upvotes: 1

Views: 45

Answers (1)

Amit Chigadani
Amit Chigadani

Reputation: 29715

Probably you have missed to add <router-outlet></router-outlet> in app-component template.

And also you should consider adding route to your child module in your app-module.

RouterModule.forRoot([
   { path : '', redirectTo: '', pathMatch: 'full'},
   { path : '', loadChildren: 'app/flight/flight.module#FlightModule' }
 ])

DEMO

Upvotes: 1

Related Questions