Angular CLI에서 상대 경로 방지

Angular CLI에서 상대 경로 방지

최신 Angular CLI를 사용하고 있으며 모든 구성 요소의 모음인 사용자 지정 구성 요소 폴더를 만들었습니다.

를 들면, 들면를예,TextInputComponent을 가지고 있습니다.TextInputConfiguration 안에 반src/components/configurations.ts 그고리로.src/app/home/addnewuser/add.user.component.ts제가 사용하는 곳은 다음과 같습니다.

import {TextInputConfiguration} from "../../../components/configurations";

이것은 괜찮지만 내 앱이 커지고 깊어질수록../증가합니다. 어떻게 처리해야 합니까?

이에전시스템을 통해 했습니다.JS의 경우 다음 경로를 구성했습니다.system.config.js아래와 같이:

System.config({
..
 map : {'ng_custom_widgets':'components' },
 packages : {'ng_custom_widgets':{main:'configurations.ts', defaultExtension: 'ts'},
)};

Angular CLI를 사용하여 웹 팩용으로 동일한 것을 어떻게 생산합니까?

이 의견에 따라 다음을 통해 응용 프로그램 소스를 추가할 수 있습니다.pathstsconfig.json:

{
  "compilerOptions": {
    ...,  
    "baseUrl": ".",
    "paths": {
      ...,
      "@app/*": ["app/*"],
      "@components/*": ["components/*"]
    }
  }
}

그런 다음 에서 완전히 가져올 수 있습니다.app/또는components/현재 파일을 기준으로 하는 대신:

import {TextInputConfiguration} from "@components/configurations";

참고:일 경우 지정해야 합니다.

참고 항목

• https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

저를 올바른 방향으로 인도해 주신 jonrsharpe의 답변에 감사드립니다.하지만, 그것을 추가한 후에.paths답변에 정의된 바와 같이, 저는 여전히 그것을 작동시킬 수 없었습니다.미래에 저와 같은 문제에 직면한 다른 사람들을 위해, 제가 그 문제들을 해결하기 위해 한 일은 다음과 같습니다.

공유 모듈이 있고 해당 서비스가 여러 구성 요소에서 사용되고 있습니다.

tsconfig.json:

{
    "compilerOptions": {
        ...
        "baseUrl": ".", //had to add this too
        "paths": {
            "@shared/*": ["src/app/modules/shared/*"]
        }
    }
}

그 후 VS Code는 다음을 해결할 수 있었습니다.import하지만 저는 여전히 다음과 같은 오류를 받았습니다.webpack하는 동안

모듈을 찾을 수 없음: 오류:확인할 수 없음

이 문제를 해결하기 위해 추가해야 했습니다.

1. baseUrl of tsconfig 에
2. paths of tsconfig 에

webpack.config.js:

resolve: {
  extensions: ['*', '.js', '.ts'],
  modules: [
    rootDir,
    path.join(rootDir, 'node_modules')
  ],
  alias: {
    '@shared': 'src/app/modules/shared'
  }
},

component.ts:

import { FooService } from '@shared/services/foo.service'
import { BarService } from '@shared/services/bar.service'
import { BazService } from '@shared/services/baz.service'

더욱 깨끗하게 하기 위해, 저는 그것을 추가했습니다.index.d.ts다음과 같이 모든 서비스를 내보냈습니다.

index.d.ts:

export * from './foo.service';
export * from './bar.service';
export * from './baz.service';

이제 모든 구성 요소 내부:

import { FooService, BarService, BazService } from '@shared/services';

무엇보다도 정답이지만, 정확히 어떤 문제가 있는지 이해하려고 인터넷을 통해 검색하고 다른 문제 해결 옵션을 시도한 후, 저는 baseUrl과 Path가 함께 작동하는 방법을 알게 되었습니다.

아래와 같이 baseUrl:"을 사용하면 VScode에서 작동하지만 컴파일 중에는 작동하지 않습니다.

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": ".",
    "paths": {
      "@myproject/*": ["src/app/*"]
    }    
}

제가 이해한 바와 같이 작동하는 앱과 각진 iOS 코드를 확인한 결과 아래와 같이 baseUrl: "src"로 사용할 것을 제안합니다.

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "paths": {
      "@myproject/*": ["app/*"],
      "testing/*": ["testing/*"]
    }    
}

컴파일러는 기본 URL을 소스(src 디렉터리)로 지정하여 모듈을 올바르게 확인합니다.

