angular / angular/angular-cli

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

Đang mở
#12,740 11 bình luận 12 reaction 0 người được giao Xem trên GitHub
area: @schematics/angular freq1: low severity3: broken type: bug/fix
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

### 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](https://github.com/seangwright/ng-cli-add-error-with-tsconfig-paths).
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'`?

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với packages/schematics/angular/utility/ng-ast-utils.ts, sau đó so sánh cách setup-project.ts của material2 sử dụng đường dẫn app.module.ts đã được tính toán. Tái hiện lỗi với repository được liên kết bằng cách chạy ng add @angular/material sau khi cấu hình các path trong tsconfig.json. Hoàn tất khi lệnh định vị module thành công trong trường hợp main.ts import module đó thông qua @app/app.module.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
cli, tooling
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.