Angular 4. Routing with child modules

Question

I have the following files:

• app.module.ts
• app-routing.module.ts
• projects.module.ts
• projects-routing.module.ts

Projects module is a child module of the app module. I am including routes of the projects module in the app module and getting the following error during build:

ERROR in Could not resolve "projects" from "...app-routing.module.ts".

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BreadcrumbModule } from 'angular-crumbs';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { ProjectsModule } from './projects/projects.module';
import { ProjectModule } from './project/project.module';

import { AppRoutingModule } from './app-routing.module';

import { ResizeDirective } from './resize.directive';

@NgModule({
  imports: [
    BrowserModule,
    BreadcrumbModule,
    NgbModule.forRoot(),
    HttpModule,
    ProjectsModule,
    ProjectModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    HeaderComponent,
    MainComponent,
    PageNotFoundComponent,
    ResizeDirective,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { ProjectsComponent } from './projects/projects.component';
import { ProjectComponent } from './project/project.component';

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
  {
    path: 'projects',
    component: ProjectsComponent,
    loadChildren: 'projects#ProjectsModule'
  },
  {
    path: 'project',
    component: ProjectComponent,
    loadChildren: 'project#ProjectModule'
  },
  {
    path: '',
    redirectTo: '/projects/overview',
    pathMatch: 'full'
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

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

projects.module.ts

import { NgModule } from '@angular/core';

import { projectsRoutingModule } from './projects-routing.module';

import { OverviewComponent } from './overview/overview.component';
import { BusinessProfilesComponent } from './business-profiles/business-profiles.component';
import { PayoutsComponent } from './payouts/payouts.component';
import { ReportsComponent } from './reports/reports.component';
import { AsideComponent } from './aside/aside.component';

@NgModule({
  imports: [
    projectsRoutingModule
  ],
  declarations: [
    OverviewComponent,
    BusinessProfilesComponent,
    PayoutsComponent,
    ReportsComponent,
    AsideComponent
  ]
})
export class ProjectsModule {}

projects-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { OverviewComponent } from './overview/overview.component';
import { BusinessProfilesComponent } from './business-profiles/business-profiles.component';
import { PayoutsComponent } from './payouts/payouts.component';
import { ReportsComponent } from './reports/reports.component';

const projectsRoutes: Routes = [
  {
    path: 'overview',
    component: OverviewComponent,
    data: {
      breadcrumb: 'Projects Overview'
    }
  },
  {
    path: 'business-profiles',
    component: BusinessProfilesComponent,
    data: {
      breadcrumb: 'Business Profiles'
    }
  },
  {
    path: 'reports',
    component: ReportsComponent,
    data: {
      breadcrumb: 'Reports'
    }
  },
  {
    path: 'payouts',
    component: PayoutsComponent,
    data: {
      breadcrumb: 'Payouts'
    }
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(projectsRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class projectsRoutingModule {}

Answer 1

In loadChildren you have to specify the file (without file extension) and Module, separated by #. Also you don't need the component when using loadChildren so the module will be lazily loaded (not loaded on initial page load, only when the selected route is accessed, or PreloadAllModules is used).

In your case: app-routing.module.ts

From

...
{
    path: 'projects',
    component: ProjectsComponent,
    loadChildren: 'projects#ProjectsModule'
},
...

to

...
{
    path: 'projects',
    loadChildren: './projects.module#ProjectsModule' // relative to app-routing.module.ts
},
...

projects-routing.module.ts

From

...
const projectsRoutes: Routes = [
  {
    path: 'overview',
    component: OverviewComponent,
    data: {
      breadcrumb: 'Projects Overview'
    }
  },
...

to

...
const projectsRoutes: Routes = [
  {
    path: '',
    component: ProjectsComponent
  },
  {
    path: 'overview',
    component: OverviewComponent,
    data: {
      breadcrumb: 'Projects Overview'
    }
  },
...

And you can remove imports of other Project components from AppModule so it will only be loaded when accessing routes of ProjectsModule.

I hope this will help, please reply if there is something wrong.