Angular Elements : several custom web-components out of a feature-module project-structure possible?

Question

I want to create several custom web-components with angular6 and angular-elements. Right now, i've just got it working if everything is defined inside the app.module.ts directly.

But my project consists of several feature-modules with their own custom dependencies, components etc. inside.

I've tried to extend the main.ts with two bootstrap-modules, but that didin't work.

 platformBrowserDynamic([{provide:LOCALE_ID,useValue:'de'}]).
   bootstrapModule(AppModule, {
    providers: [{provide: LOCALE_ID, useValue: 'de'}]
   })
.catch(err => console.log(err));

 platformBrowserDynamic([{provide: LOCALE_ID, useValue: 'de'}]).
  bootstrapModule(FeatureModule, {
   providers: [{provide: LOCALE_ID, useValue: 'de'}]
  })
.catch(err => console.log(err));

How can i achieve that or do i have to put all my feature modules into serveral "own" projects?

Answer 1

you can achieve it by lazy-loading the modules through angular.json:

  "projects": {
   "angular-lazy-webcomponents": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "architect": {
     "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
          "lazyModules": [
            "src/app/module1/module-one.module",
            "src/app/module2/module-two.module"
          ]
     }
    }
   }
  }
 }