Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
#12,740 11 comentarios 12 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
angular, typescript
Área
cli, tooling

Línea de trabajo

Comienza con packages/schematics/angular/utility/ng-ast-utils.ts y compara después cómo setup-project.ts de material2 consume la ruta calculada de app.module.ts. Reproduce el fallo con el repositorio enlazado ejecutando ng add @angular/material después de configurar las rutas de tsconfig.json. La tarea está terminada cuando el comando localiza correctamente el módulo al importarlo main.ts mediante @app/app.module.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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'?

Lenguaje dominante
TypeScript
Estrellas
27k
Forks
11.8k
Merge medio
16 h 35 min
PR fusionados (30 d)
176

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/angular-cli

Todos los issues de angular/angular-cli

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.