Thanks to visit codestin.com
Credit goes to github.com

Skip to content

angular-devkit/schematics: Tree.read() returns null when tsconfig.json contains path mappings #20118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
BePo65 opened this issue Oct 13, 2020 · 5 comments
Closed

angular-devkit/schematics: Tree.read() returns null when tsconfig.json contains path mappings #20118

BePo65 opened this issue Oct 13, 2020 · 5 comments
Labels
area: @angular-devkit/schematics hotlist: angular material type: bug/fix
Milestone
needsTriage

Comments

@BePo65
Copy link

BePo65 commented Oct 13, 2020

I getvthe following error in my application (with about 10 modules). To isolate the root cause I created a minimal angular app that shows the effect.

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue

Steps to reproduce:

  1. generate new angular project ng new test-app --defaults=true --routing=false --style=scss
  2. add paths to tsconfig.json
      :
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@lib/*": ["hacks/private-libs/*"],
      "@app/*": ["app/*"],
      "@env/*": ["environments/*"],
      "@config/*": ["app/config/*"],
      "@shared/*": ["app/shared/*"]
    }
      :
  1. modify main.ts to use paths defined in tsconfig.json
      :
import { AppModule } from '@app/app.module';
import { environment } from '@env/environment';
      :
  1. add @angular/material using ng add @angular/material

Expected Behavior

ng add @angular/material resolves import paths using paths definition in tsconfig.json

Actual Behavior

error:

Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.i
o?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1343 bytes)
√ Packages installed successfully.
Could not read Angular module file: /src/@app/app.module.ts

Environment

  • Angular: tried V9.1 and V10
  • CDK/Material:
  • Browser(s): --
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 10
@maxailloud
Copy link

I got the same error.
Is there a little workaround in the meantime? At least to be able to install the package properly and not having to finish it manually.

@Splaktar
Copy link
Contributor

These reproduction steps didn't work for me in a ng new project. I had to use the following:

    "paths": {
      "@lib/*": ["hacks/private-libs/*"],
      "@app/*": ["src/app/*"],
      "@env/*": ["src/environments/*"],
      "@config/*": ["src/app/config/*"],
      "@shared/*": ["src/app/shared/*"]
    }

However, this issue is reproducible:

$ ng add @angular/material
ℹ Using package manager: npm
✔ Found compatible package version: @angular/material@11.2.1.
✔ Package information loaded.
✔ Package successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1264 bytes)
✔ Packages installed successfully.
Could not read Angular module file: /src/@app/app.module.ts

@Splaktar
Copy link
Contributor

The issue here is that we call .read() on Tree from '@angular-devkit/schematics' and that returns null if the tsconfig.json has these paths defined.

https://github.com/angular/components/blob/b4d28385ee29f17268547954c803b9380411872e/src/cdk/schematics/utils/ast/ng-module-imports.ts#L16-L20

I don't see an open issue for this in the angular-cli repo, so I'm going to transfer this one over.

@Splaktar Splaktar changed the title bug(ng add @angular/material): Could not read Angular module file with path in tsconfig.json angular-devkit/schematics: Tree.read() returns null when tsconfig.json contains path mappings Feb 22, 2021
@Splaktar Splaktar transferred this issue from angular/components Feb 22, 2021
@ngbot ngbot bot added this to the needsTriage milestone Feb 22, 2021
@alan-agius4
Copy link
Collaborator

Duplicate of #12740

@alan-agius4 alan-agius4 marked this as a duplicate of #12740 Feb 22, 2021
@Splaktar Splaktar mentioned this issue Feb 22, 2021
Open
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 25, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: @angular-devkit/schematics hotlist: angular material type: bug/fix
Projects
None yet
Milestone
needsTriage
Development

No branches or pull requests
4 participants
@maxailloud @Splaktar @BePo65 @alan-agius4