Angular CLI ERROR in Cannot read property 'loadChildren' of null

Question

I\'m converting a project to use angular cli and everything is working (once it\'s build) but i\'ve got a weird behaviour during build.

with ng serve I

Answer 1

For completeness: I ran into this issue when creating routes from a list of related objects:

import { NgModule } from '@angular/core';
import { RouterModule, Route } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { EXAMPLES, Example } from './examples-list';

const routes = [
  ...EXAMPLES.map(toRoute), // this line produced the error
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: '**', redirectTo: '/dashboard', pathMatch: 'full' }
];

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

// `export`ing this function fixed the error
export function toRoute(ex: Example): Route {
  return {
    path: ex.path,
    component: ex.component,
    data: { title: ex.title }
  };
}

I had to export the function I was using in map().

Answer 2

This is likely due to some syntax error in your project, build with

ng build --prod --aot

To get a more detailed error message.

Answer 3

I had the same error, but my requirement was to have all the routes in a separate file. I solved it by simply exporting my Routes[] like this:

export const routes: Routes = [
 // ... all my route objects
];

Answer 4

I had this issue after serving my app and resolved it by pressing Ctrl+s in a file that was not even in an edited/unsaved state. Now it compiles without the warning. However, to get it to compile the first time was something very odd.

Storing an object instance in a variable and setting that variable as my [lazyLoaded] route's data was unacceptable to the TS/NG compiler. However, instantiating the object directly on the route's data property was acceptable.

I'm well aware that none of the above makes any intuitive sense, whatsoever, but I hope this saves somebody the time it could take to find this on your own.

Answer 5

I had multiple ts files for my routes and what I did was import all those routes in my app.routes and then concat them all together to call forRoot:

export const appRoutes = xRoutes.concat(zRoutes) etc

after putting all my routes in one single file/export const statement the error/weird build behaviour disappeared.