Angular 4 basic routing

Question

I'm trying to show different htmls for different urls. When user types basic url he should see maincomponent.html, when application recognizes there is additional /admin subpath it should show admin.html. Both are modules. As far as I know, Routes makes it possible. How can I achieve that?

app.module.ts:

 import { AppComponent } from './app.component'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {Routes, RouterModule} from "@angular/router"; import { AdminModule } from './Admin/admin.module'; import { MainpageModule } from './Mainpage/mainpage.module'; const appRoutes: Routes = [ {path: 'admin', component: AdminModule}, {path: '', component: MainpageModule} ]; @NgModule({ declarations: [ AppComponent ], imports: [ MainpageModule, AdminModule, BrowserModule, RouterModule.forRoot( appRoutes, {enableTracing: true} ) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

mainpage.module.ts

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {MainpageComponent} from './mainpage.component' import { HeaderComponent } from './Header/header.component'; import { FooterComponent } from './Footer/footer.component'; import { SidebarComponent } from './Sidebar/sidebar.component'; import { BottompanelComponent } from './Bottompanel/bottompanel.component' import { CarouselComponent } from './Carousel/carousel.component' @NgModule({ declarations: [ MainpageComponent, HeaderComponent, FooterComponent, SidebarComponent, BottompanelComponent, CarouselComponent ], imports: [CommonModule], entryComponents: [MainpageComponent], exports: [MainpageComponent], providers: [], bootstrap: [] }) export class MainpageModule {}

admin.module.ts:

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {AdminComponent} from './admin.component' @NgModule({ declarations: [ AdminComponent, ], imports: [CommonModule], exports: [AdminComponent], providers: [], bootstrap: [] }) export class AdminModule {}

However it doesn't works, I can't see anything, just blank site. This is my log output:

Router Event: NavigationStart platform-browser.js:367 NavigationStart(id: 1, url: '/') platform-browser.js:367 NavigationStart {id: 1, url: "/"} core.js:3687 Angular is running in the development mode. Call enableProdMode() to enable the production mode. platform-browser.js:380 Router Event: RoutesRecognized platform-browser.js:367 RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } ) platform-browser.js:367 RoutesRecognized {id: 1, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot} platform-browser.js:380 Router Event: GuardsCheckStart platform-browser.js:367 GuardsCheckStart(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } ) platform-browser.js:367 GuardsCheckStart {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot} platform-browser.js:380 Router Event: ChildActivationStart platform-browser.js:367 ChildActivationStart(path: '') platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot} platform-browser.js:380 Router Event: ActivationStart platform-browser.js:367 ActivationStart(path: '') platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot} platform-browser.js:380 Router Event: GuardsCheckEnd platform-browser.js:367 GuardsCheckEnd(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } , shouldActivate: true) platform-browser.js:367 GuardsCheckEnd {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true} platform-browser.js:380 Router Event: ResolveStart platform-browser.js:367 ResolveStart(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } ) platform-browser.js:367 ResolveStart {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot} platform-browser.js:380 Router Event: ResolveEnd platform-browser.js:367 ResolveEnd(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } ) platform-browser.js:367 ResolveEnd {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot} platform-browser.js:380 Router Event: ActivationEnd platform-browser.js:367 ActivationEnd(path: '') platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot} platform-browser.js:380 Router Event: ChildActivationEnd platform-browser.js:367 ChildActivationEnd(path: '') platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot} platform-browser.js:380 Router Event: NavigationEnd platform-browser.js:367 NavigationEnd(id: 1, url: '/', urlAfterRedirects: '/') platform-browser.js:367 NavigationEnd {id: 1, url: "/", urlAfterRedirects: "/"}

EDIT: according to answers I edited app.module.ts and added <router-outlet></router-outlet> to app.component.html.

app.module.ts:

