Skip to content

Bug: Angular application builder cannot resolve tsconfig.json path mappings #31395

@sumeyyeKurtulus

Description

@sumeyyeKurtulus

Command

update

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hello team,
We are facing a small problem once we need to give a path reference for a package installed in the node_modules as shown below:

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@angular/*": ["./node_modules/@angular/*"]
    }
  },
}

However, it throws such an injection error as I mentioned below.

The Angular CLI version we use is 20.3.4
It also installs the same version 20.3.4 for @angular-devkit

Here is our angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "path-config-problem": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "browser": "src/main.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.scss"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "4kB",
                  "maximumError": "8kB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular/build:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "path-config-problem:build:production"
            },
            "development": {
              "buildTarget": "path-config-problem:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular/build:extract-i18n"
        },
        "test": {
          "builder": "@angular/build:karma",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.scss"
            ]
          }
        }
      }
    }
  }
}

This error occurred after we migrated our templates to use the latest builder system, as outlined in the official guide: [Angular Build System Migration](https://angular.dev/tools/cli/build-system-migration#automated-migration-recommended).

Our project structure relies on shared references to packages installed in the main application. In short, we have several library-like modules that are consumed by the main app. These modules sometimes depend on the same packages used by the main Angular application, and we want to avoid installing duplicate dependencies within each module.

To achieve this, we use the path configuration in the tsconfig.json file to reference the packages from the main application directly.

I have also checked these issues, however those did not help:
#27495
#26901

Minimal Reproduction

You can find a minimal reproducible example here path-config-problem

Exception or Error

ERROR Error: NG0203: The `EnvironmentInjector` token injection failed. `inject()` function must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://v20.angular.dev/errors/NG0203
    Angular 32
chunk-SYJERPFC.js:2162:19
Error: NG0203: The `EnvironmentInjector` token injection failed. `inject()` function must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://v20.angular.dev/errors/NG0203
    Angular 32
main.js:35784:61

Your Environment

ng version


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    


Angular CLI: 20.3.4
Node: 22.16.0
Package Manager: npm 10.9.2
OS: darwin arm64
    

Angular: 20.3.3
... common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------
@angular-devkit/architect    0.2003.4
@angular-devkit/core         20.3.4
@angular-devkit/schematics   20.3.4
@angular/build               20.3.4
@angular/cli                 20.3.4
@schematics/angular          20.3.4
rxjs                         7.8.2
typescript                   5.9.3

Anything else relevant?

This problem does not rely on any other detail. However, if you need further details about how we use this approach, we can give more information.

Thank you for your consideration.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions