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

未关闭
#12,740 11 条评论 12 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
35/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
停滞
技术栈
angular, typescript
领域
cli, tooling

调研方向

从 packages/schematics/angular/utility/ng-ast-utils.ts 开始,然后比较 material2 的 setup-project.ts 如何使用计算出的 app.module.ts 路径。配置 tsconfig.json 路径后,运行 ng add @angular/material,以使用链接的仓库重现该故障。当 main.ts 通过 @app/app.module 导入该模块时,命令能够成功定位该模块,即表示完成。

由索引模型根据 Issue 内容生成。

描述

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

主要语言
TypeScript
星标
27k
派生
11.8k
平均合并
16 小时 35 分钟
30 天内合并 PR
176

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

angular/angular-cli 的其他 Issue

查看 angular/angular-cli 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。