Angular12Guide

This guide was created in Angular 12 but as of november 9 2021 it should now work also on Angular 13, only replace @angular-builders/custom-webpack@12.1.3 with @angular-builders/custom-webpack.

In this example we were suppose an angular project name like: acme-web, required port 2000 and a variables file called: settings.json

1. First create a new project: ng new acme-web

2. Then run: npm i -D @angular-builders/custom-webpack@12.1.3

3. Run: npm install https://github.com/nodeboot/advanced-settings --save-dev

4. Create a custom-webpack.config.js

const EnvSettings = require("advanced-settings").EnvSettings;
const envSettings = new EnvSettings();

const options = {
  devServer: {
    before: (devServer) => {
      if (!devServer) {
        throw new Error("webpack-dev-server is not defined");
      }

      devServer.get("/settings.json", function (req, res) {
        const settings = envSettings.loadJsonFileSync("./settings.json");
        res.json(settings);
      });
    },
  },
};

module.exports = options;

5. In your angular.json file add/replace:

"architect": {

        "build": {
            "builder": "@angular-builders/custom-webpack:browser",
        },
        "options": {
            "customWebpackConfig": {
                "path": "./custom-webpack.config.js"
            }
        },
}

"serve": {
      "options": {
          "browserTarget": "build"
      },
      "builder": "@angular-builders/custom-webpack:dev-server",
}

6. Modify your main.ts to look like:

import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";

fetch("/settings.json")
  .then((response) => response.json())
  .then((config) => {
    if (environment.production) {
      enableProdMode();
    }

    environment.url = config.serviceUrl;

    platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .catch((err) => console.error(err));
  })
  .catch((error) => {
    console.log(error);

    platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .catch((err) => console.error(err));
  });

7. Finally modify your package.json scripts to look like:

  "scripts": {
    "ng": "ng",
    "dev": "ng serve",
    "start": "nodeboot-spa-server dist/acme-web -s settings.json -p 2000 --allow-routes",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },