@nowant/ng-build-expander

Expands the Angular Workspace targets!

Usage no npm install needed!

<script type="module">
  import nowantNgBuildExpander from 'https://cdn.skypack.dev/@nowant/ng-build-expander';
</script>

README

ng-build-expander: expand your workspace from another one

ng-build-expander is an Angular build expander that allows you to conveniently expand your current workspace (angular.json) from another one. There are build, serve, extract-i18n, and test targets available.

Getting started

Install correct dependency versions

Requirements:

  • Make sure you have yarn available on your system;
  • Use Angular >=11.0.7;
  • Use Webpack >=5.18.0.

How to use

Please, carefully read following instructions below to configure ng-build-expander:

  1. Create two Angular projects using the CLI: app1 and app2
  2. Go to app1 project, create /projects directory and move app2 project there.
  3. Go to app1 root directory and install ng-build-expander using following command: yarn add @nowant/ng-build-expander
  4. Open app1 angular.json and include app2 project in projects to expand its options, like so:
{
  ...
  "projects": {
    ...
     "app2": {
      "projectType": "application",
      "schematics": {},
      "root": "packages/app2",
      "sourceRoot": "packages/app2/src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@nowant/ng-build-expander:browser",
          "configurations": {
            "production": {}
          }
        },
        "serve": {
          "builder": "@nowant/ng-build-expander:dev-server",
          "options": {
            "port": 4202
          },
          "configurations": {
            "production": {}
          }
        },
        "extract-i18n": {
          "builder": "@nowant/ng-build-expander:extract-i18n"
        },
        "test": {
          "builder": "@nowant/ng-build-expander:karma"
        },
        ...
      }
    }
  }
}
  1. Now you're able to run following commands from app1 root directory:

Build commands:

  • ng run app2:build
  • ng run app2:build --configuration=production

Serve commands:

  • ng run app2:serve
  • ng run app2:serve --configuration=production

Extract i18n commands:

  • ng run app2:extract-i18n

Test commands:

  • ng run app2:test
  1. Have fun ;)

Webpack version-specific issues

If you can't install webpack>=5.0.0:

  • Remove node_modules, yarn.lock, package-lock.json

  • Add following to your package.json:

    "resolutions": {
  "webpack": "^5.0.0"
}

  • yarn install