Discovering and loading NgModule at runtime.

Feature Request

Current behavior

It is not possible to load dynamicall NgModules that have not been compiled at the same time of the whole application.
Angular-cli and webpack currently requier all code and modules used by the application in order to best optimize the production files. It does split the application into chunks corresponding to dynamic NgModules, but chunks are closely linked together.

Expected behavior

There should be an Option in angular-cli/webpack that allow independancy and reuse of chunks it generates even though final result is less optimal regarding code size and optimization.

I believe, Dynamic Loading of NgModule has been designed with this idea in mind since it doesn't requier NgModules to be statically imported in the router. This idea seem to have been lost in the race for perfect optimization (which is great by the way).

What is the motivation / use case for changing the behavior?

Actual trend is to do MicroService that encapsulate complete buisness behaviour and interface. This allows to developp and upgrade part of large application without the need to re-compile and redeploy the wole lot. Angular should take this into account and allow NgModules exposed in different micro-serviceto be discovered and loader at run time.

Possibly relates to #15510

This seems to me like a feature request for angular-cli.

you are right.
I'm moving it to angular/angular-cli#7405

@robwormald

This is not CLI specific, and unfortunately there's nothing we will do. The CLI does not support building libraries or individual application parts (like "just" a NgModule).

I'll talk to @robwormald who's worked with similar setup in the past and we will answer this in the Angular repo (or elsewhere if it doesn't fit in either). Leaving this open in the meantime to keep the discussion around.

Any updates on this? This is a common scenario for Enterprise, and we're currently stuck on this as well. We would like to migrate from AngularJS, but this seems to be a show stopper.

@bmbell

@bmbell ... if you use original Angular libs (UMDs) ... you can share them (even using advantages of a browser cache) ... and you can compile NgModules independently just via ngc compiler (then using any bundler as you want) and load them programmatically (without router) on-demand right now. The only condition is just using the same Angular version and recompiling all app's parts in a moment when moving to a newer version.

@mlc-mlapis

@mlc-mlapis I would love to see an example of this in action, as the documentation on loading a module programatically is sparse. It also feels like I'm digging myself into a hole - isn't the underlying API considered private and subject to change?

@bmbell

@bmbell ... it could be something like:

export class AppComponent implements OnInit {
	@ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;

	constructor(private _loader: SystemJsNgModuleLoader) {}

	private _injector: ReflectiveInjector;
	private _cmpRef: ComponentRef<any>;

	ngOnInit(): void {
		this._injector = ReflectiveInjector.fromResolvedProviders([], this._vcRef.parentInjector);
	}

	loadDynamicModule(): void {
		this._loader.load(`.../my.module#MyModule`)
		.then((_ngModuleFactory: NgModuleFactory<any>) => {
			const _ngModuleRef: NgModuleRef<any> = _ngModuleFactory.create(this._injector);
			const _cmpType: Type<any> = _ngModuleRef.instance.cmps.get('key');
			const _cmpFactory: ComponentFactory<any> = _ngModuleRef
				.componentFactoryResolver
				.resolveComponentFactory(_cmpType);
			this._cmpRef = this.vc.createComponent(_cmpFactory, 0, this._injector, []);
		});
	}
}

where

<ng-container #vc></ng-container>

and

@NgModule({
	declarations: [MyComponent],
	imports: [CommonModule],
	entryComponents: [MyComponent]
})
export class MyModule {
	cmps: Map<string, {}> = new Map();
	constructor() {
		this.cmps.set('key', MyComponent);
	}
}

@mlc-mlapis

@mlc-mlapis: Thanks! This makes a lot of sense when trying to dynamically load a component. However, this doesn't get me all the way to what I'm specifically looking to do. I might need to create a new item for that...I'm specifically trying to load a module that specifies routing information and would add this information to the routing table (under a specific parent route that I would need to specify).

Tracking the main underlying concern here in #18093

This has been partially addressed by Ivy (the part where the Angular compiler has to know about everything in one run)

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.}

Navigation Menu

Repository navigation

Discovering and loading NgModule at runtime. #18053

Feature Request

Current behavior

Expected behavior

What is the motivation / use case for changing the behavior?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Discovering and loading NgModule at runtime. #18053

Description

Feature Request

Current behavior

Expected behavior

What is the motivation / use case for changing the behavior?

Activity

trotyl commented on Jul 11, 2017

chuckjaz commented on Jul 24, 2017

pdelorme commented on Aug 17, 2017

hansl commented on Aug 22, 2017

bmbell commented on Feb 13, 2018

mlc-mlapis commented on Feb 13, 2018

bmbell commented on Feb 14, 2018

mlc-mlapis commented on Feb 15, 2018

bmbell commented on Feb 15, 2018

jelbourn commented on Oct 9, 2020

angular-automatic-lock-bot commented on Nov 9, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions