Use of common libraries in Angular

[shard2001]

Which @angular/* package(s) are relevant/related to the feature request?

compiler-cli

Description

I have asked this question on Stack Overflow and got an answer, but feel it could be done better, or I am fundamentally misunderstanding something

We have 2 applications in Angular which both need some common code. The applications will be kept in step with each other in terms of versions. My first attempt at doing this involved having a common library and two applications in the same workspace, but I really want separation of code, I don't want code from one application getting into the other or the common library, I also want to avoid the appearance of that via Visual Studio intellisense

The second attempt was to have a workspace per app and one for the common library. That worked better as now Visual Studio doesn't show paths from one App in the other. I use "npm install "file://..." to create a link between the two. The version number won't change, it won't be published

The problem here was that I have to switch off angular caching as otherwise changes in the common library weren't getting built into the application

Ultimately I just want a solution that is as simple as what you would do in C#, have 3 standalone projects with explicit references between them

Proposed solution

A solution that would work for me would be a flag that disabled caching for individual npm file link packages, I suspect there are better answers though

Alternatives considered

Putting the 2 apps and common code in the same workspace. Or using some typescript/copy paste type solution

[alan-agius4]

You do not need to disable caching, what you need to disable is prebundling for that particular library.

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "development": {
      "buildTarget": "repro-app:build:development",
      "prebundle": {
        "exclude": ["example-library"]
      }
    },
    "production": {
      "buildTarget": "repro-app:build:production"
    }
  },
  "defaultConfiguration": "development"
}

[shard2001]

"prebundle": { "exclude": ["example-library"] }

Visual Studio doesn't show this as a valid option in the library's angular.json, it is in the applications angular.json

It does build ok, so that may just be intellisense, but it still seems to have the same issue with caching, assuming I'm putting it in the right place

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "@myproj-base/main": {
      "projectType": "library",
      "root": "projects/myproj-base/main",
      "sourceRoot": "projects/myproj-base/main/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/myproj-base/main/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/myproj-base/main/tsconfig.lib.prod.json"
            },
            "development":
            {
              "tsConfig": "projects/myproj-base/main/tsconfig.lib.json",
              "prebundle":
              {
                "exclude":
                [
                  "example-library"
                ]
              }
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "tsConfig": "projects/myproj-base/main/tsconfig.spec.json",
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ]
          }
        }
      }
    }
  }
}

[alan-agius4]

The option needs to be set in the "serve" section of application project.