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

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;
}

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));

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

ng build --prod --aot

To get a more detailed error message.


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

enter image description here