Angular: Cannot use module imported in app module in a component from a different module

Question

I have installed flex-layout https://github.com/angular/flex-layout/ version ^2.0.0-beta.9.

In my application, I imported and added FlexLayoutModule to the imports array in app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    LayoutModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    SharedModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

When I try to use the fxLayout directive in a component's template in another module, it doesn't have any effect.

However, when I add the FlexLayoutModule to this "other" module where the component is defined, it works fine.

Did I miss something?

Answer 1

add your new module to the ngModule declarations: This is an easy one to overlook and can be frustrating.