Question

我正在将一个项目转换为使用angular cli，一切正常（一旦它构建）但我在构建过程中有一种奇怪的行为。

ng serve 我第一次尝试时总是得到这个错误：ERROR in无法读取属性'loadChildren'为null

带有ng build的

会抛出相同的错误

但如果我使用ng build --watch 并且在第一次构建失败后我编辑文件以再次触发构建它将成功。我对ng build -prod --watch

也有同样的行为

有关第一次如何正确构建构建的任何想法吗？

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

更新：使用子路由进行测试，我仍然可以获得相同的行为

更新：将@angular libs从4.0.0降级到2.4.0并且我仍然得到完全相同的行为，但是有不同的错误消息;

AppModule中的错误不是NgModule

Answer 1

我还遇到了与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 2

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

export const appRoutes = xRoutes.concat(zRoutes)等

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

Answer 3

就我而言，this answer解决了相关的Github问题，修复了我的错误。

万一它被删除，修复程序将对此进行更改：

export const ROUTES = MY_ROUTES.map(TO_ANGULAR_ROUTE)

对此：

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

Answer 4

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

构建

ng build --prod --aot

获取更详细的错误消息。

Answer 5

在投放我的应用程序后出现了这个问题，并通过按Ctrl + s解决了这个问题，该文件甚至没有处于编辑/未保存状态。现在它在没有警告的情况下编译。但是，让它第一次编译有点奇怪。

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

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

Answer 6

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

Answer 7

模拟，组件和RouteGuard

要检查的另一件事是你是否在路由声明中模拟/存在虚拟组件的任何类。对于模拟的RouteGuard来说似乎也会发生这种情况。

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

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

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

Answer 10

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

当不遵循路由名称camelCase命名标准时，会发生此问题。我为模块取了dsar-config的名称，当我将其更改为dsarConfig时，没有任何编译错误。

Answer 11

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

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

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

Answer 12

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

Answer 13

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

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

concat的每个部分都是Route []

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

Angular CLI ERROR in无法读取null

13 个答案:

模拟，组件和RouteGuard