Angular 13 has empty/defaulted CommonModule when importing CommonModule into dynamic modules

[bstaley]

Which @angular/* package(s) are the source of the bug?

common

Is this a regression?

Yes

Description

Goal: Update to angular 13, still create dynamic modules/components and have all imports work.

Outcome: After upgrading to Angular 13 I am still able to create dynamic modules and components but when I try to apply the common module as an import it has empty exports which leads to issues like.

core.mjs:10144 NG0303: Can't bind to 'ngIf' since it isn't a known property of 'div'.

I've debugged the issue and saw in ɵɵdefineNgModule all the module info(imports, declarations, exports) are all undefined and end up defaulted to empty arrays. I don't know enough about the inner workings to say if this is normal but when I was debugging the dynamic module I did notice that emod.exports was an empty array.

However, you will notice if I reexport things from the common module they start working.

Please provide a link to a minimal reproduction of the bug

https://github.com/bstaley/ng13-dynamic-common-import-fail

Please provide the exception or error you saw

core.mjs:10144 NG0303: Can't bind to '<Any Pipe Or Directive From Common Module>' since it isn't a known property of 'div'.

### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI: 13.2.6        
Node: 14.15.1
Package Manager: npm 6.14.8
OS: win32 x64

Angular: 13.2.7
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.6
@angular-devkit/build-angular   13.2.6
@angular-devkit/core            13.2.6
@angular-devkit/schematics      13.2.6
@angular/cli                    13.2.6
@schematics/angular             13.2.6
ng-packagr                      13.2.1
rxjs                            7.5.5
typescript                      4.5.5

Anything else?

• You will notice the example uses both a lib and an app. Normally the lib would be published as a separate package but I am able to reproduce the error the same with them together.
• In the example repo you will also notice that the lib has a component which is added to the dynamic template(other-lib). I add the module to the imports input. It is understood by the component and renders.
• It doesn't seem to matter if I try to import CommonModule into app.module or any other module for that matter.

[JoostK]

This import looks suspicious:

import { OtherModule } from 'projects/test-lib/src/lib/other/other.module';

This import uses an absolute module specifier, which makes the Angular compiler believe that this is a library. This also means that the same module specifier is used to reference the components within OtherModule, but the projects/test-lib/src/lib/other/other.module source file does not export those symbols. This is why libraries should have a public entry-point that re-exports all necessary symbols, and then you'd have to import through that entry-point.

[bstaley]

right but OtherModule is working fine. it's the CommonModule that is not working.

also i realize that this is not the proper way to use libs. this is just an example that shows the issue that I am having

[alxhub]

This is working as intended.

The Angular CLI doesn't support hybrid JIT+AOT applications. When you build an application using AOT compilation, the CLI configures optimizations that remove all of the declaration information from NgModules which is needed to support JIT.

Instead, you should disable AOT entirely and use JIT compilation not just for your dynamic components but for the entire application.

[bstaley]

Thanks @alxhub, for anyone looking for the config to make this work.. Simply go to your angular.json file and add "aot": false under build.configurations.<env>. Looks like true was the default since 9 but with 13 there must have been updates to improve the optimization and thus why I am seeing the issue after updating.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}