Angular: CommonModule issue with 6.3 when using moduleMetadata

Describe the bug

In 6.3.0-beta-4 with Angular v12, CommonModule is not loading correctly and causing errors like: NG0303: Can't bind to 'ngIf' since it isn't a known property of 'div'.

This works correctly on 6.2.9 with ng v11. I still need to check whether this works with 6.3 and ng v11.

To Reproduce

With Angular v12 installed.

ng new testsb cd into testsb npx sb@next init

In button.component.ts add a module

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

Still in button.component.ts, add an *ngIf to the ButtonComponent template

@Component({
  selector: 'storybook-button',
  template: `<button *ngIf="true"
...

Add the module to the story - button.stories.ts

export default {
  title: 'Example/Button',
  component: Button,
  decorators: [
    moduleMetadata({
      imports: [ButtonModule]
    })
  ],
  argTypes: {
    backgroundColor: {control: 'color'},
  },
} as Meta;

npm run storybook and view console.log

Additional info The reason I am using moduleMetadata in my scenario is because of this issue, #14026, which requires the addition of a module declaration to work around it

System System: OS: macOS 11.4 CPU: (12) x64 Intel® Core™ i7-9750H CPU @ 2.60GHz Binaries: Node: 14.15.5 - ~/.nvm/versions/node/v14.15.5/bin/node Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.5/bin/yarn npm: 6.14.11 - ~/.nvm/versions/node/v14.15.5/bin/npm Browsers: Chrome: 91.0.4472.77 Edge: 90.0.818.66 Firefox: 88.0.1 Safari: 14.1.1 npmPackages: @storybook/addon-actions: ^6.3.0-beta.4 => 6.3.0-beta.4 @storybook/addon-essentials: ^6.3.0-beta.4 => 6.3.0-beta.4 @storybook/addon-links: ^6.3.0-beta.4 => 6.3.0-beta.4 @storybook/angular: ^6.3.0-beta.4 => 6.3.0-beta.4 @storybook/builder-webpack5: ^6.3.0-beta.4 => 6.3.0-beta.4 @storybook/manager-webpack5: ^6.3.0-beta.4 => 6.3.0-beta.4

[dexster]

@ThibaudAV I don’t have the problem anymore. Check my last comment. Adding the create-ivy-entry-points option and then reinstalling node modules fixes it.

[dexster]

@shilman @ThibaudAV I left out a vital piece of information. I had also manually run ngcc --properties es2015 browser module main after the npm install to simulate an nx project as my real project uses nx. This issue only occurs after running this command.

This is what nx does after install "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main",

If we add this option --create-ivy-entry-points then the issue disappears. It also fixes issue #14026

I would suggest we ask the nx team to change the postinstall to: "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main --create-ivy-entry-points",

Anyone currently experiencing the issue can simply add this option manually, delete their node_modules dir and npm install