无法读取 null 的属性“loadChildren”中的 Angular CLI 错误

Question

我正在将一个项目转换为使用 Angular cli，并且一切正常（一旦构建），但我在构建过程中出现了奇怪的行为。

ng serve 我第一次尝试时总是收到此错误：ERROR in Cannot read property 'loadChildren' of null

ng build 会抛出同样的错误

但如果我使用ng build --watch 在第一次构建失败并且我编辑一个文件以再次触发构建之后，它将成功。我对ng build -prod --watch也有同样的行为@

任何想法如何在第一次就正确构建？

请注意，我的项目中没有任何子路由/模块，也没有任何其他输出来查看导致此问题的原因。

更新：用子路由测试，我仍然得到相同的行为

更新：将 @angular 库从 4.0.0 降级到 2.4.0，我仍然得到完全相同的行为，但错误消息不同；

AppModule 中的错误不是 NgModule

Answer 1

无法加载 app.module 中的 Angular CLI 错误 当内部路由文件中有一些语法错误时会出现此问题。 所以请检查路由数组中的语法

Answer 2

在我的情况下，这是因为相同的路由路径添加了两次以加载两个不同的组件，如下所示

{
   path: '', redirectTo: 'pageone', pathMatch: 'full'
},
{
   path: 'pageone',
   component: PageOneComponent
},
{
   path: '',
   children: [
  ...['PageTwoPartOne', 'PageTwoPartTwo', 'PageTwoPartOneQuickReference'].map(path => ({
      path,
      component: PageTwoComponent
    }))
   ]
},

更正路径之一（路径：''）后，它对我有用。

Answer 3

由于以下路由中的双逗号，我收到此错误

Answer 4

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

当路由名称不遵循驼峰命名标准时会出现此问题。我将 dsar-config 命名为模块，当我将其更改为 dsarConfig 时，我没有收到任何编译错误。

Answer 5

我遇到了同样的错误，但我的要求是将所有路由放在一个单独的文件中。我通过简单地像这样导出我的 Routes[] 来解决它：

export const routes: Routes = [
 // ... all my route objects
];

Answer 6

在我的情况下，我在尝试将一个路由数组连接到另一个时遇到了它：

export const businesslogicState: Routes = BUSINESSLOGIC_ROUTES.concat(gamesRoutes);

concat 的每个部分都是Route[]

将一个元素数组 gamesRoutes 更改为 Route 对象本身没有帮助，仍然出现相同的错误。

Answer 7

在我的情况下，this answer 到一个相关的 Github 问题修复了我的错误。

如果它被删除，修复会改变这一点：

export const ROUTES = MY_ROUTES.map(TO_ANGULAR_ROUTE)

对此：

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

Answer 8

为了完整性：我在从相关对象列表创建路由时遇到了这个问题：

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() 中使用的函数。

Answer 9

我在为我的应用程序提供服务后遇到了这个问题，并通过在一个甚至没有处于编辑/未保存状态的文件中按 Ctrl+s 解决了这个问题。现在它编译没有警告。然而，第一次编译是一件很奇怪的事情。

将对象实例存储在变量中并将该变量设置为我的 [lazyLoaded] 路由的 data 对 TS/NG 编译器来说是不可接受的。但是，直接在路由的 data 属性上实例化对象是可以接受的。

我很清楚以上所有内容都没有任何直观意义，但我希望这可以节省您自己找到此内容的时间。

Answer 10

这可能是由于您的项目中存在一些语法错误，请使用

构建

ng build --prod --aot

获取更详细的错误消息。

Answer 11

Mocks、组件和 RouteGuards

要检查的另一件事是，您是否在路由声明中为虚拟组件模拟/存根任何类。模拟的 RouteGuard 似乎也可能发生这种情况。

Answer 12

我在使用 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;
}

Answer 13

我的路由有多个 ts 文件，我所做的是在我的 app.routes 中导入所有这些路由，然后将它们全部连接在一起以调用 forRoot：

export const appRoutes = xRoutes.concat(zRoutes) 等

将我的所有路由放在一个文件/导出 const 语句中后，错误/奇怪的构建行为消失了。