저는 이것이 사람들이 이런 문제를 해결하는 데 도움이 되기를 바랍니다.

이유는 모르겠지만 VS2017에서 다른 답변을 시도했을 때 오류 없이 Angular를 컴파일할 수 있었지만 VS "Cannot Find Module..."에서 오류가 발생했습니다.할 때는 ㅠㅠㅠㅠㅠ"src""."모두가 행복했습니다.

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "baseUrl": "src",                 // Main source directory same level as tsconfig
    "paths": {
      "app/*": [ "app/*" ],           // src/app
      "ui/*": [ "ui/*" ],             // src/ui       
      "services/*": [ "services/*" ], // src/services
      "assests/*": [ "assests/*" ],     // src/assests
      "models/*": [ "models/*" ]      // src/models
    },
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

그런 다음 가져오기:

import { AppMenuComponent } from 'ui/app-menu/app-menu.component';

참고: Visual Studio에서 여전히 오류가 발생하는 경우 파일을 닫았다가 다시 열거나 Visual Studio를 다시 시작하여 새 경로를 인식하도록 하십시오.

각도 8에서는 *가 필요하지 않습니다.*로 인해 다음 오류가 발생합니다.Cannot find module이을 추가합니다. config.json 파일은 다음과 같습니다.

"baseUrl": "./",
"paths": {
      "@test": [ "src/app/test/" ],
      "@somthing": [ "src/app/something/" ],
      "@name": [ "src/app/name/" ]
    },

단순성 유지

이 솔루션을 향후 프로젝트에 적용하기 위해 알아야 할 몇 가지 사항만 포함하여 이를 단순하게 유지해 보겠습니다.

파일: Angular를 하지 않습니다.@/또는~/ path mappings아마도 이 문제에 대해 덜 의견을 제시하기로 선택했기 때문일 것입니다.

하지만 설정은 다음과 같습니다.baseUrl모든 가져오기의 경우:./(즉, 다음과 같은 폴더를 의미합니다.tsconfig.json위치).

, 이지 않은 모든 즉, 수입품)을합니다../또는../ 으로 )가 붙습니다.baseUrl.

따라서 가져오기를 위해 이 기본 URL에서 시작하는 경로를 사용하는 한 이미 해결책이 있어야 합니다!리팩토링 도구가 기본 URL을 인식하고 가져오기 경로 리팩토링을 올바르게 적용할 수 있는 한 리팩토링에는 문제가 없어야 합니다.

따라서 기본적으로 수정되지 않은 TS 구성을 사용하면 이러한 가져오기를 사용할 수 있으며 상대 경로가 관리의 골칫거리가 될 염려가 없습니다.

// sample import taking into consideration that there is
// a baseUrl set up for all imports which get prefixed to
// all imports automatically:

import { ComingSoonComponentModule } from 'src/app/components/coming-soon/coming-soon.module';

다른 해결책

하지만 만약 당신이 정말로 무언가를 사용하고 싶다면.@/접두사, 당신은 간단한 것으로도 그것을 쉽게 할 수 있습니다.path mapping다음과 같이:

// tsconfig.json

{
  // ...
  "compilerOptions": {
    "baseUrl": "./",
    // notice that the mapping below is relative to the baseUrl: `src/app/*` is in fact `{baseUrl}src/app/*`, ie. `./src/app/*`.
    "paths": { "@/*": ["src/app/*"] },
    // ...
  },
  // ...
}

그런 다음 다음 중 하나로 가져올 수 있습니다.

import { ComingSoonComponentModule } from 'src/app/components/coming-soon/coming-soon.module';
import { ComingSoonComponentModule } from '@/components/coming-soon/coming-soon.module';

기억해야 할 사항:

1. paths은 tsconfig와 .baseUrl하세요.paths키)를 누릅니다.
2. *별표는 지정된 모듈 경로(코드에서 지정한 대로 가져오기 위치)이며, 나머지 모든 항목은 tsconfig에서 지정한 대로 최종 경로에 추가할 접두사 또는 접미사입니다.

저는 Stackblitz를 사용해 왔으며 위의 솔루션 중 하나도 작동하지 않았습니다.src/app/...폴이 언급한 것처럼.그리고 tsconfig.json에 지정된 경로가 Stack blitz에서 지원되지 않기 때문이라고 생각합니다.

은 내가찾유해은책결한일은은▁i를 하는 것이었습니다.../하나의 폴더를 파일에서 효과적으로 뒤로 이동합니다.여러 폴더를 여러 번 사용하여 여러 폴더로 돌아갈 수 있습니다.

