Question

在添加RouterModule之前，一切正常。

导致问题的模块

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ClientMenuComponent } from './client-menu/client-menu.component';
import { ClientMenuItemComponent } from './client-menu-item/client-menu-item.component';
import { RouterModule, Router, Routes } from '@angular/router';


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot([]) <---- Error: AoT compilation failed 
  ],
  declarations: [
    ClientMenuComponent,
    ClientMenuItemComponent,
  ],
  exports: [
    ClientMenuComponent,
    ClientMenuItemComponent
  ]
})
export class ClientMenuModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: ClientMenuModule,
            providers: []
        };
    }
    static forChild(): ModuleWithProviders  {
        return {
            ngModule: ClientMenuModule,
            providers: []
        };
    }
}

这是我得到的完整错误。

Error during template compile of 'ClientMenuModule'
Function calls are not supported in decorators but 'RouterModule' was called.

Error: AoT compilation failed

我使用的环境是

Angular CLI: 6.0.3
Node: 8.11.1
OS: darwin x64
Angular: 6.0.0

Answer 1

如果这是一个库或一个将被导入其他库/模块的模块，当你将.forRoot()函数传递给@NgModule时，你不应该调用它。

RouterModule声明并导出一些指令，例如router-outlet，routerLink，routerLinkActive等。此外，它提供了一些服务，例如Router，ActivatedRoute等。为了避免有多个服务实例，RouterModule定义了两个方法，“forRoot”和“forChild”。顾名思义，“forRoot”方法只能由root模块调用，即app.module，而forChild应该由其他功能模块调用。这样，您仍然可以使用此模块导出的指令，组件，管道，而不会获得新的服务实例。

虽然这不是专门解决问题的根源，但它可能会解决您的问题。（此issue可能有帮助）

Answer 2

拉出函数调用：

export const MyModule = RouterModule.forRoot([]);


@NgModule({
  imports: [
    CommonModule,
    MyModule   
  ],
  declarations: [
    ClientMenuComponent,
    ClientMenuItemComponent,
  ],
  exports: [
    ClientMenuComponent,
    ClientMenuItemComponent
  ]
})

创建一个以RouterModule作为依赖项的角度包

2 个答案: