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?

how you achieve that? can i convert only one module as a web component instead of making a sub project? — shahida, Aug 28 '23 at 08:45

score 0 · Answer 1 · edited Sep 01 '18 at 17:47

Typically there will only be one bootstrap module which is the root of your application.

Other features/component modules can be imported as and when they are needed. For example,

@NgModule({
    imports: [
        FeatureModules
    ],
    declarations: [ErrorComponent],
    providers: [
        Services
    ],
    bootstrap: [MainComponent]
})
export class AppModule {}

If your application has several roots then you can include them in the array defined by bootstrap.

See Angular's docs.

"The application launches by bootstrapping the root AppModule, which is also referred to as an entryComponent. Among other things, the bootstrapping process creates the component(s) listed in the bootstrap array and inserts each one into the browser DOM.

Each bootstrapped component is the base of its own tree of components. Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.

While you can put more than one component tree on a host web page, most applications have only one component tree and bootstrap a single root component.

This one root component is usually called AppComponent and is in the root module's bootstrap array."

score 0 · Accepted Answer · answered Sep 11 '18 at 06:05

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"
          ]
     }
    }
   }
  }
 }

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

2 Answers2