Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

ng add fails to find app.module.ts when using custom tsconfig.json paths

Ouverte
#12,740 11 commentaires 12 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
35/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
À l'abandon
Stack technique
angular, typescript
Domaine
cli, tooling

Piste de recherche

Commencez par packages/schematics/angular/utility/ng-ast-utils.ts, puis comparez la manière dont setup-project.ts de material2 utilise le chemin calculé vers app.module.ts. Reproduisez l’échec avec le dépôt lié en exécutant ng add @angular/material après avoir configuré les chemins de tsconfig.json. C’est terminé lorsque la commande localise correctement le module lorsque main.ts l’importe via @app/app.module.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

area: @schematics/angular freq1: low severity3: broken type: bug/fix
Bug Report or Feature Request (mark with an x)
- [X ] bug report -> please search issues before submitting
- [X ] feature request

Whether this is a bug or a feature depends on whether or not custom paths in tsconfig.json are supported with the Cli.

Command (mark with an x)
- [X ] add
Versions

Angular CLI: 7.0.2
Node: 10.8.0
OS: win32 x64
Angular: 7.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Repro steps
  • ng new app-name (pick defaults)
  • Add "paths": { "@app/*": ["src/app/*"] } to tsconfig.json
  • Update main.ts to use this new path
    import { AppModule } from '@app/app.module';
    import { environment } from './environments/environment';
  • ng add @angular/material
  • Select Yes for ? Set up browser animations for Angular Material?

Repository all set up to reproduce this error is available here.
Just clone and type ng add @angular/material.

The log given by the failure

Could not read Angular module file: /src/@app/app.module.ts

Desired functionality

Cli handles custom paths in tsconfig.json.

Mention any other details that might be useful

Here is where material tries to get the app.module.ts path
https://github.com/angular/material2/blob/985774a4eaa14d1dcbf1ad96ab176043d38f433e/src/lib/schematics/ng-add/setup-project.ts#L56

Here is where the path to app.module.ts is being calculated in the schematics code
https://github.com/angular/angular-cli/blob/82f2bda2f59e4665611d1a75b51a62bae21ac340/packages/schematics/angular/utility/ng-ast-utils.ts#L78

I believe the above link is what is causing the problem.

I've always preferred absolute urls in Angular apps compared to the relative paths (which become very difficult to read for nested components).

Adding custom paths to tsconfig.json works pretty well to solve this problem. VSCode works fine with it and the Cli has no other issues I've run into.

If using paths isn't officially supported does the Angular team recommend using relative paths like import { MyApiService } from '../../../../../my-api.service'?

Langage dominant
TypeScript
Étoiles
27k
Forks
11.8k
Merge moyen
17 h 25 min
PR mergées (30 j)
183

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de angular/angular-cli

Toutes les issues de angular/angular-cli

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.