DEV Community: Marko Berger

Dynamic environment variable

Marko Berger — Fri, 17 Jan 2020 22:57:49 +0000

One build to rule them all!

Imagine that you have a multi-tenant product. Building your angular app for every client is a drag. I refuse to do the same build over and over again. Just to have different environment settings. So how to fix this.
I found a few posts online that helped me with this problem. In short, there are 2 different ways of doing this. One way is with making a window object dirty ( i don’t like this ). The other is a more angular way. So I will show you that way.
In both ways, the common denominator is a secret gem. APP_INITIALIZER.

So what is APP_INITIALIZER?

A function that will be executed when an application is initialized.

The official documentation says just that. Not very helpful. Right.
Let's start coding.
app-init.service.ts

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { shareReplay } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { HttpClient } from '@angular/common/http';
import { EnvironmentService } from './environment.service';

@Injectable({
  providedIn: 'root'
})
export class AppInitService {

  /** config.js file that will contain out environment variables */
  private readonly CONFIG_URL = 'assets/config/config.js';
  private config$: Observable<any>;

  constructor(
    private http: HttpClient,
    private environmentService: EnvironmentService
    ) { }

    /**
     * Method for loading configuration
     */
    loadConfiguration(){
      if(this.config$ && environment.production){
        this.config$ = this.http.get(this.CONFIG_URL)
        .pipe(
          shareReplay(1)
        );
      } else {
        this.config$ = of(environment);
      }

      this.environmentService.setEnvironment(this.config$);
      return this.config$;
  }
}

environment.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EnvironmentService {

  private dynamicEnv: any;

  constructor() { }
  /** Setter for environment variable */
  setEnvironment(env: Observable<any>){
    env.subscribe(data => this.dynamicEnv = { ...data});
  }
  /** Getter for environment variable */
  get environment() {
    return this.dynamicEnv;
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';

import { AppComponent } from './app.component';
import { AppInitService } from './app-init.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    {
      // This is where the magic happens. NOTE we are returning an Observable and converting it to Promise
      // IMPORTANT It has to be a Promise 
      provide: APP_INITIALIZER,
      useFactory: (appInit: AppInitService) => () => appInit.loadConfiguration().toPromise(),
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is the basic setup for a dynamic environment. We are bypassing the environment and delegating the service to take care of our environment for us. In my example, we will put the configuration in the config.json file and in the environment.prod.ts we will set production to true.
This way app-init.service.ts will know what configuration to load. If we are in development it will load environment.ts configuration and if we are in production it will load config.json.
U can call API instead of loading config.json if you want.
IMPORTANT Be careful with interceptors. Your configuration will be undefined until config.json loads. So your interceptor (if you have them) need to ignore the first initial post (a post that angular need before initialization).

UPDATE

It was put to my attention that this post is unclear on how to implement this concept on multi-tenant applications. You have your one application build and you need to install it on different domains with there own settings. So just need to add your config.json to assets/config/ with your environment to it. That it.

markoberger / ng-dynamic-environment

Angular dynamic environment example

DynamicEnvironment

This project was generated with Angular CLI version 8.3.22.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

View on GitHub

Angular custom validators and some weird ones

Marko Berger — Wed, 27 Nov 2019 16:51:04 +0000

After some time I'm at it again. I want to share something with YOU. So that you don’t bang your head on the table as I have. I'm working on an angular & angular material project. So we have basic validation on a numeric input field.

<div class="example-container">
  <mat-form-field>
    <input matInput 
      type="number" 
      placeholder="Some number ..."  
      [(ngModel)]="someNumber" 
      #someVal="ngModel"
      min="0" max="10">

  </mat-form-field>

</div>

Nothing special here. Right? We want to enter a value from 0 to 10. If we use arrows on the control, no problem. But we can input value by hand. So if we enter -2. We would expect to see mat-error message. Wrong. Validator min is not registering that -2 is lower than 0 and by that, it is not throwing an invalid. The same thing is happening if we enter 12. Why?
I don’t know. But I really think it is an issue with min and max validators.

Why should it be easy when it can be complicated.

We need to write some validators.
First, we are going to write a top border value validator.

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';

@Directive({
  selector: '[maxValueValidator]',
  providers: [{provide: NG_VALIDATORS, useExisting: MaxValueValidatorDirective, multi: true}]
})
export class MaxValueValidatorDirective implements Validator{
  // our limit value
  @Input('maxValueValidator') maxValue: string;
  validator: ValidatorFn; 
  numValue: number; 
  constructor() { this.numValue = +this.maxValue}
  //needed by the Validator interface
  validate(control: AbstractControl): ValidationErrors {
    return this.maxValueValidator()(control);
  }

  // If value is valid it will return null 
  // if it's not it will return {'maxValueValidator': { value: control.value}}
  maxValueValidator(): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
      return control.value > this.maxValue ? {'maxValueValidator': { value: control.value}} : null;
    };
  }
}

