Can't bind to 'ngStyle' since it isn't a known property of 'div' when CommonModule has been imported

Question

I have a component:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-menu',
  templateUrl: './my-menu.component.html'
})
export class MenuComponent {
  //some code here
}

I use that component in multiple modules, so that's why I have a SharedModule in which I export it:

import { NgModule } from '@angular/core';
import { MenuComponent } from './my-menu/my-menu.component';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
  declarations: [ MenuComponent ],
  exports: [ MenuComponent, CommonModule ],
})
export class SharedModule {}

And I use the SharedModule in multiple modules that are basically similar to this:

import { TestComponent } from './test.component';
import { Injector, DoBootstrap, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from '../shared/shared.module';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [TestComponent],
  imports: [BrowserModule, FormsModule, HttpClientModule, SharedModule, CommonModule],
  entryComponents: [TestComponent],
  providers: [],
  exports: []
})
export class TestModule implements DoBootstrap {
  constructor(private injector: Injector) { }

  ngDoBootstrap() {
    const ngElement = createCustomElement(TestComponent, { injector: this.injector, });
    customElements.get('my-test') || customElements.define('my-test', ngElement);
  }
}

However when I run the ng build command, I get the error: Can't bind to 'ngStyle' since it isn't a known property of 'div', which happens in file my-menu.component.html. This component has already been working correctly before I added the shared module. What am I doing wrong?

Answer 1

You need to export CommonModule from SharedModule.

import { NgModule } from '@angular/core';
import { MenuComponent } from './my-menu/my-menu.component';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
  declarations: [ MenuComponent ],
  exports: [ MenuComponent, CommonModule ], //add common module here
})
export class SharedModule {}

Answer 2

you do not import the CommonModule module.

import { CommonModule } from '@angular/common';