Angular 2에서 상대 경로가 매우 긴 가져 오기를 피하는 방법은 무엇입니까?

Angular 2에서 상대 경로가 매우 긴 가져 오기를 피하는 방법은 무엇입니까?

---

'my-app-name/services'다음 가져 오기와 같은 줄을 피하는 것과 같은 것을 어떻게 도입 할 수 있습니까?

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

---

TypeScript 2.0 이상

TypeScript 2.0에서는 다음 위치에 baseUrl속성을 추가 할 수 있습니다 tsconfig.json.

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

그런 다음 기본 디렉토리에있는 것처럼 모든 것을 가져올 수 있습니다.

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

paths여기에 패턴을 일치시킨 다음 매핑 할 수있는 속성을 추가 할 수 있습니다 . 예를 들면 :

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

다음과 같이 어디에서나 가져올 수 있습니다.

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

거기에서 이러한 가져 오기 이름을 지원하기 위해 사용중인 모듈 로더를 구성해야합니다. 지금은 TypeScript 컴파일러가 자동으로 매핑하지 않는 것 같습니다.

이에 대한 자세한 내용은 github 문제를 참조하십시오 . rootDirs여러 프로젝트를 사용할 때 유용한 속성 도 있습니다.

Pre TypeScript 2.0 (TS 2.0+에서도 여전히 적용 가능)

"배럴" 을 사용하면 더 쉽게 만들 수 있다는 것을 알았습니다 .

1. 각 폴더에서 index.ts파일을 만듭니다 .
2. 이러한 파일에서 폴더 내의 각 파일을 다시 내 보냅니다.

예

귀하의 경우 먼저 my-app-name/services/validation/index.ts. 이 파일에 다음 코드가 있습니다.

export * from "./xy.service";

그런 다음라는 파일을 만들고 다음 my-app-name/services/index.ts코드를 갖습니다.

export * from "./validation";

이제 다음과 같이 서비스를 사용할 수 있습니다 ( index암시적임).

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

그리고 거기에 여러 개의 파일이 있으면 훨씬 쉬워집니다.

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

이러한 추가 파일을 유지해야하는 것은 선행 작업이 조금 더 많지만 ( barrel-maintainer를 사용하여 작업을 제거 할 수 있음 ) 결국 적은 작업으로 결과를 얻습니다. 주요 디렉토리 구조 변경을 수행하는 것이 훨씬 쉽고 수행해야하는 가져 오기 횟수를 줄입니다.

주의

이 작업을 할 때주의해야 할 사항과 할 수없는 사항이 몇 가지 있습니다.

1. 순환 재수출을 주시해야합니다. 따라서 두 개의 하위 폴더에있는 파일이 서로를 참조하는 경우 전체 경로를 사용해야합니다.
2. 동일한 원본 폴더의 폴더로 돌아가서는 안됩니다 (예 : 유효성 검사 폴더의 파일에 있고 import {XyService} from "../validation";). 나는 이것을 발견했고 첫 번째 요점은 정의되지 않은 수입의 오류로 이어질 수 있습니다.
3. Finally you can't have two exports in a sub-folder that have the same name. Usually that isn't an issue though.

---

Better to use below configuration in tsconfig.json

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

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

Traditional way before Angular 6:

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

should be refactored into these:

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

Short and sweet!

---

I just came across this question. I know it's way back now but for anyone coming across it there is a simpler answer.

I came across only because something I had been doing for a long time stopped working and I was wondering if something had changed in Angular 7. No, it was just my own code.

Regardless I have only had to change one line in tsconfig.json to avoid long import paths.

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

   "baseUrl": "src"
  }
}

This has worked for me pretty much ever since Angular-CLI came along.

참고URL : https://stackoverflow.com/questions/34925992/how-to-avoid-imports-with-very-long-relative-paths-in-angular-2