CODEWITHSUNDEEP
angularangular-routing
Abhishek
Abhishek

Reputation: 2034

Angular 06: ERROR in Cannot read property 'loadChildren' of null on compile

I just recently upgraded my project to Angular 6 and ran into this issue. ERROR in Cannot read property 'loadChildren' of null. This error occurs for the first time when I compile my project and when compiled again on updating other parts of the project, the error goes away.

I followed this, but to no success.

It was working properly earlier with Angular 5.

This is my RoutingModule:

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

import { adminRoutes } from '@ui/admin-module';
import { HomeComponent } from './home/home.component';
import { LayoutComponent } from './layout/layout.component';

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: '',
        component: LayoutComponent,
        children: [
          {path: '', redirectTo: 'home', pathMatch: 'full'},
          {path: 'home', component: HomeComponent},
          ...adminRoutes,
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {
}

The problem is with the adminRoutes which when I'm removing, the compilation error goes away.

Please help me understand what is causing the issue? Also, let me know if there are more details I need to provide. Thanks in advance.

EDIT: Providing the admin routes and module details.

Admin routes

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

import { LayoutComponent } from './core';
import { designationRoutes } from './modules/designations';
import { organizationRoutes } from './modules/organizations';
import { rolesRoutes } from './modules/roles';
import { templateRoutes } from './modules/templates';
import { userRoutes } from './modules/users';

export const adminModuleRoutes: Routes = [
  ...rolesRoutes,
  ...userRoutes,
  ...designationRoutes,
  ...organizationRoutes,
  ...templateRoutes
];

export const adminRoutes: Routes = [
  {
    path: 'admin',
    component: LayoutComponent,
    children: [
      { path: '', pathMatch: 'full', redirectTo: 'roles' },
        ...adminModuleRoutes
    ]
  }
];

Admin Module

export class AdminModule {
  static forRoot(configProvider: Provider[]): ModuleWithProviders {
    return {
      ngModule: AdminModule,
      providers: [
        ...configProvider
      ]
    };
  }
}

Upvotes: 2

Views: 4319

Answers (2)

Jeff Marino
Jeff Marino

Reputation: 1166

I know this is an old question but it seems the issue is using Routes instead of Route[]. I'm guessing the spread operator and the typescript "export declare type Routes = Route[];" don't play well together.

Upvotes: 0

ForestG
ForestG

Reputation: 18085

Gather all your routes: adminRoutes and then roleRoutes, userRoutes etc. and put them in the same file.

The problem is, that when building the routes, Angular seems not to follow multiple-layer links. That's my guess based on the question you mentioned as well.

Upvotes: 1

Related Questions