Angular 2 Routing ERROR in Cannot use "in" operator to search "providers" in null

Question

我正在使用 Angular 测试 Lazy Router 版本。

我为每个组件实现了以下部分：

in componentone.component.ts   
@Component({...})
export class ComponentOne ...

in componentone.module.ts
@NgModule({..., imports: [componentOneRoutes]})
export default class ComponentOneModule

in componentone.routes.ts
const routes = [ {path: '', component: ComponentOne} ]
export default RouterModule.forChild(routes);

在我的 appcomponent.ts 中

@Component({})
export class AppComponent {
   // for displaying the content in url in the app.component.html
   navs = [ {url: '', content: 'Component 1'},... ]
}

在 app.routes.ts 中

const routes = [ {path: "", loadChildren: 
"app/componentone/componentone.module"} ]

export default RouterModule.forRoot(routes);

然后在 app.module.ts 中导入 app.routes.ts

@NgModule({imports:[appRoutes,...]})

我收到以下错误： ERROR in Cannot use "in" operator to search "providers" in null.

我的提供者部分是空的，因为我没有服务，只有导入数组中的路由部分。

我正在使用 angular 4 和 angular-cli 1.0.0

Answer 1

loadChildren 语法不正确。它需要 Angular 模块的名称。像这样的：

 loadChildren: 'app/products/product.module#ProductModule'

Answer 2

扩展上述内容，以便每个人都清楚（因为这对我有用）：

更改所有默认导出，例如：

1) 在导出类中：

export default class GridModule { };

2) 导入模块的类：

import GridModule from './gridModule'

将这些默认导出更改为导出，例如：

1) 在导出类中：

export class GridModule { };

2) 导入模块的类：

import { GridModule } from './gridModule'

Answer 3

这里描述了一个可能的原因：https://github.com/angular/angular-cli/issues/3826

首先，从您的代码（组件和其他地方）中删除 default 注释。 二、componentOneRoutes和appRoutes的定义在哪里？

Answer 4

无论我进行什么更改以匹配当前提供的任何解决方案，以下设置和文件都会给我同样的错误。

当前设置

@angular/cli: 1.1.0
node: 6.9.1
os: darwin x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.0
@angular/compiler-cli: 4.1.3

帐户模块 - 延迟加载

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ACCOUNT_COMPONENTS } from './components/index';
import { ACCOUNT_CONTAINER } from './containers/index';
import { routes } from './account.routes';


@NgModule({
  imports: [
  routes,
  CommonModule,
],
exports: [
  ...ACCOUNT_CONTAINER,
  ...ACCOUNT_COMPONENTS
],
declarations: [
  ...ACCOUNT_CONTAINER,
  ...ACCOUNT_COMPONENTS
],
 providers: [],
})
export class AccountModule { }

帐户路由

import { Route, RouterModule } from '@angular/router';
import { AccountComponent } from     './containers/account/account.component';

const accountRoutes: Route[] = [
  { path: '',
    component: AccountComponent
  }
];

export const routes =  RouterModule.forChild(accountRoutes);

主路由文件

import { AccountComponent } from   './account/containers/account/account.component';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        loadChildren: 'app/home/home.module#HomeModule',
      },
      {
        path: 'accounts',
        loadChildren: 'app/account/account.module#AccountModule',
      },
    ]
  },
  { path: '404-page', loadChildren: 'app/404-page/404-   page.module#PageNotFoundModule' },
  { path: '**', redirectTo: '404-page' }

];

export const routes: ModuleWithProviders = RouterModule.forRoot(appRoutes);

APP模块

import { LayoutModule } from './layout/layout.module';
import { RunbookEffects } from './core/effects/runbook.effects';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Angular2TokenService } from 'angular2-token';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-    browser/animations';
import { routes } from './app.routes';


import { APP_SERVICES } from './core/services';
import { reducer } from './core/store/reducers';
import { StoreModule } from '@ngrx/store';
import { UserEffects } from './core/effects/user.effects';
import { AccountEffects } from './core/effects/account.effects';
import { ProjectEffects } from './core/effects/project.effects';



@NgModule({
  declarations: [
    AppComponent
   ],
  imports: [
    routes,
    MaterialModule,
    LayoutModule,
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    HttpModule,

   StoreModule.provideStore(reducer),
   StoreDevtoolsModule.instrumentOnlyWithExtension({
     maxAge: 5
   }),

    EffectsModule.run(UserEffects),
    EffectsModule.run(AccountEffects),
    EffectsModule.run(ProjectEffects),
    EffectsModule.run(RunbookEffects)
  ],
  providers: [
    Angular2TokenService,
    APP_SERVICES
  ],
  exports: [
  ],
 bootstrap: [AppComponent]

})