Create pages with Angular 1

What I did

I created some pages with Angular.
Because I wanted to use on my work, I had to add compatibility of IE11.

The structure of pages

Top page
L Page1
L Page2
L Contents1
L Contents2
* Contents1 and Contents2 were shown and hidden by URL parameter.

Setup

Environments

• npm : ver.6.13.1
• Angular : ver.8.2.14
• Angular-cli : ver.8.3.19
• VSCode : ver.1.41.0-insider

Create project

ng new product-sample

I didn't add router, and I choosed CSS.

Read configuration file

Angular How-to: Editable Config Files - Premier Developer

First, I added config file.
Most of all things I did were written in the blog.

First, I tried using DI and calling load method in AppConfig's constructor.
But when I had done like that, I couldn't use in the class constructors and ngOnInits what had been depended on AppConfig.
Because at that time, the loading had not been finished yet, so I could get undefined.

app-config.service.ts (failed)

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { ApplicationSettings } from './models/application-settings';

@Injectable({
  providedIn: 'root'
})
export class AppConfig {
  private applicationSettings: AppConfig;

  public get settings(): AppConfig{
    return this.applicationSettings;
  }
  constructor(private http: HttpClient) {}
  public load(){
    const jsonFile = `assets/config.${environment.name}.json`;
    return new Promise<void>((resolve, reject) => {
      this.http.get(jsonFile).toPromise()
        .then((response : AppConfig) => {
          this.applicationSettings = <AppConfig> response;
          resolve();
      }).catch((response: any) => {
         reject(`Could not load file '${jsonFile}': ${JSON.stringify(response)}`);
      });
  });
  }
}

top-page.component.ts (failed)

import { Component, OnInit } from '@angular/core';
import { AppConfig } from '../app-config.service';

@Component({
  selector: 'app-top-page',
  templateUrl: './top-page.component.html',
  styleUrls: ['./top-page.component.css']
})
export class TopPageComponent implements OnInit {

  constructor(private settings: AppConfig) { 
    // undefined
    console.log("constructor " + settings.settings.message);
  }

  ngOnInit() {
    // undefined
    console.log("nginit " + settings.settings.message);
  }
  executeSomeEvent(){
    // OK
    console.log("event " + settings.settings.message);
  }
}

By the provider, loaded the config file first, and then, components' constructors and ngOnInit were called.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule }    from '@angular/common/http';
import { AppComponent } from './app.component';
import { TopPageComponent } from './top-page/top-page.component';
import { AppConfig } from './app-config.service';

export function initializeApp(settings: AppConfig) {
  return () => settings.load();
}
@NgModule({
  declarations: [
    AppComponent,
    TopPageComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
         useFactory: initializeApp,
         deps: [AppConfig], multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Providers - Angular

Add compatibility of IE11

Show page on IE11

By default, IE11 couldn't show the page of Angular.
According to the issue below, I modified some files.
ng serve/test/e2e does not work with Internet Explorer 11 - Issue #14455 - angular/angular-cli - GitHub

I met a problem because I had not understand I must write my project's name at serve block in angular.json.

angular.json (failed)

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "app:build:es5"
    }
  }
},

angular.json (OK)

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "product-sample:build:es5"
    }
  }
},

I also added the serve command for IE to package.json's scripts.

package.json

{
  "name": "product-sample",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "ngs": "ng serve --configuration es5"
  },
  ...

Use CSS Grid layout

Angular added compatibility of many CSS functions(ex. Flexbox).
But the Grid layout might not be used by default.

top-page.component.html

<div id="grid-frame">
    <div class="cell-title" id="cell-title-1">cell1</div>
    <div class="cell-body" id="cell-body-1">hello</div>
    <div class="cell-title" id="cell-title-2">cell2</div>
    <div class="cell-body" id="cell-body-2">World</div>
</div>

top-page.component.css

#grid-frame{
    height: 30%;
    width: 90%;
    display: grid;
    grid-template-columns: 10% 10%;
    grid-template-rows: 15% 85%;
}
.cell-title{
    background-color: aliceblue;
    border: solid 1px #000000;
    height: 100%;
    width: 100%;
}
.cell-body{
    border: solid 1px #000000;
    height: 100%;
    width: 100%;
}
#cell-title-1{
    grid-column: 1;
    grid-row: 1;
}
#cell-title-2{
    grid-column: 2;
    grid-row: 1;
}
#cell-body-1{
    grid-column: 1;
    grid-row: 2;
}
#cell-body-2{
    grid-column: 2;
    grid-row: 2;
}

The results of Firefox and IE11.

Firefox

IE11

Autoprefixer was used in Augular. But the setting for using Grid layout was missed.
So I had to add it.

top-page.component.css

/* autoprefixer grid: autoplace */
#grid-frame{
    height: 30%;
    width: 90%;
    display: grid;
    grid-template-columns: 10% 10%;
    grid-template-rows: 15% 85%;
}
...

Building and serving Angular apps - Angular

A problem had still been here.
"grid-column" and "grid-row" were ignored by IE11.


So I had to modify the HTML.

top-page.component.html (before)

<div id="grid-frame">
    <div class="cell-title" id="cell-title-1">cell1</div>
    <div class="cell-body" id="cell-body-1">hello</div>
    <div class="cell-title" id="cell-title-2">cell2</div>
    <div class="cell-body" id="cell-body-2">World</div>
</div>

top-page.component.html (after)

<div id="grid-frame">
    <!-- title cells -> body cells -->
    <div class="cell-title" id="cell-title-1">cell1</div>
    <div class="cell-title" id="cell-title-2">cell2</div>
    <div class="cell-body" id="cell-body-1">hello</div>
    <div class="cell-body" id="cell-body-2">World</div>
</div>

I also wanted to use CSS variables. But I hadn't understand how to set for Autoprefixer yet.
Next time, I will add some components.