configure base herf with env vairables

Author: jojozhuang

package.json

@@ -14,12 +14,12 @@
     "start:render": "ng serve --configuration render",
     "start:pages": "ng serve --configuration pages",
     "start:nas": "ng serve --configuration nas",
-    "start:mock": "node server.js",
+    "start:server": "node server.js",
     "build": "ng build --configuration production",
     "build:azure": "ng build --configuration azure",
     "build:netlify": "ng build --configuration netlify",
     "build:render": "ng build --configuration render",
-    "build:pages": "ng build --configuration pages --base-href /text-compare-angular/ --deploy-url /text-compare-angular/",
+    "build:pages": "ng build --configuration pages",
     "build:nas": "ng build --configuration nas",
     "build:cross:env": "rimraf dist compiled && cross-env SOURCE_MAP=0 ng build --configuration production",
     "test": "ng test",

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { APP_BASE_HREF } from '@angular/common';
 
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
@@ -12,6 +13,7 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 
 // routes
 import { AppRoutingModule } from './app-routing.module';
+import { environment } from '../environments/environment';
 
 @NgModule({
   declarations: [
@@ -26,10 +28,10 @@ import { AppRoutingModule } from './app-routing.module';
     FormsModule,
     AppRoutingModule,
     MonacoEditorModule.forRoot({
-      baseUrl: '/text-compare-angular/assets/monaco/min/vs'
+      baseUrl: environment.monacoBaseUrl
     })
   ],
-  providers: [],
+  providers: [{ provide: APP_BASE_HREF, useValue: environment.baseHref }],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/header/header.component.ts

@@ -14,6 +14,6 @@ export class HeaderComponent implements OnInit {
   protected router = inject(Router);
 
   ngOnInit() {
-    this.envName = environment.env_name;
+    this.envName = environment.envName;
   }
 }

src/environments/environment.azure.ts

@@ -1,4 +1,6 @@
 export const environment = {
   production: true,
-  env_name: 'Azure'
+  envName: 'Azure',
+  baseHref: '/',
+  monacoBaseUrl: '/assets/monaco/min/vs'
 };

src/environments/environment.nas.ts

@@ -1,4 +1,6 @@
 export const environment = {
   production: true,
-  env_name: 'Nas'
+  envName: 'Nas',
+  baseHref: '/',
+  monacoBaseUrl: '/assets/monaco/min/vs'
 };

src/environments/environment.netlify.ts

@@ -1,4 +1,6 @@
 export const environment = {
   production: true,
-  env_name: 'Netlify'
+  envName: 'Netlify',
+  baseHref: '/',
+  monacoBaseUrl: '/assets/monaco/min/vs'
 };

src/environments/environment.pages.ts

@@ -1,4 +1,6 @@
 export const environment = {
   production: true,
-  env_name: 'GitHub Pages'
+  envName: 'GitHub Pages',
+  baseHref: '/text-compare-angular/',
+  monacoBaseUrl: '/assets/monaco/min/vs'
 };

src/environments/environment.prod.ts

@@ -1,4 +1,6 @@
 export const environment = {
   production: true,
-  env_name: 'Production'
+  envName: 'Production',
+  baseHref: '/',
+  monacoBaseUrl: '/assets/monaco/min/vs'
 };

src/environments/environment.render.ts

@@ -1,4 +1,6 @@
 export const environment = {
   production: true,
-  env_name: 'Render'
+  envName: 'Render',
+  baseHref: '/',
+  monacoBaseUrl: '/assets/monaco/min/vs'
 };

src/environments/environment.ts

@@ -5,5 +5,7 @@
 
 export const environment = {
   production: false,
-  env_name: 'Local'
+  envName: 'Local',
+  baseHref: '/',
+  monacoBaseUrl: '/assets/monaco/min/vs'
 };