import { AppComponent } from './app.component'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {Routes, RouterModule} from "@angular/router"; import { AdminComponent } from './Admin/admin.component'; import { MainpageComponent } from './Mainpage/mainpage.component'; const appRoutes: Routes = [ {path: 'admin', component: AdminComponent}, {path: '', component: MainpageComponent} ]; @NgModule({ declarations: [ MainpageComponent, AdminComponent, AppComponent ], imports: [ BrowserModule, RouterModule.forRoot( appRoutes, {enableTracing: true} ) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Now i see these errors:

compiler.js:485 Uncaught Error: Template parse errors: 'app-header' is not a known element: 1. If 'app-header' is an Angular component, then verify that it is part of this module. 2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-header></app-header> <div class="container"> <div class="row"> "): ng:///AppModule/MainpageComponent.html@0:0 'app-sidebar' is not a known element: 1. If 'app-sidebar' is an Angular component, then verify that it is part of this module. 2. If 'app-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <div class="row"> <div class="col-lg-3"> [ERROR ->]<app-sidebar></app-sidebar> </div> <div class="col-lg-9"> "): ng:///AppModule/MainpageComponent.html@4:10 'app-carousel' is not a known element: 1. If 'app-carousel' is an Angular component, then verify that it is part of this module. 2. If 'app-carousel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </div> <div class="col-lg-9"> [ERROR ->]<app-carousel></app-carousel> <app-bottompanel></app-bottompanel> </div> "): ng:///AppModule/MainpageComponent.html@7:8 'app-bottompanel' is not a known element: 1. If 'app-bottompanel' is an Angular component, then verify that it is part of this module. 2. If 'app-bottompanel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <div class="col-lg-9"> <app-carousel></app-carousel> [ERROR ->]<app-bottompanel></app-bottompanel> </div> </div> "): ng:///AppModule/MainpageComponent.html@8:8 'app-footer' is not a known element: 1. If 'app-footer' is an Angular component, then verify that it is part of this module. 2. If 'app-footer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </div> </div> [ERROR ->]<app-footer></app-footer> "): ng:///AppModule/MainpageComponent.html@12:0 at syntaxError (compiler.js:485) at TemplateParser.parse (compiler.js:24668) at JitCompiler._parseTemplate (compiler.js:34621) at JitCompiler._compileTemplate (compiler.js:34596) at eval (compiler.js:34497) at Set.forEach (<anonymous>) at JitCompiler._compileComponents (compiler.js:34497) at eval (compiler.js:34367) at Object.then (compiler.js:474) at JitCompiler._compileModuleAndComponents (compiler.js:34366)

This is how my structure looks like:

It wont work because your component property in your routes is a module and should be a component! — Ric
– Ric, Commented Apr 12, 2018 at 10:20

Tomasz Kula · Accepted Answer · 2018-04-12 10:19:50Z

Unless you are doing lazy loading, your routes definition must point to components, not modules.

const appRoutes: Routes = [ {path: 'admin', component: AdminComponent}, {path: '', component: MainpageComponent } ];

Also make sure that you have <router-outlet></router-outlet> in you app.component.html

M.M.J · Accepted Answer · 2018-04-12 10:59:26Z

read about routing in google guide it has beautiful, full things you need to know first: https://angular.io/guide/router

minizibi · Accepted Answer · 2018-04-12 12:28:32Z

Ok I found a solution. The problem was I did not declared components in app.module.ts, also in submodules we can remove that declarations. Finally it should look that:

app.module.ts:

import { AppComponent } from './app.component'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { Routes, RouterModule } from "@angular/router"; import { AdminComponent } from './Admin/admin.component'; import { MainpageComponent } from './Mainpage/mainpage.component'; import { HeaderComponent } from './mainpage/header/header.component' import { FooterComponent } from './mainpage/footer/footer.component'; import { SidebarComponent } from './mainpage/sidebar/sidebar.component'; import { BottompanelComponent } from './mainpage/bottompanel/bottompanel.component' import { CarouselComponent } from './mainpage/carousel/carousel.component' const appRoutes: Routes = [ { path: 'admin', component: AdminComponent }, { path: 'home', component: MainpageComponent }, { path: '', redirectTo: '/home', pathMatch: 'full' } ]; @NgModule({ declarations: [ MainpageComponent, HeaderComponent, FooterComponent, SidebarComponent, BottompanelComponent, CarouselComponent, AdminComponent, AppComponent ], imports: [ BrowserModule, RouterModule.forRoot( appRoutes, { enableTracing: true } ) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

mainpage.module.ts:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {MainpageComponent} from './mainpage.component' @NgModule({ declarations: [ MainpageComponent ], imports: [BrowserModule], exports: [MainpageComponent], providers: [], bootstrap: [] }) export class MainpageModule {}

admin.module.ts:

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {AdminComponent} from './admin.component' @NgModule({ declarations: [ AdminComponent, ], imports: [CommonModule], exports: [AdminComponent], providers: [], bootstrap: [] }) export class AdminModule {}

Thanks for your help guys :)

Collectives™ on Stack Overflow

Angular 4 basic routing

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related