Description

BePo65

opened on Oct 13, 2020

Issue body actions

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/*"]
    }
      :

3. modify main.ts to use paths defined in tsconfig.json

      :
import { AppModule } from '@app/app.module';
import { environment } from '@env/environment';
      :

4. 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

Reacted by Maxime Ailloud

Activity

1. maxailloud commented on Nov 20, 2020

   

   maxailloud

   on Nov 20, 2020

   More actions

   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.
2. Splaktar commented on Feb 22, 2021

   

   Splaktar

   on Feb 22, 2021

   Contributor

   More actions

   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
3. Splaktar commented on Feb 22, 2021

   

   Splaktar

   on Feb 22, 2021

   Contributor

   More actions

   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.

   Reacted by Bernhard P.
4. 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[/+] on Feb 22, 2021
5. Splaktar

   transferred this issue fromangular/componentson Feb 22, 2021
6. Splaktar

   added

   area: @angular-devkit/schematics

   on Feb 22, 2021
7. ngbot

   added this to the needsTriage milestone on Feb 22, 2021
8. Splaktar

   added

   hotlist: angular material

   type: bug/fix

   on Feb 22, 2021
9. alan-agius4 commented on Feb 22, 2021

   

   alan-agius4

   on Feb 22, 2021

   Collaborator

   More actions

   Duplicate of #12740
10. alan-agius4

    marked this as a duplicate of ng add fails to find app.module.ts when using custom tsconfig.json paths #12740 on Feb 22, 2021
11. alan-agius4

    closed this as completedon Feb 22, 2021
12. angular-automatic-lock-bot commented on Mar 25, 2021

    

    angular-automatic-lock-botBot

    on Mar 25, 2021

    More actions

    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.}
13. angular-automatic-lock-bot

    locked and limited conversation to collaborators on Mar 25, 2021

Issue actions