Expose declarations property in NgModuleRef

This issue has been created since 2022-09-08.

Which @angular/* package(s) are relevant/related to the feature request?

core

Description

What we are trying to reach:
render component dynamically by importing the angular module file and pick the component type from the module declarations without the need to import the component directly.

We are using dynamic rendering for components in our app. Now as compileModuleAndAllComponentsSync is deprecated there is no angular way get a component type from an angular module file, which is needed to create a component dynamically using createComponent.

We are aware that we can directly import an angular component but this does not match our application architecture. Cause we are bundling the lazy module in each module in a file and with the direct import of a component we get a bundle component per file.

Now we have a work around to access the declarations property of an NgModule by accessing the emod property, but it is probably not the appropriate way to do that.

As Angular offers different ways to render components, it would be great to consider this scenario and offer a way to dynamically import components from module file.

Proposed solution

Angular should expose the declarations property in the NgModuleRef which is already loaded into emod property

Alternatives considered

accessing the emod property on the imported module to allow access to the module componets types

JoostK wrote this answer on 2022-09-08

This is unfortunately not possible due to how NgModule.declarations are optimized away in production builds, in order for unused components, directives and pipes to be tree-shaken from the bundle. This is an important size optimization and providing APIs to access this information would prevent Angular from using this optimization.

The recommended approach is to declare a static field on the NgModule class that is equal to declarations, if you depend on this information at runtime.

MehyarSawas wrote this answer on 2022-09-08

But I still can access the declarations through emod property. How this does not affect the optimization?

In this case we need to go through 80 modules and re-declare over 1000 components. At least more convenient alternative would be good.

JoostK wrote this answer on 2022-09-08

But I still can access the declarations through emod property. How this does not affect the optimization?

That means you're not targeting an optimized build; that property will be empty in production builds with optimizations enabled.

MehyarSawas wrote this answer on 2022-09-08

Yes, we are using custom optimization for the dynamic module rendering. But still this should be an option as long as it is possible customize angular build and the way components are rendered.

So the goal we are trying to reach is to use dynamic rendering but build production with only 1 file per module and not per component. Any suggestion?

JoostK wrote this answer on 2022-09-08

In this case we need to go through 80 modules and re-declare over 1000 components. At least more convenient alternative would be good.

You can reference a shared list of declarations:

const DECLARATIONS = [/* ... */];

@NgModule({
  declarations: DECLARATIONS,
})
export class MyModule {
  static Declarations = DECLARATIONS;
}
MehyarSawas wrote this answer on 2022-09-10

Thanks for your suggestion

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-10-04
Star Count 84139
Watcher Count 3064
Fork Count 22243
Issue Count 1206

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
为什么就白酒的基金显示不了,其他三个基金都显示了 11 2021-02-25 2022-08-01
基金搜索弹框,点击取消,或者右上角×,需要点击三次才能关闭 1 2021-03-30 2022-10-02
新版本 多界面 频繁点 可能会出现IDE死机 1 2021-03-10 2022-05-08
对于现在 UI和 UE, 看看大家有什么好的意见跟建议. 4 2020-11-04 2022-08-01
Questions - medaka_haploid_variant 1 2021-04-15 2022-09-17
Remove remained files when checked out 0 2022-01-17 2022-09-29
When you click on a tag on a page, it takes you to a search page that doesn't include that page. 3 2021-03-06 2022-08-13
Add canonical tag with custom domain for home page 1 2021-02-24 2022-09-27
Improve logging pre-panic 0 2022-02-19 2022-10-04
Transactions are not being reflected on GA dashboard 3 2022-01-06 2022-09-25
[BUG] Apps recompiling problem.... 1 2021-06-18 2022-09-19
Sengled outlet (E1C-NB7) reported cumulative power consumption incorrect 8 2022-06-01 2022-09-12
ios_l2_interfaces invalid literal for int() with base 10: 'dynamic' 0 2022-06-15 2022-08-23
No props for ClassName for react-date-picker__wrapper 0 2022-08-26 2022-09-11
Safari open 2 calendars native and custom 0 2022-08-09 2022-09-09
ForwardRefCascaderType类型没导出导致业务ts报错 2 2022-03-30 2022-10-04
SqlAlchemy error using docker-compose with latest commit 8 2021-09-19 2022-09-07
[Feature Request] Support unofficial flutter version 4 2021-04-02 2022-09-12
ACL Expiry 6 2016-04-17 2022-01-16
RR domain causes loss of precision 0 2022-02-05 2022-09-09
Do not hard-code Google Fonts 3 2022-03-28 2022-09-25
Do not suggest keyword completion on `self` 0 2022-01-25 2022-07-17
[Question] How to setup MQTT over SSL with ESP IDF 1 2022-06-02 2022-09-21
Cycling backwards through resolution options with right click 0 2021-10-12 2022-09-17
Vault's Master Password also for Lock Screen with Hotkey 0 2022-08-05 2022-09-17
use 'sz' to download video file can lost data. 0 2022-08-04 2022-09-17
Add hotkeys for mod for switching layout for all users. 0 2022-02-03 2022-09-17
Add report samples to security considerations 3 2021-02-25 2022-09-11
Add not-equals operator 2 2020-06-28 2022-08-22
install/helm test is failing 1 2022-04-01 2022-10-04
Shouldn't timeout or OOM when pipeline_dop or is parallel_fragment_exec_instance_num very large 1 2022-08-18 2022-08-19
When i "mkdir /dfs/buckets/newbucket", remote s3 will create many "newbucket-xxxx" buckets. 1 2021-12-05 2022-09-17
OpenGL status bar palette 3 2021-06-07 2022-07-08
disable allowVolumeExpansion by default in helm chart 5 2021-09-26 2022-10-04
Two-Fer exercise skips 2/3 tests with `xit` 2 2022-02-09 2022-09-26
Android Basics: create-dice-roller-app-with-button 2 2021-10-13 2022-09-14
ICE with instrument 3 2021-07-15 2022-01-09
Bookstack vs OneNote 1 2022-04-08 2022-09-29
Airlock - Add get reviews endpoint 1 2022-07-16 2022-09-29
[14.0] l10n_it_declaration_of_intent: dichiarazione di intenti in modelli vendita e acquisto 2 2022-01-21 2022-03-04
[Bug]: When using `next export`, cache not found 3 2022-02-03 2022-09-15
我的page页面不走initstate方法 0 2020-06-17 2022-09-24
Using Opaque types 2 2021-05-28 2022-01-22
search browser boxes "like" 4 2021-07-27 2022-09-27
Installation error (on multiple sites but specifically Colab this time) 7 2022-08-12 2022-10-04
Dependant Checks 2 2019-12-25 2022-01-20
doctest regression in Rust 1.59.0. doctest seems to be incorrectly triggered by 4 spaces inside comment. 4 2022-03-09 2022-09-26
Texture looks different on mobile browser 0 2021-09-06 2022-10-04
🐛[BUG]ProTable 不能用全选框取消当前页选中行,否则将所有页的选中行都清空 1 2022-07-01 2022-09-18
Go errors when updating Caddy to latest version: [FATAL] exit status 1 4 2021-09-28 2022-09-22