Simple right. (Now you can write the lower border value) .
Custom validators are cool! Right.

<div class="example-container">
  <mat-form-field>
    <input matInput 
      type="number" 
      placeholder="Some number ..."  
      [(ngModel)]="someNumber" 
      #someVal="ngModel"
      min="0" max="10" minValueValidator="0" maxValueValidator="10">
    <mat-error *ngIf="someVal.hasError('minValueValidator')">Number must be positive value!</mat-error>
    <mat-error *ngIf="someVal.hasError('maxValueValidator')">Number must be under 10!</mat-error>
  </mat-form-field>

</div>

You can view and try this example here. Enjoy.

Managing dynamic components

Marko Berger — Sat, 07 Sep 2019 12:40:28 +0000

Coders beware

Here there be monsters

Last time I have posted the article about dynamic components in Angular. Demonstrated how to set up one. Now here these a warning.
If you pass some kind of subject (behavior or any other) to your dynamic component and you passed it to your entry component (component you actually want to load). You will find your self in trouble.

What are you talking about!?

The example I have demonstrated is perfectly fine. It is clean and has no subscriptions. But when we have a subscription. We need to unsubscribe. Right!
Where do we do unsubscribing? NgOnDestroy.
And there is a problem.
By changing between components NgOnDestroy hook does not fire. That's because we are not destroying the entry component. We are replacing it.

What!!!

Now our app has gone bananas.
Our subscription lives on and if you fire the same event for your all entry component you are in trouble. There are no error messages and the application is showing weird results.

So what do we need to do?

We need to destroy our entry component.

 componentRef: ComponentRef<any>; //declaration 
 this.componentRef.destroy();

This will destroy the component and fire the NgOnDestroy hook.
Example of the code

 loadComponent(){
    if(this.componentRef){
    /** Checkig if an old component reference exists and then we destroy it*/ 
      this.componentRef.destroy();
    }
    /** Preparing our component for creation */
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.components[this.inputData]);
    /** Grabbing reference of our view placeholder */
    const viewContainerRef = this.placeholder.viewContainerRef;
    /** Clearing our placeholder  */
    viewContainerRef.clear();
    /** Magic of creating a component instance  */
    this.componentRef = viewContainerRef.createComponent(componentFactory);
    /** 
     * @Input data into our instance.
     */
    (this.componentRef.instance as IComp).text = ''+this.inputData;
    /** @Output data from our instance  */
    (this.componentRef.instance as IComp).event.subscribe(
      data => this.changeEmit.emit(data)
    );
  }

I have updated git repo with this code. You can find the link at the end of this article

Lessons learned

Mistakes have the power to turn you into something better than you were before.

Github Repo

markoberger / angular-dynamic-example

Angular Dynamic example

DynamicExample

This project was generated with Angular CLI version 7.3.7.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

View on GitHub

Dynamic components right way

Marko Berger — Fri, 30 Aug 2019 08:14:57 +0000

For all of you young people, there was a time when TV had no remote. And you had to press some mechanical buttons to switch the channel.

In those times there were only 3 channels and Tv had 8 channel buttons. Now the time has passed a few years. Now we have 8 channels. No problem but we see there are no more slots anymore. That's right “Houston we have a problem”.

Now imagine we have a component like that. Component that by some condition switches and loads other presenter components in a template with ngSwitch. By adding new presenter components your template will become unreadable and just ugly. So what to do. We need to load as many different kinds of presenter components that we like in our parent component and make our template clean and readable. Not to mention that we need communication between them in both ways. The solution is angular dynamic components.Official documentation

Let's start

You can pull working an example project from this GitHub repo.

I will not go over how to create a new angular project but jump to the interesting part and try to explain it. Life is to short :)

First things first. We have to create a directive that will expose our placeholder reference.

ng c d placeholder

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appPlaceholder]'
})
export class PlaceholderDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }  

}

The main thing in this directive is that we are making ViewContainerRef public so that we can access it from outside.

