CODEWITHSUNDEEP
angulartypescriptroutes
Isanka Thalagala
Isanka Thalagala

Reputation: 1721

Routing not working properly in angular 6

I'm developing a small angular project with three components.Is that project I have a sub module called component.module and I have added added routing in that module and component.module includes to App.module.

It's compiling without any error but nothing display on screen (see image below).

enter image description here

My project folder structure is like this.

folder structure

components/app-routing.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule, Routes } from "@angular/router";

import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentListComponent, IntentCreateComponent } from "./intent";

const routes: Routes = [
  { path: "", redirectTo: "/home", pathMatch: "full" },
  {
    path: "home",
    component: MainLayoutComponent,
    children: [
      { path: "list", component: IntentListComponent },
      { path: "create", component: IntentCreateComponent }
    ]
  } 
];

@NgModule({
  imports: [CommonModule, RouterModule.forRoot(routes)],
  declarations: [],
  exports: [RouterModule]
})
export class AppRoutingModule {}

components/component.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AppRoutingModule } from "./app-routing.module";
import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentCreateComponent, IntentListComponent } from "./intent";

import { ProjectCreateComponent } from "./project";

@NgModule({
  declarations: [
    MainLayoutComponent,
    IntentCreateComponent,
    IntentListComponent,
    ProjectCreateComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: []
})
export class ComponentModule {}

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { ComponentModule } from "./components/component.module";



@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    ComponentModule,

  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule {}

app.component.html 

<app-main-layout></app-main-layout>

app/components/main-layout/main-layout.component.html

<div class="side-bar">
</div>
  
<div class="content-wrapper">
  <router-outlet></router-outlet>
</div>

Upvotes: 7

Views: 53223

Answers (4)

Pedro Sim&#245;es Developer
Pedro Sim&#245;es Developer

Reputation: 31

Just add <router-outlet></router-outlet> in app.component.html and after configuring routing as explained above

Upvotes: 3

Amir_Afkhami
Amir_Afkhami

Reputation: 11

If the component module is a feature module, then you must write:

RouterModule.forChild(routes)

instead of

RouterModule.forRoot(routes)

Upvotes: 1

Suryan
Suryan

Reputation: 659

Your routes configuration should be something like:

const routes: Routes = [
  { path: "", redirectTo: "/home", pathMatch: "full" },
  {
    path: "home",
    component: MainLayoutComponent,
    children: [
      { path: "", component: IntentListComponent },
      { path: "create", component: IntentCreateComponent },
  ]
  }];

or

    const routes: Routes = [
  { path: "", redirectTo: "/home", pathMatch: "full" },
  {
    path: "home",
    component: MainLayoutComponent,
    children: [
      { path: "list", component: IntentListComponent },
      { path: "create", component: IntentCreateComponent },
      { path: "", redirectTo: "list" pathMatch: "full" }
  ]
  }];

As your component is loaded, but there is nothing in the view. But as for your configuration if you route to /home/list or /home/create that component will be loaded

Upvotes: 2

SiddAjmera
SiddAjmera

Reputation: 39432

If you don't export anything from your ComponentModule module, then importing it in your AppModule won't give it anything from the ComponentModule.

Since you're using Routing and MainLayoutComponent from your ComponentModule in your AppModule, you'll have to add these to the exports array of the ComponentModule as well.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AppRoutingModule } from "./app-routing.module";
import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentCreateComponent, IntentListComponent } from "./intent";

import { ProjectCreateComponent } from "./project";

@NgModule({
  declarations: [
    MainLayoutComponent,
    IntentCreateComponent,
    IntentListComponent,
    ProjectCreateComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: [],
  exports: [AppRoutingModule, MainLayoutComponent]
})
export class ComponentModule {}

PS: If you want to use anything from your ComponentModule into your AppModule, you'll have to export it from your ComponentModule by adding it to the exports array of your ComponentModule.

Upvotes: 8

Related Questions