Угловая 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 не помогло, но все равно получала ту же ошибку.