Угловая CLI ERROR в Невозможно прочитать свойство 'loadChildren' null
Я конвертирую проект в использование углового cli, и все работает (после его сборки), но во время сборки у меня странное поведение.
с ng serve
Я всегда получаю эту ошибку при первой попытке: ERROR in Не удается прочитать свойство "loadChildren" null
с ng build
выдает ту же ошибку
но если я использую ng build --watch
и после того, как первая сборка завершится неудачно, и я отредактирую файл для запуска сборки снова, это будет успешным. У меня также такое же поведение с ng build -prod --watch
Любые идеи о том, как правильно построить сборку в первый раз?
обратите внимание, что у меня нет дочерних маршрутов/модулей в моем проекте, и у меня нет другого выхода, чтобы увидеть, что вызывает это.
Обновление: проверено с помощью дочерних маршрутов, и я все равно получаю такое же поведение
Обновление: понижено @angular libs до 2.4.0 с 4.0.0, и я все равно получаю то же самое поведение, но с другим сообщением об ошибке;
ОШИБКА в AppModule не является модулем Ng
Ответы
Ответ 1
У меня было несколько ts файлов для моих маршрутов, и что я сделал, это импортировать все эти маршруты в app.routes, а затем объединить их все вместе, чтобы вызвать forRoot:
export const appRoutes = xRoutes.concat(zRoutes)
т.д.
после того, как все мои маршруты были отправлены в один файл /export const, исчезло поведение ошибки /weird build.
Ответ 2
Я также столкнулся с аналогичной проблемой с Angular CLI v1.6.
В моем случае я не использовал .concat()
или любые другие виды динамических манипуляций с определениями маршрутизаторов.
Скорее, у меня была функция в свойстве данных маршрута, который был анонимной функцией стрелки. Изменение этого параметра на именованную экспортированную функцию решило проблему для меня.
До:
{
path: ':id',
component: ProductDetailComponent,
data: {
breadcrumb: (data: any, params: any) => {
let id = params['id'];
return id === 'create' ? 'New Product' : data.product.ShortDescription;
}
}
}
После:
{
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;
}
Ответ 3
Вероятно, это связано с некоторой синтаксической ошибкой в вашем проекте, сборка с помощью
ng build --prod --aot
Чтобы получить более подробное сообщение об ошибке.
Ответ 4
У меня была эта проблема после обслуживания моего приложения, и я решил ее, нажав Ctrl + s в файле, который даже не находился в отредактированном/несохраненном состоянии. Теперь он компилируется без предупреждения. Однако собрать его в первый раз было очень странно.
Хранение экземпляра объекта в переменной и установка этой переменной в качестве моего [lazyLoaded] маршрута data
были неприемлемы для компилятора TS/NG. Однако создание объекта непосредственно в свойстве route data
было приемлемым.
Я хорошо знаю, что ни одно из вышеперечисленного не имеет никакого интуитивного смысла, но я надеюсь, что это сэкономит кому-то время, которое может потребоваться, чтобы найти это самостоятельно.
Ответ 5
В моем случае этот ответ на связанную проблему Github устранил мою ошибку.
В случае, если он был удален, исправление изменилось следующим образом:
export const ROUTES = MY_ROUTES.map(TO_ANGULAR_ROUTE)
на это:
export const ROUTES = [];
ROUTES.push(...MY_ROUTES.map(TO_ANGULAR_ROUTE));
Ответ 6
Mocks, Components и RouteGuards
Еще одна вещь, которую нужно проверить, - это то, что вы издеваетесь/накладываете классы на фиктивные компоненты в декларации маршрута. Кажется, это может случиться и для насмешек RouteGuards.
Ответ 7
Для полноты: я столкнулся с этой проблемой при создании маршрутов из списка связанных объектов:
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 }
};
}
Мне пришлось export
использовать функцию, которую я использовал в map()
.
Ответ 8
Я боролся с той же проблемой после удаления компонента. В моем файле app-rout.ts еще оставалось несколько маршрутов к этому удаленному компоненту. Это вызвало ошибку.
Ответ 9
в моем случае я столкнулся с этим при попытке объединить один массив маршрутов в другой:
export const businesslogicState: Routes = BUSINESSLOGIC_ROUTES.concat(gamesRoutes);
каждая часть concat была Route []
Изменение массива gamesRoutes с одним элементом на сам объект Route не помогло, но все равно получала ту же ошибку.