Load non-existing Component with AOT in Angular 2

Question

Can I or can I not use Angular 2 with AOT for this project? It is important that it is AOT, it can’t be JIT.

I building an app with a lot of different components, in runtime I will get a specification on which components should be shown. Sometimes 1 components will be shown and sometimes up to 30.

I would like to have these components in a different file. Not just a different .ts-file, i would like to have these components in different .js files and store them on or server and get them when necessary.

For three reasons:

1. The user shouldn’t have to update the app if just one component is updated.

2. If an update is made on one component i don’t want anything else in the app to break just because of this. (and yes it does). If a new app is built we have to retest the whole app, not just that one component.

3. If only 1 component is needed it is unnecessary to load all 30.

So i’ve been on google/here on stack overflow and searched this and tried different solutions, but no one seems the have this issue. All examples that I found already have the component in the app and its been declared in the NgModule. But my component doesn’t exist until I get the file from the server.

Answer 1

I didn't face such a challenge, but these are my thoughts.

1. If each of these 30 components is rendered using the router, place each of them in a separate feature module and create the router configuration to load each of these modules lazily. If your project is Angular CLI based, it'll build a separate bundle for each of the lazily loaded components regardless if you use AoT or not. Then you should be able to replace any of these bundles in your prod server without touching others.

If you are not using Angular CLI, you'll need to manually configure the Webpack build to create a separate bundle for each of these 30 components.

2. If you're not using the router for loading these components, consider using APP_INITIALIZER as described in the accepted answer here: Angularjs2 - preload server configuration before the application starts