Magic time

ng g c dynamic

dynmaic.component.ts --> Explanations are in the comments

import { Component, OnInit, Input, ComponentFactoryResolver, ViewChild, OnChanges, ChangeDetectionStrategy, SimpleChanges, Output, EventEmitter } from '@angular/core';
import { Component1Component } from '../component1/component1.component';
import { PlaceholderDirective } from '../placeholder.directive';
import { Component2Component } from '../component2/component2.component';
import { IComp } from '../icomp';


@Component({
  selector: 'app-dynamic',
  templateUrl: './dynamic.component.html',
  styleUrls: ['./dynamic.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DynamicComponent implements OnInit, OnChanges{
  /**Here we grab reference placeholder directive  */
  @ViewChild(PlaceholderDirective, {static: true}) placeholder: PlaceholderDirective;
  @Input() inputData: number;
  @Output() changeEmit: EventEmitter<string> = new EventEmitter<string>();
  /**An array where we register what component we want to load */
  components = [Component1Component, Component2Component];

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngOnInit() {
  }
  ngOnChanges(changes: SimpleChanges): void {
    /**
     * We are using this hook for change detection and invoking loadComponent() method
     * There are more ways to do this but for the simplicity of this example I have decided on this way
     */
    if(changes.inputData.currentValue != undefined){ // We need to check if inputData has some value
      this.loadComponent();
    }
  }

  /**
   * A method that loads and creates instances of components
   */
  loadComponent(){
    /** Preparing our component for creation */
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.components[this.inputData]);
    /** Grabbing reference of our view placeholder */
    const viewContainerRef = this.placeholder.viewContainerRef;
    /** Clearing our placeholder  */
    viewContainerRef.clear();
    /** Magic of creating a component instance  */
    const componentRef = viewContainerRef.createComponent(componentFactory);
    /** 
     * @Input data into our instance.
     */
    (componentRef.instance as IComp).text = ''+this.inputData;
    /** @Output data from our instance  */
    (componentRef.instance as IComp).event.subscribe(
      data => this.changeEmit.emit(data)
    );
  }
}

Important -- you have to import presenter components as entryComponents to work.

dynamaic.component.html

<ng-template appPlaceholder></ng-template>

icomp.ts --> interface for this example

export interface IComp {
    text: string;
    event: any;
}

Now let us see the component that we want to load.

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { IComp } from '../icomp';

@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit, IComp {
  @Output() event = new EventEmitter<string>();
  @Input() text: string;
  textbox: string;
  constructor() { }

  ngOnInit() {
  }

  onEmit(){
    this.event.emit(this.textbox);
  }
}

Nothing special. Right. Only that we are implementing our interface for standardization of output and inputs.

That's it.

Github Repo

ikonezg / angular-dynamic-example

Angular Dynamic example

DynamicExample

This project was generated with Angular CLI version 7.3.7.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

View on GitHub

Authentication preload strategy

Marko Berger — Tue, 27 Aug 2019 13:14:51 +0000

I have decided to write my own custom authentication preload strategy. I got an idea from John Papa and his preload strategy series of articles. I truly recommend you read this series of articles on this subject. So what are custom preload strategies?

It’s a way you can tell your Angular application how to bundle your javascript code in a predefined way of your choosing.

For this let’s say we have the authentication service that will reload what modules are going to be preloaded based on the user role. I’m not going to deeper on how or where you will store your strategy. Because it is a philosophical question :-).
I'm going to set up my preload strategies in the environment variable. (This is just one way of doing this).

strategies: new Map([
    ['default', ['module1']],
    ['admin', ['module1', 'module2', 'module3']],
    ['user', ['module1', 'module2']]
  ]
  )

Our router setup.

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'}, //not important
  {path: 'home', component: HomeComponent}, //not important
  {
   path: 'module1', 
   loadChildren: '../app/module1/module1.module#Module1Module', 
   data: {preload: true}
  },
  {
   path: 'module2', 
   loadChildren: '../app/module2/module2.module#Module2Module', 
   data: {preload: true}
  },
  {
   path: 'module3', 
   loadChildren: '../app/module3/module3.module#Module3Module', 
   data: {preload: true}
  },
];
@NgModule({
  imports: [RouterModule.forRoot(routes, {preloadingStrategy: RolePreloadService})],
  exports: [RouterModule]
})

Let's create what we need in our auth service

