Javascript “无法使用”中的角度2布线错误；在；操作员要搜索；供应商“；无效

我正在用Angular测试惰性路由器版本

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

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);

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

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

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

export default RouterModule.forRoot(routes);

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

我收到以下错误： 中出现错误，无法使用“in”运算符在null中搜索“providers”

My providers部分为空，因为我没有服务，只有导入数组中的路由部分

---

我正在使用angular 4和angular cli 1.0.0

加载子项语法不正确。它需要角度模块的名称。大概是这样的：

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

---

loadChildren

语法不正确。它需要角度模块的名称。大概是这样的：

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

---

此处描述了可能的原因：

首先，从代码（组件和其他位置）中删除

default

注释。

---

其次，

组件路由

和

批准

的定义在哪里？

这里描述了可能的原因：

首先，从代码（组件和其他位置）中删除

default

注释。

---

其次，

组件路由

和

批准

的定义在哪里？

下面的设置和文件给出了相同的错误，无论我如何更改以匹配当前提供的任何解决方案

当前设置

@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);

应用程序模块

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]

---

})无论我如何更改以匹配当前提供的任何解决方案，下面的设置和文件都会给我相同的错误

当前设置

@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);

应用程序模块

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]

---

})

对上述内容进行扩展，让每个人都非常清楚（因为这正是我的工作原理）：

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

1） 在导出类中：

export default class GridModule { };

export class GridModule { };

2） 导入模块的类：

import GridModule from './gridModule'

import { GridModule } from './gridModule'

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

1） 在导出类中：

export default class GridModule { };

export class GridModule { };

2） 导入模块的类：

import GridModule from './gridModule'

import { GridModule } from './gridModule'

---

对以上内容进行扩展，使每个人都非常清楚（因为这对我来说是有效的）：

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

1） 在导出类中：

export default class GridModule { };

export class GridModule { };

2） 导入模块的类：

import GridModule from './gridModule'

import { GridModule } from './gridModule'

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

1） 在导出类中：

export default class GridModule { };

export class GridModule { };

2） 导入模块的类：

import GridModule from './gridModule'

import { GridModule } from './gridModule'

---

---

您知道代码的哪一部分发出错误吗？这是一个没有代码的奇怪错误，它会导致错误。您知道代码的哪一部分发出错误吗？这是一个没有代码的奇怪错误，它会导致错误。您可以提供一个plunker来演示问题吗？然后我们可以更容易地进一步研究它。我也有这个问题。奇怪的是，一旦应用程序运行，在路由文件中进行保存将使问题消失。似乎第一个ng构建没有正确构建。然后重新编译以某种方式修复它。我注意到的一点是，bundle和chunk的构建顺序与第一次构建到后续构建的顺序不同。后续版本没有错误，而第一个版本没有解决PluralSight视频Deborah！你能提供一个演示问题的plunker吗？然后我们可以更容易地进一步研究它。我也有这个问题。奇怪的是，一旦应用程序运行，在路由文件中进行保存将使问题消失。似乎第一个ng构建没有正确构建。然后重新编译以某种方式修复它。我注意到的一点是，bundle和chunk的构建顺序与第一次构建到后续构建的顺序不同。后续版本没有错误，而第一个版本没有解决PluralSight视频Deborah！我可以看看AppModule的定义吗？在重定向路径中添加pathMatch:“full”，您不需要导出惰性模块中的组件，您可以就此提出一个新问题吗？添加AppModule，添加了pathMatch并从模块中删除了所有组件的导出。我可以查看AppModule的定义吗？在重定向路径中添加pathMatch:“full”，您不需要在惰性模块中导出组件，您可以为此打开一个新问题吗？添加AppModule，添加了pathMatch并从模块中删除了所有组件的导出。我已经删除了所有默认注释。批准和组件一张贴在上面，我已经删除了所有默认注释。批准和第一部分张贴在上面