platform browser check

Author: SAINIAbhishek

README.md

@@ -20,6 +20,7 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 - Named and multiple router outlets
 - Migrate to Angular 11
 - Migrate tslint to esLint
+- Migrate to Angular 12
 
 ## Unit Tests
 

angular.json

@@ -31,6 +31,7 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
+            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets",
@@ -41,13 +42,7 @@
               "./node_modules/ngx-toastr/toastr.css",
               "src/styles.scss"
             ],
-            "scripts": [],
-            "vendorChunk": false,
-            "extractLicenses": true,
-            "buildOptimizer": true,
-            "sourceMap": true,
-            "optimization": true,
-            "namedChunks": true
+            "scripts": []
           },
           "configurations": {
             "production": {
@@ -63,7 +58,7 @@
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
-              "localize": true,
+              "localize": false,
               "budgets": [
                 {
                   "type": "initial",

server.ts

@@ -80,7 +80,7 @@ export function app() {
     }, (err, html) => {
       if (err) {
         console.error(err);
-        res.send('An error occured: ' + err.message);
+        res.send('An error occurred: ' + err.message);
       }
       return res.send(html);
     });

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import {BrowserModule, BrowserTransferStateModule} from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {Inject, NgModule, PLATFORM_ID} from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -16,6 +16,7 @@ import {TranslateResources} from './translate-resources';
 import {StrengthPipe} from './pipes/strength/strength.pipe';
 import {ToastrModule} from 'ngx-toastr';
 import {ApiUrlInterceptor} from './interceptors/api-url.interceptor';
+import {isPlatformBrowser} from '@angular/common';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient) {
@@ -56,8 +57,15 @@ export function HttpLoaderFactory(http: HttpClient) {
 })
 export class AppModule {
 
-  constructor(private _translateService: TranslateService) {
-    const lang = localStorage.getItem('lang') || 'en';
+  constructor(@Inject(PLATFORM_ID) protected platformId: object,
+              private _translateService: TranslateService) {
+
+    let lang = 'en';
+
+    if (isPlatformBrowser(this.platformId)) {
+      lang = localStorage.getItem('lang') || 'en';
+    }
+
     this._translateService.addLangs(['en', 'fr']);
     this._translateService.setDefaultLang('en');
     this._translateService.use(lang);

src/app/modules/header/header.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Inject, OnInit, PLATFORM_ID} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
+import {isPlatformBrowser} from '@angular/common';
 
 @Component({
   selector: 'app-header',
@@ -14,16 +15,20 @@ export class HeaderComponent implements OnInit {
 
   private _selectedLang = this._translateService.currentLang || 'en';
 
-  constructor(private _translateService: TranslateService) { }
+  constructor(@Inject(PLATFORM_ID) protected platformId: object,
+              private _translateService: TranslateService) { }
 
   ngOnInit(): void {
   }
 
   public changeLang(event: Event, lang: string) {
     event.preventDefault();
-    this._selectedLang = lang;
-    localStorage.setItem('lang', this._selectedLang);
-    this._translateService.use(this._selectedLang);
+
+    if (isPlatformBrowser(this.platformId)) {
+      this._selectedLang = lang;
+      localStorage.setItem('lang', this._selectedLang);
+      this._translateService.use(this._selectedLang);
+    }
   }
 
 }