Làm thế nào để tránh nhập với đường dẫn tương đối rất dài trong Angular 2?

Question 1

Làm thế nào tôi có thể giới thiệu một cái gì đó như 'my-app-name/services'để tránh các dòng như nhập khẩu sau đây?

import {XyService} from '../../../services/validation/xy.service';

Question 2

TypeScript 2.0+

Trong TypeScript 2.0, bạn có thể thêm một baseUrlthuộc tính trong tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": "."
        // etc...
    },
    // etc...
}

Sau đó, bạn có thể nhập mọi thứ như thể bạn đang ở trong thư mục cơ sở:

import {XyService} from "services/validation/xy.service";

Trên hết, bạn có thể thêm một thuộc pathstính, cho phép bạn khớp một mẫu sau đó vạch ra nó. Ví dụ:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "services/*": [
                "services/validation/*"
            ]
        }
        // etc...
    },
    // etc...
}

Điều này sẽ cho phép bạn nhập nó từ bất cứ đâu như vậy:

import {XyService} from "services/xy.service";

Từ đó, bạn sẽ cần phải định cấu hình bất kỳ trình tải mô-đun nào bạn đang sử dụng để hỗ trợ các tên nhập này. Ngay bây giờ, trình biên dịch TypeScript dường như không tự động vạch ra những thứ này.

Bạn có thể đọc thêm về điều này trong vấn đề github . Ngoài ra còn có một thuộc rootDirstính hữu ích khi sử dụng nhiều dự án.

Pre TypeScript 2.0 (Vẫn áp dụng trong TS 2.0+)

Tôi thấy nó có thể được thực hiện dễ dàng hơn bằng cách sử dụng "thùng" .

Trong mỗi thư mục, hãy tạo một index.tstệp.
Trong các tệp này, hãy xuất lại từng tệp trong thư mục.

Thí dụ

Trong trường hợp của bạn, trước tiên hãy tạo một tệp có tên my-app-name/services/validation/index.ts. Trong tệp này, có mã:

export * from "./xy.service";

Sau đó, tạo một tệp có tên my-app-name/services/index.tsvà có mã này:

export * from "./validation";

Bây giờ bạn có thể sử dụng dịch vụ của mình như vậy ( indexngụ ý):

import {XyService} from "../../../services";

Và khi bạn có nhiều tệp trong đó, việc này thậm chí còn dễ dàng hơn:

import {XyService, MyOtherService, MyOtherSerivce2} from "../../../services";

Việc phải duy trì các tệp bổ sung này sẽ tốn nhiều công sức hơn một chút (công việc có thể được loại bỏ bằng cách sử dụng người bảo trì thùng ), nhưng tôi thấy rằng cuối cùng nó cũng được đền đáp với ít công việc hơn. Việc thay đổi cấu trúc thư mục chính dễ dàng hơn nhiều và nó cắt giảm số lần nhập mà bạn phải thực hiện.

Thận trọng

Khi làm điều này, có một số điều bạn phải chú ý và không thể làm:

Bạn phải theo dõi các lần tái xuất theo vòng tròn. Vì vậy, nếu các tệp trong hai thư mục con tham chiếu lẫn nhau, thì bạn sẽ cần sử dụng đường dẫn đầy đủ.
Bạn không nên quay lại một thư mục từ cùng một thư mục gốc (ví dụ: đang ở trong một tệp trong thư mục xác thực và thực hiện import {XyService} from "../validation";). Tôi đã tìm thấy điều này và điểm đầu tiên có thể dẫn đến lỗi nhập không được xác định.
Cuối cùng, bạn không thể có hai bản xuất trong một thư mục con có cùng tên. Thường thì đó không phải là một vấn đề.

Question 3

Tốt hơn nên sử dụng cấu hình bên dưới trong tsconfig.json

{
  "compilerOptions": {
    "...": "reduced for brevity",

    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"]
    }
  }
}

Cách truyền thống trước Angular 6:

`import {XyService} from '../../../services/validation/xy.service';`

nên được cấu trúc lại thành:

import {XyService} from '@app/services/validation/xy.service

Ngắn và ngọt!

Question 4

Tôi vừa xem qua câu hỏi này. Tôi biết bây giờ đã trở lại nhưng đối với bất kỳ ai xem qua nó thì có một câu trả lời đơn giản hơn.

Tôi xem qua chỉ vì điều gì đó tôi đã làm trong một thời gian dài ngừng hoạt động và tôi đang tự hỏi liệu có gì đó đã thay đổi trong Angular 7. Không, đó chỉ là mã của riêng tôi.

Bất kể tôi chỉ phải thay đổi một dòng tsconfig.jsonđể tránh các đường dẫn nhập dài.

{
  "compilerOptions": {
  "...": "simplified for brevity",

   "baseUrl": "src"
  }
}

Thí dụ:

// before:
import {XyService} from '../../../services/validation/xy.service';

// after:
import { XyService } from 'app/services/validation/xy.service';

Điều này đã làm việc cho tôi khá nhiều kể từ khi Angular-CLI xuất hiện.