Let’s Use Our New Dynamic Content Outlet

Phew! Take a deep breath and grab a cup of coffee (french press fair trade organic dark roast). The hard work is behind you. Next we will go through the process of actually putting this new module into play!

For any component that you would like dynamically rendered you need to do the following four steps. These steps must be followed exactly.

1. Prepare your module for dynamic import

Confirm that the component is listed in the entryComponents array in the module that the component is a part of.

array in the module that the component is a part of. Add to the module, a new static property called dynamicComponentsMap . This allows us to get the type literal for the given componentName so that the resolveComponentFactory can instantiate the correct component.

You might ask why we didn’t just add a fourth property to the DynamicContentOutletRegistry named componentType ; well this is because if we import the type in the registry, then it defeats the purpose of lazy loading these modules as the the type will be included in the main bundle.

A prepared module might look as follows:

2. Add your dynamic component(s) to the registry

For any component that you would like dynamically rendered, add a new entry to the DynamicContentOutletRegistry array in src/app/dynamic-content-outlet/dynamic-content-outlet.registry.ts .

The following properties must be filled out:

componentName : This should match exactly the name of the Component you wish to load dynamically.

: This should match exactly the name of the Component you wish to load dynamically. modulePath : The absolute path to the module containing the component you wish to load dynamically. This is only the path to the module and does NOT include moduleName after a # .

: The absolute path to the module containing the component you wish to load dynamically. This is only the path to the module and does NOT include moduleName after a . moduleName: This is the exact name of the module.

Example Component Mapping

{

componentName: 'MySpecialDynamicContentComponent',

modulePath: 'src/app/my-special-dynamic-content/my-special-dynamic-content.module',

moduleName: 'MySpecialDynamicContentModule'

},

3. Add your dynamic modules to the lazyModules array

In your angular.json update the projects > ** > architect > build > options > lazyModules array and add an item for each module that you added to the registry in order for the Angular AOT compiler to detect and pre-compile your dynamic modules. If you have multiple projects in a folder, make sure you add this for the correct project you are importing and using dynamic modules in. The updated file will look similar to this:

{

...

"projects": {

"angular-dynamic-content": {

...

"architect": {

"build": {

"builder": "@angular-devkit/build-angular:browser",

"options": {

...

"lazyModules": ["src/app/my-special-dynamic-content/my-special-dynamic-content.module"]

},

}

}

}

}

}

Wire up the Dynamic Content Outlet Module

Up to this point you have created your dynamic content outlet module and registered your components to be available in the outlet. The last thing we need to do is wire up our new DynamicContentOutletModule to be used in our application. In order to do so you need to:

1. Add your new DynamicContentOutletModule to the imports array of any feature module or the main AppModule of your Angular application.

Example of addition to the `imports` array

@NgModule({

...

imports: [

...

DynamicContentOutletModule

],

...

}) export class AppModule {}

2. Add the following tag to the template of the parent component that you would like to render the dynamic content in:

<app-dynamic-content-outlet [componentName]="'MyComponent'">

</app-dynamic-content-outlet>

This is very similar in nature to Angular’s built-in <router-outlet>/</router-outlet> tag.

3. Happy ng serve --prod ing!

Conclusion

Hopefully you have found this solution helpful. Here is the full GitHub repository example for you to clone and play around with. PR’s are welcome, appreciated, encouraged and accepted!

Real-World Complex Example

If you are interested in a more in-depth real-world example, then check out the Github Repository which will demonstrate the following:

Dynamic modules with multiple components

Demonstrating the use of on-the-fly component changes

Demonstrating that the scoped styles are loaded dynamically for each component

GitHub Repository Example

Additional Resources

I would highly recommend enrolling in the Ultimate Angular courses. It is well worth the money and I have used it as a training tool for new Angular developers. Follow the link below to signup.