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

Question 1

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

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

Question 2

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+에서도 여전히 적용 가능)

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

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

예

귀하의 경우 먼저 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를 사용하여 작업을 제거 할 수 있음 ) 결국에는 적은 작업으로 결과를 얻을 수 있습니다. 주요 디렉토리 구조 변경을 수행하는 것이 훨씬 쉽고 수행해야하는 가져 오기의 수를 줄입니다.

주의

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

순환 재수출을 주시해야합니다. 따라서 두 하위 폴더의 파일이 서로를 참조하는 경우 전체 경로를 사용해야합니다.
동일한 원본 폴더의 폴더로 돌아가서는 안됩니다 (예 : 유효성 검사 폴더의 파일에 있고 import {XyService} from "../validation";). 나는 이것을 발견했고 첫 번째 요점은 정의되지 않은 수입의 오류로 이어질 수 있습니다.
마지막으로 동일한 이름을 가진 하위 폴더에 두 개의 내보내기를 가질 수 없습니다. 일반적으로 그것은 문제가되지 않습니다.

Question 3

tsconfig.json에서 아래 구성을 사용하는 것이 더 좋습니다.

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

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

Angular 6 이전의 전통적인 방법 :

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

다음과 같이 리팩토링되어야합니다.

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

짧고 달다!

Question 4

방금이 질문을 보았습니다. 나는 그것이 지금 돌아 왔다는 것을 알고 있지만 그것을 접하는 사람에게는 더 간단한 대답이 있습니다.

오랫동안하던 일이 작동을 멈 췄고 Angular 7에서 뭔가 변경되었는지 궁금했기 때문에 만났습니다. 아니요, 그것은 단지 내 코드였습니다.

그럼에도 불구하고 tsconfig.json긴 가져 오기 경로를 피하기 위해 한 줄만 변경해야했습니다 .

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

   "baseUrl": "src"
  }
}

예:

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

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

이것은 Angular-CLI가 등장한 이후로 거의 나를 위해 일했습니다.