CODEWITHSUNDEEP
angularroutesangular8
Ramiz Web Dev
Ramiz Web Dev

Reputation: 611

angular custom component and angular routing not working

file hierarchy:

enter image description here

I can access /test but it returns blank page.

test.component.html

<h1>Hello its working now </h1>
<p>test works!</p>

test.component.ts

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

app-routing.module.ts


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { TestComponent } from './test/test.component'; 

const routes: Routes = [
  { 
   path: 'test', 
   component: TestComponent 
  },


]; 

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents =[HomeComponent, TestComponent]

I'm beginner in angular

Upvotes: 0

Views: 633

Answers (1)

Mirza C
Mirza C

Reputation: 36

In your app-routing.module.ts everything seems ok. Now, You have to import that module in your app.module.ts

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TestComponent } from './test/test.component';

const routes: Routes = [
  { path: 'test', component: TestComponent },
];

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

So in app.module.ts you need to import AppRoutingModule. In imports: [] array simply add AppRoutingModule

app.module.ts 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

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

@NgModule({
  imports:      [ BrowserModule, FormsModule, AppRoutingModule ],
  declarations: [ AppComponent, TestComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Now you can use <router-outlet>. So when user navigate to '/test' below will render your TestComponent.

Note: if you are using grid-layout will take 1 column/row. It will be rendered with your TestComponent.

app.component.html

<h1> Working example </h1>
<a [routerLink]="['/test']" routerLinkActive="active"> Test </a>
<router-outlet></router-outlet>

Upvotes: 2

Related Questions