Angular 4 - lazy loading - module routing doesn't work as well

Question

My problem is that, the child router doesn't work. The app module load the DashboardModule ( and the header will be display-ed as well ). The problem beginning here. The router link in the header doesn't want to load other components. What I want ? The router link display the "sub" component between the router-outlet. Thanks for help.

app-routing.module.ts

import { NgModule } from '@angular/core';
    import { Routes, RouterModule, ExtraOptions } from '@angular/router';
    import { LoginComponent } from './pages/login/login.component';
    import { ModuleWithProviders } from '@angular/core';

    export const routes: Routes = [
        {
            path: '',
            pathMatch: 'full',
            component: LoginComponent
        },
        {
            path: 'login',
            component: LoginComponent
        },
        {
            path: 'dashboard',
            pathMatch: 'full',
            loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule'
            //canLoad: [AuthGuard]
        },
    ];

    const config: ExtraOptions = {
      useHash: true,
    };

    export const AppRoutingModule: ModuleWithProviders =RouterModule.forRoot(routes);

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule }     from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';
import { LoginComponent } from './pages/login/login.component';
import { RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { HttpModule } from '@angular/http';

import { CommonModule } from "@angular/common";

const rootRouting: ModuleWithProviders = RouterModule.forRoot([], { useHash: true });

@NgModule({
  imports:      [ BrowserModule,
                  FormsModule,
                  AppRoutingModule,
                  CommonModule,

                  FormsModule, 
                  HttpModule ],

  declarations: [ AppComponent,
                  LoginComponent ],
  providers: [

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

app.component.ts

<router-outlet> </router-outlet>

dashboard.module.ts

import { NgModule } from '@angular/core';
import { HeaderComponent } from "./header/header.component";
import { DashboardComponent } from './dashboard.component';
import { DashboardRoutingModule } from './dashboard-routing.module';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { CommonModule } from '@angular/common';
import { AlldocumentsComponent } from '../main-functions/all-documents/alldocuments.component';
import { ContentComponent } from "./content/content.component";

@NgModule({
  imports: [
    DashboardRoutingModule,
    FormsModule,
    HttpModule,
    CommonModule
  ],
  declarations: [
    DashboardComponent,
    HeaderComponent,
    AlldocumentsComponent,
    ContentComponent

  ],
  bootstrap:    [ DashboardComponent]
})
export class DashboardModule {
}

dashboard-routing.module.ts

import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { ModuleWithProviders } from '@angular/core';
import { DashboardComponent } from './dashboard.component';
import { HeaderComponent } from './header/header.component';
import { ContentComponent } from './content/content.component';
import { AlldocumentsComponent } from '../main-functions/all-documents/alldocuments.component';

const routes: Routes = [
  {
  path: '',
  component: DashboardComponent,
  pathMatch: 'full',
    },
{
      path: '',
      component:HeaderComponent,
      children: [

      ]  
    },

];


export const DashboardRoutingModule: ModuleWithProviders = RouterModule.forChild(routes)

dashboard.component.html

<router-outlet> </router-outlet>

header.component.html

<li routerLinkActive="active"><a [routerLink]="['alldocuments']">MINDEN DOKUMENTUM</a></li>

Answer 1

you try to load the two component with the same route... in fact if you get only the header component it's because it's the last one in your routing config.

you should create an englobing component that will display your two compotant and route it to the '' path.

dashboard-rooting.module:

const routes: Routes = [
  {
    path: '',
    component: FullComponent,
    pathMatch: 'full',
  },
];

FullComponent.html

<your-header-css-balise></your-header-css-balise>
<your-dashboard-css-balise></your-dashboard-css-balise>

if you want to display other componant in this template depending of your childroute, replace <your-dashboard-css-balise></your-dashboard-css-balise> by <router-outlet></router-outlet> and configure them in your dashboard-rooting.module 's childroute metadata.

i hope i were clear, have a nice day