Angular Learning (Part2)

  1. Node JS 10 or above
  2. Angular CLI
  3. PyCharm Communicaty Edition

App Initilizer

"app_name": "New Example Application",
"api_end_point": "This is new Endpoint",
"copy_right_info": "This is copyright by",
"development_company": "Development Company"
assets: [

If we use external configuration from different server we acually do not add it to angular.json file.

> ng g class Models/AppConfiguration
export abstract class AppConfiguration {
app_name: string,
api_end_point: string,
copy_right_info: string,
development_company: string
> ng g service AppInit
CREATE src/app/app-init.service.spec.ts (363 bytes)
CREATE src/app/app-init.service.ts (136 bytes)
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { AppConfiguration } from './models/app-configuration';
providedIn: 'root'
export class AppInitService extends AppConfiguration {
constructor(private httpClient: HttpClient) {

async load(): Promise<any> {
const data = await this.httpClient.get<AppConfiguration>(`app.config.json`).toPromise();
this.app_name = data.app_name,
this.api_end_point = data.api_end_point,
this.copy_right_info = data.copy_right_info,
this.development_company = data.development_company;

What does Super() do?

About async and toPromise()

const data = await this.httpClient.get<AppConfiguration>(`app.config.json`).toPromise();
import { Core, APP_INITIALIZER } from '@angular/core';
import { AppInitService } from './app-init.service';
export const  appStartupServiceFactory =  (startupService: AppInitService): Function  => () => startupService.load()
export function appStartupServiceFactory (startupService: AppInitService): Function {   return function () {
return startupService.load()
providers: [{
useFactory: appStartupServiceFactory,
deps: [AppInitService],
multi: true
  1. provide: provide property holds the token that serves as the key for both location a dependency value and configuring the injector
  2. Seceond atttribute tell the injector how to create the dependency value. it can be useClass , useValue , userFactory , userExisting . We use the userFactory because we use the factory function to tell the injector how to create the value.
  3. deps: its an array, we can inject the dependency of for injected provider which is factory function, services or class
  4. multi: multi:true will register the multiple handler for the specific event or hook like APP_INITIALIZER. it creates the multiple instance to handle the events of angular.

constructor(private service:PostService, private configService: AppInitService) {
console.log('config service',configService.app_name)

When we browsing to home route, you see at console, it already loads the value form APP_INITIALIZER hook.

Moduler the Routing

> ng g m components/admin --routing
> ng g c components/admin
CREATE src/app/components/admin/admin.component.scss (0 bytes)
CREATE src/app/components/admin/admin.component.html (20 bytes)
CREATE src/app/components/admin/admin.component.spec.ts (619 bytes)
CREATE src/app/components/admin/admin.component.ts (272 bytes)
UPDATE src/app/components/admin/admin.module.ts (455 bytes)
import { AdminComponent } from './admin.component';
declarations: [AdminComponent],
})export class AdminModule { }
> ng g c components/admin/components/login
> ng g c components/admin/components/registration
import { RegistrationComponent } from './components/registration/registration.component';
import { LoginComponent } from './components/login/login.component';
declarations: [LoginComponent, RegistrationComponent, AdminComponent],
})export class AdminModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './components/login/login.component';import { RegistrationComponent } from './components/registration/registration.component';import { AdminComponent } from './admin.component';import {AdminRoutingModule} from './admin-routing.module'@NgModule({
declarations: [LoginComponent, RegistrationComponent, AdminComponent],
imports: [
})export class AdminModule { }
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { LoginComponent } from './components/login/login.component';
import { RegistrationComponent } from './components/registration/registration.component';
const routes: Routes = [
{path: '', component: AdminComponent,
children: [
{path: 'login', component: LoginComponent},
{path: 'register', component: RegistrationComponent}
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
export class AdminRoutingModule { }

What is RouterModule.forRoot() and RouterModule.forChield()?

  • The forRoot() method creates an NgModule that contains all the directives, the given routes, and the Router service itself.
  • The forChild() method creates an NgModule that contains all the directives and the given routes, but does not include the Router service.
const routes: Routes = [
{path: 'admin', loadChildren: () => import("./components/admin/admin.module").then(m => m.AdminModule)}
<a href="/admin/login" mat-raised-button color="primary">Admin Login</a><a href="/admin/register" mat-raised-button color="primary">Admin Register</a>

In Next tutorial I will dicuss about how to dockerized the Angular Application and deploy into Cloud Service…………



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store