Angular工作区配置：统一库导入路径并实现实时重载

1. Root tsconfig.json Configuration #

Add path mappings to resolve library package names directly to their source files during development. This lets you use import {x} from lib-1 while working with uncompiled library code.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "lib": ["es2020", "dom"],
    // Map library package names to their source public API
    "paths": {
      "lib-1": ["projects/lib-1/src/public-api.ts"],
      "lib-2": ["projects/lib-2/src/public-api.ts"],
      "lib-wrapper": ["projects/lib-wrapper/src/public-api.ts"]
    }
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

2. tsconfig.app.json Configuration #

Override path mappings for production builds to force resolution from node_modules instead of source files.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    // Clear path mappings to use installed library versions
    "paths": {}
  },
  "files": ["src/main.ts", "src/polyfills.ts"],
  "include": ["src/**/*.d.ts"]
}

3. Library tsconfig.lib.json Configurations #

For libraries that depend on other workspace libraries (like lib-wrapper relying on lib-1 and lib-2), add path mappings in their respective tsconfig.lib.json to resolve dependencies from source:

projects/lib-wrapper/tsconfig.lib.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2020",
    "declaration": true,
    "declarationMap": true,
    "inlineSources": true,
    "types": [],
    "lib": ["es2020", "dom"],
    // Map dependent libraries to their source files
    "paths": {
      "lib-1": ["../../lib-1/src/public-api.ts"],
      "lib-2": ["../../lib-2/src/public-api.ts"]
    }
  },
  "exclude": ["src/test.ts", "**/*.spec.ts"]
}

Repeat this pattern for any other library with workspace dependencies.

4. angular.json Build & Serve Configuration #

Configure separate profiles for development (source-based) and production (installed library-based), and set up serve to watch library files for hot reload.

Build Target #

Add a development configuration that uses the root tsconfig.json (source paths), while production uses tsconfig.app.json:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/your-app-name",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json", // Default to production config
    "assets": ["src/favicon.ico", "src/assets"],
    "styles": ["src/styles.css"],
    "scripts": []
  },
  "configurations": {
    "production": {
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "500kb",
          "maximumError": "1mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "2kb",
          "maximumError": "4kb"
        }
      ],
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "outputHashing": "all"
    },
    "development": {
      "tsConfig": "tsconfig.json", // Use source path mappings
      "buildOptimizer": false,
      "optimization": false,
      "vendorChunk": true,
      "extractLicenses": false,
      "sourceMap": true,
      "namedChunks": true
    }
  },
  "defaultConfiguration": "production"
}

Serve Target #

Configure serve to use the development build profile and watch library files for hot reload:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-app-name:build:development",
    "watchOptions": {
      "include": ["projects/**/*"] // Watch library source files for changes
    }
  },
  "configurations": {
    "production": {
      "browserTarget": "your-app-name:build:production"
    }
  }
}

5. Production Build Preparation #

Before building the app for production:

1. Build all workspace libraries in dependency order:

   ng build lib-1
   ng build lib-2
   ng build lib-wrapper
   

2. Add local dependencies to your root package.json to link built libraries to node_modules:

   "dependencies": {
     // ... other dependencies
     "lib-1": "file:dist/lib-1",
     "lib-2": "file:dist/lib-2",
     "lib-wrapper": "file:dist/lib-wrapper"
   }
   

3. Run npm install to create symlinks from node_modules to the built library folders.

How It Works #

• Development: Running ng serve uses the root tsconfig.json path mappings to load library source files. Changes to any library code trigger automatic hot reload.
• Production: Running ng build uses tsconfig.app.json (no path mappings), so it resolves libraries from node_modules (the pre-built versions you prepared).

Content of the question来源于stack exchange，提问作者Edo2610