Неожиданные результаты ng build --aot: ОШИБКА в: Неожиданная директива 'TooltipComponent in - PullRequest
Новая
       14

Неожиданные результаты ng build --aot: ОШИБКА в: Неожиданная директива 'TooltipComponent in

0 голосов
/ 13 марта 2019

Запуск 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

достижений.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 { }

1 Ответ

1 голос
/ 19 марта 2019

Хорошо, я исправил это!

В своем App.module.ts я заменил объявление своих компонентов, импортировав их модули.

Итак, теперь мой App.module.ts выглядит так: 

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

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

То же самое для всех остальных компонентов, которые я импортировал / декларировал.

Чтобы избежать слишком большого дублирования кода, я создал файл для его упаковки. Например, вот мой материал.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) и обычные сборки работают!

...