How to import angular library dynamically without rebuilding of angular app

198 Views Asked by At

I have simple angular app + angular library. I want to build an angular app without usage of this library, but later on I want to add an import programmatically using bash scripts. In general I want to build plugin system using angular libraries. Expected possible result:

assets
plugins
  angular-lib-1
  angular-lib-2     <--------------- already built library I want to import dynamically
    assets
    esm2022
    fesm2022
    lib
    index.d.ts
    package.json
    public-api.d.ts
    favicon.ico
index.html          <--------------- uploaded-plugins.js (generated file) imported as a simple script
main.ed7db2ea07049831.js
polyfills.d244a5edf536ed86.js
runtime.c9c1a804377c74d5.js
styles.92f5aa99e6acd809.css
uploaded-plugins.js <--------------- this file generated and have some content like, see farther:

uploaded-plugins.js

// this code running in the browser
// as for me it is impossible to use simple import - 
// because it is not allowed by the browser (security policies). 
// Here is my question and I have no clue what to do next.

import { AngularLib2Module } from './plugins/angular-lib-2';

window['plugins'] = [AngularLib2Module];

Update 1 (5 days past)

Plugin 1 (umd)

Angular library -> fesm2022: built with rollup (umd format). I tried to eval(it), but:

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'Component')

Plugin 2 (esm)

Use just Angular library -> fesm2022 with no transformations. Then tried to eval(it), but:

ERROR Error: Uncaught (in promise): SyntaxError: Cannot use import statement outside a module

Probably need to use systemjs to resolve all dependencies, also need to write some script which will replace import {} to System.import()

Plugin 3 (application)

Was added with cmd -> ng g application, then ng build, then import generated main.sdf7s6dfsd86f87sd6f.js and I tried to eval(it), but

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'ɵmod')

Plugin 4 (lazy loaded)

Here I use lazy load techniq to build separate js bundle of component. Angular generated for me 533.dsfs6d8f76s87d6f.js file, and I tried to eval(it), but:

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'ɵmod')

Plugin 4 (lazy loaded) + rollup

I made from built 533.dsfs6d8f76s87d6f.js a plugin4.umd.js and I tried to eval(it), but the same error

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'ɵmod')
0

There are 0 best solutions below