를 들어, 제가 가 예를들, 제작는구에 있다고 가정해 src/app/components/mycomponent 제가 포함하고 은 하만지, 에 있습니다.src/app/shared/myservice 단히포함것는하순것는▁simply 포함.src/app/shared/myservice/serviceStackblitz에서 작동하지 않았습니다.그래서 나는 사용해야 했을 것입니다.../../shared/myservice/service 번째는. 첫 번째.../ 합니다.src/app/components를 " 그고두번디렉다해음결로다니합으를리토째는리다▁the해니▁and▁to합▁directory▁the"로 해결합니다.src/app여기서 공유 폴더에 액세스할 수 있습니다.

이 문제에 대한 훨씬 더 간단한 해결책이 있습니다."tsconfig.json"에서 기본값을 설정합니다.빈 문자열의 URL:

"baseUrl": ""

이제 루트에서 한 파일에서 다른 파일로 경로를 참조할 수를 참조할 수 있습니다.

import { ProductService } from 'src/app/services/product.service'; 

이것들은 절대 경로이지만 각도가 그것들을 사용하는 방식은 상대적으로 보입니다.하지만 그들은 효과가 있습니다!저는 위에서 언급한 "경로" 단축키의 팬이 아닙니다. 모든 것이 물리적으로 어디에 위치하는지, 그리고 그것이 절대 경로가 어떻게 그리고 왜 발명되었는지 알고 싶기 때문입니다.

가져오기 시 모듈 및 구성 요소를 참조하거나 Angular 프로젝트를 빌드할 때 경로 문제를 해결하지만, 프로젝트를 빌드하고 컴파일할 때 Angular에서 완전히 다른 경로 시스템을 사용하는 템플릿, 스타일 경로 또는 이미지와 같은 자산과 관련된 경로 문제는 해결되지 않습니다.

이것이 이 바보 같은 경로 시스템을 설명하는 데 도움이 된다면 프로젝트 루트의 "angular.json" 작업 공간 파일은 "sourceRoot" 폴더가 무엇인지를 제어하며 기본적으로 "src"로 설정됩니다.이것이 Angular 빌드 조각에 사용되는 "소스 루트" 폴더의 시작입니다.Angular "workspace root"은 "src" 위의 프로젝트 폴더이며 프로젝트와 컴파일러의 실제 루트입니다.그래서 "src/app/"라고 쓸 때..루트가 "src" 위에 있습니다.angular.json은 현재 위치에서 시작 폴더를 파생하므로 "src/app/"는 실제로 angular를 기반으로 하는 상대 로컬 폴더입니다.제이슨의 위치.그렇기 때문에 "/src/app"이 기본에서 작동하지 않습니다.angular.json과 관련된 URL인 것 같습니다.

기본적으로 Angular에 대한 이 "src" 폴더는 프로젝트를 빌드/컴파일할 때 모든 빌드 경로가 확인하는 폴더입니다.나는 웹팩이 해결될 때 angular.json에서 동일한 "sourceRoot" "src" 값을 보는 것이 의심됩니다.

많은 분투 끝에 기지를 설치하여 알게 되었습니다.URL intsconfig를 "." 또는 "./."가 아닌 "."로 지정하면 "src" 폴더로 시작하는 한 이러한 전체 경로를 사용할 수 있습니다.이러한 유형의 절대 경로는 파일 트리를 오르내리는 것이 아니라 모든 것이 상위 루트에서 하위 루트로 이동하는 것을 시각적으로 알 수 있기 때문에 더욱 의미가 있습니다.말도 안 돼요!

앵귤러 아이들이 왜 그런 멍청한 상대 경로 시스템을 사용하는지 모르겠어요.이러한 "/." 경로는 컴파일러 경로 확인 시스템과 그들이 사용하는 HTML/URL 경로 확인 시스템 모두에서 완전히 쓸모가 없고 탐색을 훨씬 더 어렵게 만듭니다.개발자들이 상대 경로를 사용하는 이유와 시기를 파악하는 데 시간을 들였다면 광범위한 환경에서 모든 파일이 로컬 폴더에서 다른 모든 파일을 참조한다고 가정하는 것이 그다지 유용하지 않다는 것을 깨달았을 것입니다.

언급URL : https://stackoverflow.com/questions/41460810/avoiding-relative-paths-in-angular-cli