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:

Answer 1

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 :)

Answer 2

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

Answer 3

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