Tips for integrating dynamic external components into Angular applications

Question

Tips for integrating dynamic external components into Angular applications

I have encountered an issue with my Angular application.

My goal is to create an Angular application written in TypeScript and built with (aot).

The objective is to create a user dashboard with various widgets, each widget being an Angular component.

While my app already includes some widgets, I want to be able to extend them through a marketplace or manual creation.

The marketplace should be able to download files (js/ts/bundle..??) into a designated folder.

Subsequently, my app should be capable of loading and instantiating these new widgets (= ng component).

This is the folder structure in production:

  |- index.html
  |- main.f5b448e73f5a1f3f796e.bundle.js
  |- main.f5b448e73f5a1f3f796e.bundle.js.map
  |- .... (all other generated files)
  |- externalWidgets
      |- widgetA
            |- widjetA.js
            |- widjetA.js.map
            |- assets
                 |- image.png
      |- widgetB
            |- widjetB.ts
            |- widjetB.html
            |- widjetB.css

When loading the user page, the database indicates the presence of widgetA. Therefore, the objective is to dynamically load files and instantiate the included component.

I have attempted different solutions, such as using "require" and "System.import," but they have both failed when the path needs to be dynamically generated.

Is it possible to achieve this? I am open to changing my code structure and modifying external widgets (for instance, widgetB has not been transpiled yet...).

In essence, I am seeking a "plugin system" for an Angular4/webpack application.

angular typescript plugins webpack runtime

Answer 1

Answer №1

I am currently following the same approach and have elaborated on the process in this presentation at NgConf.

It is essential to grasp that Webpack is unable to load modules dynamically that are unknown during the build phase. This limitation is linked to how Webpack constructs the dependency tree and gathers module identifiers during the build. This aligns with the purpose of Webpack as a modules bundler rather than a modules loader. To overcome this, a module loader like SystemJS is the most suitable option.

Furthermore, each plugin should be packaged as a module, with all exported components included in the entryComponents of that module.

During runtime, loading the module enables access to the declared components within it. Even though a module is not strictly necessary, it serves as a packaging unit in Angular. When obtaining a module, the approach varies based on whether the module was compiled with AOT or not.

If AOT was used for compilation, simply retrieve the exported factory class from the module and instantiate the module:

System.import('path/to/module').then((module)=>{
    const moduleFactory = module.moduleFactoryClassName;
    const moduleRef = moduleFactory.create(this.parentInjector);
    const resolver = moduleRef.componentFactoryResolver;
    const compFactory = resolver.resolveComponentFactory(AComponent);
}

For modules compiled without AOT, it is necessary to compile it using the JIT compiler:

System.import('path/to/module').then((module)=>{
    const moduleFactory = this.compiler.compileModuleSync(module.moduleClassName);
    const moduleRef = moduleFactory.create(this.parentInjector);
    const resolver = moduleRef.componentFactoryResolver;
    const compFactory = resolver.resolveComponentFactory(AComponent);
}

Once these steps are completed, dynamic components can be incorporated wherever needed using the methods outlined in this article: Understanding Dynamic Components in Angular

Answer 2

I am currently following the same approach and have elaborated on the process in this presentation at NgConf.

It is essential to grasp that Webpack is unable to load modules dynamically that are unknown during the build phase. This limitation is linked to how Webpack constructs the dependency tree and gathers module identifiers during the build. This aligns with the purpose of Webpack as a modules bundler rather than a modules loader. To overcome this, a module loader like SystemJS is the most suitable option.

Furthermore, each plugin should be packaged as a module, with all exported components included in the entryComponents of that module.

During runtime, loading the module enables access to the declared components within it. Even though a module is not strictly necessary, it serves as a packaging unit in Angular. When obtaining a module, the approach varies based on whether the module was compiled with AOT or not.

If AOT was used for compilation, simply retrieve the exported factory class from the module and instantiate the module:

System.import('path/to/module').then((module)=>{
    const moduleFactory = module.moduleFactoryClassName;
    const moduleRef = moduleFactory.create(this.parentInjector);
    const resolver = moduleRef.componentFactoryResolver;
    const compFactory = resolver.resolveComponentFactory(AComponent);
}

For modules compiled without AOT, it is necessary to compile it using the JIT compiler:

System.import('path/to/module').then((module)=>{
    const moduleFactory = this.compiler.compileModuleSync(module.moduleClassName);
    const moduleRef = moduleFactory.create(this.parentInjector);
    const resolver = moduleRef.componentFactoryResolver;
    const compFactory = resolver.resolveComponentFactory(AComponent);
}

Once these steps are completed, dynamic components can be incorporated wherever needed using the methods outlined in this article: Understanding Dynamic Components in Angular

Tips for integrating dynamic external components into Angular applications

Answer №1

Similar questions

Exploring the capabilities of Angular 2.0.0 by testing a component integrated with a

The error message is stating that the module located at C://.. does not have an exported member named "firebaseObservable"

The sole coding platform that fails to acknowledge the "ng" command is Visual Studio Code

What steps should I take to enable the camera view in ngx-scanner?

Upon running the code, no errors appear on the console. However, my project isn't functioning properly and I'm encountering errors on the web console

Issue with Angular 6.1.0: Scroll position restoration feature malfunctioning

Mapping objects in Typescript to create a union of objects

Handling Click and Mouse Events with React [react-sortable-hoc, material-ui, react-virtualized]

There was an issue encountered while attempting to differentiate an object in the Angular datatable results. The data table only accepts arrays and iterables

When running ng serve with Angular, an unexpected error arises: The workspace does not have the 'production' configuration set

Executing a method of another component in Angular2

The RxJS Map operator may struggle to detect changes in an array that has been

Understanding the process of reading cookies on the Angular2 side that have been set by the C# server

Error: Cannot locate 'import-resolver-typescript/lib' in jsconfig.json file

What is the correct way to include a JSON file in TypeScript?

Component designed to be reusable across multiple different Angular 8 applications

"Encountering a perplexing problem with css-loader in

Switching a div class in Angular 6 with a button click: A step-by-step guide

Having trouble establishing a connection with mongoose and typescript

Sharing API types from a NestJs backend to a Vue frontend (or any other frontend) application: Best practices