CODEWITHSUNDEEP
javascriptangularangular-cli
Alex Mougenet
Alex Mougenet

Reputation: 233

Unexpected results of ng build --aot : ERROR in : Unexpected directive 'TooltipComponent in

Launching ng build --aot results in

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.

It works great with a normal build (ng build), but it crashes as soon as I use AOT.

Am I doing something wrong with my AchievementComponentModule ?

ng version :

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 { }

Upvotes: 0

Views: 210

Answers (1)

Alex Mougenet
Alex Mougenet

Reputation: 233

Alright, I fixed it !

In my App.module.ts, I replaced the declaration of my components by importing their modules.

So now, my App.module.ts looks like this:

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

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

Same for every other components I was importing / declaring.

To avoid too much code duplication, I've created to file to pack it. For example, here is my 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 {}

So now the --prod (which does a --aot) and normal builds work !

Upvotes: 1

Related Questions