export class OnDemandRolePreloadOptions {
  constructor(public routePath: string, public preload = true) {}
}
@Injectable({
  providedIn: 'root'
})
export class AuthServiceService {

  constructor() { }

  getUserRolePreloadOption(){
    const rolePaths: OnDemandRolePreloadOptions[] = this.generatePaths()
    return from(rolePaths);
  }
  generatePaths(){
    return environment.strategies.get('default') //default preload
    .map( mod => new OnDemandRolePreloadOptions(mod, true));
  }
}

This is just to serve this example
In a nutshell. We need to return our OnDemandRolePreloadOptions class of a default strategy as observable.

Now that we got our strategy. Let's do some magic in role-preload.service.ts

export class RolePreloadService implements PreloadingStrategy {
  userRole$: Observable<OnDemandRolePreloadOptions>;

  constructor(private authService: AuthServiceService) { 
    this.userRole$ = this.authService.getUserRolePreloadOption();
  }

  preload(route: Route, load: () => Observable<any>): Observable<any> {

    return this.userRole$.pipe(
      mergeMap(role => {
        const shouldPreload = this.preloadCheck(route, role);
        return shouldPreload ? load() : EMPTY;
      })
    );
  }

  preloadCheck(route: Route, preloadRoleOptions: OnDemandRolePreloadOptions){
    return (
      route.data &&
      route.data['preload'] && 
      [route.path, '*'].includes(preloadRoleOptions.routePath) &&
      preloadRoleOptions.preload
      )
  }

}

So preloadCheck() method is what is doing the heavy lifting here. It checks if the lazy load route is predefined for preload, does it exists in router and preloadRoleOptions. If so it will load our preload strategy based on authentication. If you log in with admin account it will load preload admin javascript bundle.

Enjoy

Love story

Marko Berger — Sun, 04 Aug 2019 22:31:10 +0000

Intro

Because I’m an Angular developer it is hard to find its 100% natural match of writing a full-stack application. Let’s say Angular is a “boy” and some backend is a “girl”. We are going to use FullStack Tinder-like application.

Let start swiping!!!

Lavarel - PHP

You are too old. It’s over. Nobody is writing in PHP.
<<< Swiping left 🤢

Spring - Java

It like when you find your ex on Tinder.
“She is free. Hmm, Mabey I will call here .”
Then you remember all bad thing and traumas. Don't forget her parents.
<<< Swiping left 😯

Django - Python

There is no reason not to. With Python popularity. But there is no chemistry, no appeal.
<<< Swiping left 😑

Express - Node.js

Cute but wild. It can be a wild summer love episode that will last forever. But it will probably end in flames. She just can't be tamed.
Swiping right >>> I like to have fun 😳

.Net Core - CSharp

Wife material. Nice, fast, sophisticated but complicated. You need time to adjust to her needs and quirks. And she loves you for using TypeScript ❤️
Swiping right >>> 😍

NestJs - TypeScript

Love at first sight. Butterflies, bells and the magic. It was like Kupid has (TypeScript) shoot an arrow into our harts. One thing. She is a foreign exchange student and young cousin of Node.js and Express. We are completing each other sentences. But will it last?
Swiping right >>> ❤️ ❤️ ❤️

Nest (or NestJS) is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with and fully supports TypeScript (yet still enables developers to code in pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).

