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不能使用＆＃34; in＆＃34;运营商搜索＆＃34;提供商＆＃34;在null。

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

我正在使用角度4和角度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注释（componens和其他地方）。其次，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]

}）

Angular 2 Routing ERROR in in not not use＆＃34; in＆＃34;运营商搜索＆＃34;提供商＆＃34;在null

4 个答案: