Angular 4 - Lazy Loading routes doesn't work

Question

I have tried to make the lazy load routing works, but I couldn't. I really appreciate if you can help me.

I have 3 modules PublicModule, AdminModule and AppModule

This is what I expect (for now with public module):

.../public => it should display the info inside public component

This is mi code in routing.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes} from '@angular/router';
import {IndexComponent} from './public/index/index.component';

const appRoutes: Routes = [
{
path: 'test',
component: IndexComponent,
data: { title: 'Index' }
},
{path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule'},
{path: 'public', loadChildren: 'app/public/public.module#PublicModule'}
];

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

This is my code in app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatToolbarModule, MatMenuModule, MatIconModule} from '@angular/material';
import {HttpModule} from '@angular/http';
import { IndexComponent } from './public/index/index.component';
import {RoutingModule} from './routing.module';


@NgModule({
declarations: [
  AppComponent,
  IndexComponent
],
imports: [
  BrowserModule,
  BrowserAnimationsModule,
  MatToolbarModule,
  MatMenuModule,
  MatIconModule,
  HttpModule,
  RoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

finally, my code in public.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PublicComponent } from './public.component';
import {RouterModule, Routes} from '@angular/router';

const appRoutes: Routes = [
{
path: '',
component: PublicComponent
}
]

@NgModule({
imports: [
CommonModule,
RouterModule.forChild(appRoutes)
],
declarations: []
})
export class PublicModule { }

If I go to:

http://127.0.0.1:4200/test => it works, it displays the information of index.component

http://127.0.0.1:4200/public => it redirects to http://127.0.0.1:4200

What am I doing wrong? It should display "public works!" as I expected.

Additional info: if I comment this line RouterModule.forChild(appRoutes) in public module, it goes to http://127.0.0.1:4200/public but it doesn't show "public works!", so I think something goes wrong with appRoutes.

Answer 1

I got found the issue, all the components used in the modules should be inside declaration setting.

So, declaration inside public.module.ts should be:

declarations: [PublicComponent]