Question

启动ng build --aot会导致

ERROR in : Unexpected directive 'TooltipComponent in /project/src/app/components/tooltip/tooltip.component.ts' imported by the module 'AchievementComponentModule in /project/src/app/components/achievement/achievement.module.ts'. Please add a @NgModule annotation.

它与常规版本（ng build）一起使用时效果很好，但是一旦使用AOT，它就会崩溃。

我的AchievementComponentModule做错了吗？

ng版本：

Angular CLI: 7.3.1
Angular: 7.2.5

achievement.module.ts ：

import { NgModule } from '@angular/core'
import { TranslateModule } from '@ngx-translate/core'
import { AchievementComponent } from './achievement.component'
import { TooltipComponent } from '../tooltip/tooltip.component';

@NgModule({
  declarations: [
    AchievementComponent,
  ],
  imports: [
    TranslateModule,
    TooltipComponent
  ],
  providers: [],
  exports: [
    AchievementComponent
  ]
})
export class AchievementComponentModule {}

app.module.ts ：

import { TooltipComponent, AchievementComponent } from './components'

@NgModule({
  declarations: [
    ...
    TooltipComponent,
    AchievementComponent
  ],
  imports: [...],
  exports: [...],
  providers: [...],
  bootstrap: [...],
  entryComponents: [...]
})
export class AppModule { }

Answer 1

好的，我修复了！

在App.module.ts中，我通过导入组件的模块替换了声明。

现在，我的App.module.ts看起来像这样：

import { TooltipComponentModule, AchievementComponentModule } from './components'

@NgModule({
  declarations: [...],
  imports: [
    TooltipComponentModule,
    AchievementComponentModule
  ],
  exports: [...],
  providers: [...],
  bootstrap: [...],
  entryComponents: [...]
})
export class AppModule { }

与我要导入/声明的所有其他组件相同。

为了避免过多的代码重复，我创建了文件来打包。例如，这是我的material.module.ts：

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

import {
  MatButtonModule,
  MatIconModule,
  MatDialogModule,
  MatFormFieldModule,
  MatInputModule,
  MatChipsModule,
  MatSelectModule
} from '@angular/material';

const modules = [
  MatButtonModule,
  MatIconModule,
  MatDialogModule,
  MatFormFieldModule,
  MatInputModule,
  MatChipsModule,
  MatSelectModule,
  MatInputModule
]

@NgModule({
  imports: [... modules],
  exports: [... modules]
})
export class MaterialModule {}

所以现在--prod（执行--aot）和正常的构建工作都可以！

ng build --aot的意外结果：中的错误：意外的指令'TooltipComponent in

1 个答案: