Component imports must be standalone components, directives, pipes, or must be NgModules while importing an NgModule

Question

I'm trying to import an NgModule into a standalone component but the compiler is throwing the error NG2012 : Component imports must be standalone components, directives, pipes, or must be NgModules.

NgModule({
  declarations: [FooComponent],
  exports: [FooComponent],
});
export class FooModule {}

let comps = [ImageComponent, HighlightDirective];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FooModule],
  template: ``,
})
export class ExampleStandaloneComponent {}

Gable

Answer 1

I lost over 30 minutes, on this.

The NgModule is malformed : NgModule should have been @NgModule.

Gable

Answer 2

I ran into this error message while prototyping something and just quickly added a @Directive to the same file as my component:

// ❌ Component imports must be standalone components, 
// directives, pipes, or must be NgModules.(-992012)

@Directive({
  selector: '[myDirective]',
  standalone: true,
})
class MyDirective {
  ...
}

@Component({
  standalone: true,
  imports: [ MyDirective ],
})
export class MyComponent {
  ...
}

Exporting the directive class resolved the issue:

// ✅ Works without error!

@Directive({
  selector: '[myDirective]',
  standalone: true,
})
export class MyDirective { // <---- added "export"
  ...
}

@Component({
  standalone: true,
  imports: [ MyDirective ],
})
export class MyComponent {
  ...
}

Withal