'ng build'후 angular-cli에서 dist-folder 경로를 변경하는 방법


112

asp.net core와 함께 angular-cli를 사용하고 싶습니다. dist 폴더 의 경로를 어떻게 변경할 수 있는지 알아야 합니다.

답변:


74

.angular-cli.json에서 출력 폴더를 업데이트 할 수 있습니다.

"outDir": "./location/toYour/dist"

14
하위에 ./location/toYour/dist와 자바 스크립트 번들에 index.html을 넣어 것이 가능 폴더 예를 들어 ./location/toYour/dist/bundles
Naveed 아메드

1
누구나 outDir을 추가로 사용자 정의하는 데 대한 업데이트를 알고 있습니까? css / ts / 별도 경로
fidev

190

최신 방법은에서 outDir속성 을 업데이트하는 것 입니다 .angular-cli.json.

ng build명령 인수 --output-path(또는 -op여러 값을 원하는 경우 유용 할 수 있습니다 여전히도 지원됩니다 짧은 경우), 당신은 당신에 저장할 수 있습니다 package.json로 NPM 스크립트.

주의 :.angular-cli.json속성은 @ cwill747이 말하는 현재 승인 된 답변output-path 처럼 호출되지 않습니다 . 그것은 단지 논쟁입니다.ng build

outDir위에서 언급 한대로 호출 되며 apps속성 아래에 있습니다.

.

추신

(2017 년 12 월)

이 답변을 추가 한 지 1 년 후 누군가가 본질적으로 동일한 정보로 새로운 답변을 추가했으며 Original Poster는 수락 된 답변을이 답변의 첫 번째 줄에 동일한 정보를 포함하는 1 년 후 답변으로 변경했습니다.


3
그것이 가능 ./location/toYour/dist에 index.html을 넣어 자바 스크립트는 하위에 번들 폴더 예를 들어 ./location/toYour/dist/bundles
Naveed 아메드

10
: D의 PS가 쓴
선일 쿠마르

4
내가 여기서 본 최고의 PS
Frenkey

그는 아마도 여기에서 그의 친구를 홍보하고있을 것입니다. 이것은 부패입니다
Alexander Borovoi

69

Angular 6+의 경우 약간 변경되었습니다.

ng 빌드가 앱 파일을 생성하는 위치 정의

CLI 설정은 이제 작업 공간 루트 디렉토리의 angular.json (.angular-cli.json으로 대체 됨)에서 수행됩니다 . 기본 angular.json의 출력 경로는 다음과 같아야합니다 (관련없는 줄이 제거됨).

{
  "projects": {
    "my-app-name": {
    "architect": {
      "options": {
         "outputPath": "dist/my-app-name",

분명히 이것은 WORKSPACE / dist / my-app-name에 앱을 생성합니다. 다른 디렉토리를 선호하는 경우 outputPath를 수정하십시오.

명령 줄 인수를 사용하여 출력 경로를 덮어 쓸 수 있습니다 (예 : CI 작업의 경우).

ng build -op dist/example
ng build --output-path=dist/example

Sa https://github.com/angular/angular-cli/wiki/build

하위 디렉터리에 Angular 앱 호스팅

출력 경로를 설정하면 "컴파일 된"파일을 배치 할 위치를 angular에 알려 주지만 출력 경로를 변경하면 앱을 실행할 때 angular는 여전히 앱이 웹 서버의 문서 루트에서 호스팅된다고 가정합니다.

하위 디렉토리에서 작동하게하려면 기본 href를 설정해야합니다.

angular.json에서 :

{
  "projects": {
    "my-app-name": {
    "architect": {
      "options": {
         "baseHref": "/my-folder/",

Cli :

ng build --base-href=/my-folder/

빌드시 앱이 호스팅 될 위치를 모르는 경우 생성 된 index.html에서 기본 태그를 변경할 수 있습니다.

다음은 docker 컨테이너에서 수행하는 방법의 예입니다.

entrypoint.sh

if [ -n "${BASE_PATH}" ]
then
  files=( $(find . -name "index.html") )
  cp -n "${files[0]}" "${files[0]}.org"
  cp "${files[0]}.org" "${files[0]}"
  sed -i "s*<base href=\"/\">*<base href=\"${BASE_PATH}\">*g" "${files[0]}"
fi


17

나를 위해 일한 유일한 것은 AND outDir모두에서 변경하는 것입니다 .angular-cli.jsonsrc/tsconfig.json

각도 프로젝트 폴더 외부에 내 dist 폴더를 원했습니다. 설정을 변경하지 않으면 src/tsconfig.jsonAngular CLI는 프로젝트를 빌드 할 때마다 경고를 표시합니다.

다음은 가장 중요한 라인입니다 ...

// angular-cli.json
{
  ...
  "apps": [
    {
      "outDir": "../dist",
      ...
    }
  ],
  ...
}

그리고 ...

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    ...
  }
}

2
대박! 에 대한 업데이트 cli 7x, 위의 작업은에서 수행되고 angular.json필드는입니다 outputPath( tsconfig 위의 조정은 동일하게 유지됨). 제 H
EdSF

17

주의 : 정답은 다음과 같습니다. 더 이상 작동하지 않습니다.

.ember-cli프로젝트에서 라는 파일을 만들고 다음 내용을 포함합니다.

{
   "output-path": "./location/to/your/dist/"
}

9

Angular CLI는 이제 환경 파일을 사용하여이를 수행합니다.

먼저 environments섹션을angular-cli.json

다음과 같은 것 :

{
  "apps": [{
      "environments": {
        "prod": "environments/environment.prod.ts"
      }
    }]
}

그런 다음 환경 파일 ( environments/environment.prod.ts이 경우) 내부 에 다음과 같이 추가합니다.

export const environment = {
  production: true,
  "output-path": "./whatever/dist/"
};

이제 실행할 때 :

ng build --prod

./whatever/dist/폴더로 출력됩니다 .


1
가장 좋은 답변처럼 보이지만 Angular CLI는 여전히 dist 폴더에 내 파일을 게시합니다. 버전 :angular-cli: 1.0.0-beta.21
NinjaFart

Angular CLI Wiki에서 : outDir (문자열) : 빌드 결과의 출력 디렉터리입니다. 기본값은 dist /입니다.
hbthanki

@hbthanki 그게 CLI를 스위치가 아닌 환경 파일 JSON 속성
swestner

9

내가 사용하는 github 페이지의 경우

ng build --prod --base-href "https://<username>.github.io/<RepoName>/" --output-path=docs

이것은 출력을 docs 폴더로 복사하는 것입니다. --output-path=docs


2

또 다른 옵션은 webroot 경로를 angular cli dist 폴더로 설정하는 것입니다. WebHostBuilder를 구성 할 때 Program.cs에서

.UseWebRoot(Directory.GetCurrentDirectory() + "\\Frontend\\dist")

또는 dist dir의 경로가 무엇이든.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.