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

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

어떻게 소개해야 할까요?'my-app-name/services'다음 가져오기와 같은 행을 피하려면 어떻게 해야 합니다.

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

타입스크립트 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여러 프로젝트를 사용할 때 유용한 속성입니다.

사전 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";

이러한 추가 파일을 유지 관리해야 하는 것은 초기에는 작업량이 조금 더 많지만(배럴 유지 관리기를 사용하여 작업량을 줄일 수 있음), 결국에는 작업량을 줄이면서 성과를 거둘 수 있습니다.주요 디렉터리 구조 변경을 훨씬 쉽게 수행할 수 있고 수행해야 하는 가져오기 수를 줄일 수 있습니다.

주의

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

1. 당신은 순환재수출을 지켜봐야 합니다.따라서 두 하위 폴더의 파일이 서로 참조하는 경우 전체 경로를 사용해야 합니다.
2. 동일한 원래 폴더의 폴더로 돌아가서는 안 됩니다(예: 유효성 검사 폴더의 파일에 있는 경우).import {XyService} from "../validation";) 저는 이것을 발견했고 첫 번째 포인트는 수입이 정의되지 않는 오류로 이어질 수 있습니다.
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

짧고 달콤합니다!

저는 방금 이 질문을 접했습니다.저는 그것이 지금 훨씬 전의 것이라는 것을 알지만, 그것을 마주치는 사람들에게는 더 간단한 답이 있습니다.

제가 우연히 알게 된 것은 제가 오랫동안 해왔던 일이 작동을 멈췄기 때문인데 앵귤러 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가 나온 이후로 저에게 거의 효과가 있었습니다.

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