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