Generate seperate build file for a particular component in angular 7

Question

I am going to develop a very large application using Angular 7 Framework.

I have created a blank angular workspace using

 ng new angular-app --create-application=false

And in this workspace I have two angular applications created using the following commands:

 ng generate application app-one

 ng generate application app-two

Inside each of the two applications, I am going to have multiple components each working independently of each other.

I am looking for a way to create a separate javascript build file for each of the component so as to reduce the build size.

And use each of the separately build js files to use each component as a web component.

Please read what I have already tried to get a better idea.

I have tried the following steps:

1. Create a repository with prefix custom for custom angular elements:

   ng new app-name --prefix custom

2. Add the angular elements package:

   ng add @angular/elements

3. Create custom element component with encapsulation as native/emulated/none as required:

   ng g component my-component --inline-style --inline-template -v Native

4. Define the custom element in app.modulte.ts

    import  { Injector} from '@angular/core';
       import  { createCustomElement } from '@angular/elements';
        ...
        export class AppModule {
            constructor(private injector : Injector){
            const el = createCustomElement(MyComponent, {injector : this.injector});
            customElements.define('my-component',el);
    }
            ngDoBootstrap(){ }
        }

5. Install ngx-build-plus package for building a single bundle (e. g. for Angular Elements):

   npm i ngx-build-plus

6. Update application's builder section within the angular.json file so that it points to ngx-build-plus:

   "builder": "ngx-build-plus:build",

7. Add script in package.json to run builder:

   "build:ngx": "ng build --prod --output-hashing none --single-bundle true"

8. If required, Combine scripts.js and main.js in the created dist folder by creating a js file "concat_ngx.js":

     const fs = require('fs-extra');
        const concat = require('concat');
        (async function build() {
            const files = [
                './dist/<your_project>/scripts.js',
                './dist/<your_project>/main.js',
            ]
            await fs.ensureDir('elements_ngx')
            await concat(files, 'elements_ngx/combined-script.js');
        })()   

7. Run file to get single js file:

   node concat_ngx.js

8. Use js file in any Angular/Other project to use the custom component created.

But the problem here is I have to change the component bootstrap every time in app-module.ts

I needed an automated way to change the bootstrapping in app-module.ts at runtime.

But the problem here is I have to change the component bootstrap every time in app-module.ts

I needed an automated way to change the bootstrapping in app-module.ts at runtime.

Answer 1

In Angular 7, Add Default or Automatic bootstrapping :-

It is the default way an angular application bootstraps and main.ts holds the starting point of an application.

platformBrowserDynamic().bootstrapModule(AppModule);

For more information see here: -https://medium.com/learnwithrahul/ways-of-bootstrapping-angular-applications-d379f594f604