When you see the basics and how the NestJs is organized. You will see quickly resemblance to Angular architecture. Thanks to that and TypeScript. We have a somewhat standard style of writing backend projects with Express and Node (Nest is built on top of the #Express & #Node.js).
Every interaction and switching from front to back is so natural. Pure poetry in the motion of coding and the mindset.

Question

I will not go about NestJS into details. There are tons of good articles and very good documentation on NestJs website for that. My point of this is to express my love for this framework as an Angular developer.
Question is will this be ad “Happily ever after” or “Rome & Juliet” love story?
Would you recommend to your clients and bosses this stack?

The Angular (elements) gift to the Web

Marko Berger — Sun, 04 Aug 2019 20:51:08 +0000

Intro in Angular Elements

Imagine that your client wants to sell her or his service on the third-party web app. You then have to somehow integrate your service on their application or redirect to your application. That is not an easy job to and user experience is awful. So how does Angular Elements helps us with that? Did you hear about Web Component Technology?

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

This tech was introduced in 2011 by Alex Russell at Fronteers Conference.
And now Angular found the way to introduce this tech into his own environment.
Let’s see what documentation says.

Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way.

Cool right!

Enough talk lets code.
We will create element registration-form

npm install -g @angular/cli 
ng new registration-form
ng add @angular/elements project=registration-form

@angular/elements are a package that contains all the good stuff we need for creating Angular elements. It contains document-register-element a lightweight version of the W3C Custom Elements specification. Remember Angular Elements are still young. So there are still some issues. One of them is that you need to change the document-register-element version from 1.7.2 to 1.8.1 (change it in package.json and do npm install).

All the preps are done. Let's make our hands dirty.

First, generate the new component.

ng g c register-form

Registration-form.component.ts

@Component({
  selector: 'register-peeker',
  templateUrl: './register-peeker.component.html',
  styleUrls: ['./register-peeker.component.css'],
  encapsulation: ViewEncapsulation.Native
})

What is going on here?

We want to have isolated application inside of other application with our own CSS style. See the problem. To solve this. We are got to tell Angular to use Shadow Dom (encapsulation part of the code) to isolate our CSS styles and compile it into JavaScript. So that we can bundle it into one file. There are other ViewEncapsulation strategies but Native is one preferred.
Now you can do that nice Angular magic we all love inside component.ts, component.html, and component.css component files.
But if you want to use the same CSS styles of the "parent" page. Just switch encapsulation to None and remove styleUrls.
Let’s fast forward to the place where the real the magic happens the app.module.ts.

The Angular (Elements) gift to Web

Marko Berger — Fri, 26 Jul 2019 22:32:45 +0000

Intro in Angular Elements

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

This tech was introduced in 2011 by Alex Russell at Fronteers Conference.
And now Angular found the way to introduce this tech into his own environment.
Let’s see what documentation says.

Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way.

Cool right!

Enough talk lets code.

We will create element registration-form

npm install -g @angular/cli 
ng new registration-form
ng add @angular/elements project=registration-form

All the preps are done. Let's make our hands dirty.

First, generate the new component.

ng g c register

registration.component.ts

@Component({
  selector: 'register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css'],
  encapsulation: ViewEncapsulation.Native
})

What is going on here?

We want to have isolated application inside of other application with our own CSS style. See the problem. To solve this. We are got to tell Angular to use Shadow Dom (encapsulation part of the code) to isolate our CSS styles and compile it into JavaScript. So that we can bundle it into one file. There are other ViewEncapsulation strategies but Native is one preferred.
Now you can do that nice Angular magic we all love inside component.ts, component.html, and component.css component files.
But if you want to use the same CSS styles of the "parent" page. Just switch encapsulation to None and remove styleUrls.
I will skip the part of developing registration form and fast forward to the place where the real the magic happens the app.module.ts.

@NgModule({
  declarations: [
    RegisterComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  entryComponents: [
    RegisterComponent
  ],
  providers: [],
  bootstrap: []
})
export class AppModule {
  constructor(private injector: Injector) {

  }
  ngDoBootstrap() {
    const el = createCustomElement(RegisterComponent, {injector: this.injector});
    customElements.define('register', el);
  }
 }

First, we need to add our RegisterFormComponent to entryComponents. Because our component is defined but not declared in our application. The second task is to implement manual bootstrapping with ngDoBootstrap. The third and final task is to convert an Angular component to native DOM API with createCustomElement().

That's that.

The only thing we need is to compile, bundle and test our Custom Element.
Remove all app.componet files. We don't need them.
Note: don’t remove app.module.ts.

We are not finished yet

Now, this is something we all wish that will be updated in next versions of Angular-CLI and you will see why.

If you do ng build --prod it will create a bunch of files with hash strings in there name. We don't want this.

So we need to do a little hack.

npm install fs-extra concat --save-dev

After the installation has finished, go to the project root folder and create a build-script.js file.

const fs = require('fs-extra');
const concat = require('concat');

(async function build() {
  const files = [
    './dist/register/runtime.js',
    './dist/register/polyfills.js',
    './dist/register/scripts.js',
    './dist/register/main.js'
  ];

  await fs.ensureDir('elements');
  await concat(files, 'elements/register-form.js');
})();

Note: This script is for Angular 7. If you are using Angular 6 you need to adjust paths in dist/ folder.
This script will bundle all those files into one register-form.js file for us to use and put in elements directory.

Next step let’s add our new build script to package.json.

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:elements": "ng build --prod --output-hashing none && node build-elements.js",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

Run the script

ng build:elements

Test it

Create basic index.html file in the root directory and just add .

ng serve

and viola.