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 always get this error the first time I try: ERROR in Cannot read property 'loadChildren' of null

with ng build throws the same error

but if I use ng build --watch and after the first build fails and I edit a file to trigger the build again it will succeed. I've got also the same behaviour with ng build -prod --watch

Any ideas how to get the build right the first time?

please note that I do not have any child routes/modules in my project and I don't have any other output to see what is causing this.

Update: tested with child routes and I still get the same behaviour

Update: downgraded @angular libs to 2.4.0 from 4.0.0 and I still get the exact same behaviour, but with a different error message;

ERROR in AppModule is not an NgModule

Answer 1

I also ran into a similar issue with the Angular CLI v1.6.

In my case I was not using .concat() or any other kind of dynamic manipulation of the router definitions.

Rather I had a function in a data property of a route which was an anonymous arrow function. Changing this to a named exported function solved the issue for me.

Before:

 {
    path: ':id',
    component: ProductDetailComponent,
    data: {
        breadcrumb: (data: any, params: any) => {
            let id = params['id'];
            return id === 'create' ? 'New Product' : data.product.ShortDescription;
        }
    }
}

After:

{
    path: ':id',
    component: ProductDetailComponent,
    data: { breadcrumb: getBreadcrumb }
}

export function getBreadcrumb(data: any, params: any): string {
    let id = params['id'];
    return id === 'create' ? 'New Product' : data.product.ShortDescription;
}

Answer 2

In my case, this answer to a related Github issue fixed my error.

In case it gets deleted, the fix was changing this:

export const ROUTES = MY_ROUTES.map(TO_ANGULAR_ROUTE)

to this:

export const ROUTES = [];
ROUTES.push(...MY_ROUTES.map(TO_ANGULAR_ROUTE));

Answer 3

I got this error due to double comma in routing as below