programing tip

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

itbloger 2020. 8. 17. 08:22
반응형

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


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


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

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

최신 방법은에서 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 년 후 답변으로 변경했습니다.


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

다음과 같이 CLI를 사용할 수도 있습니다.

ng build -prod --output-path=production

# or

ng serve --output-path=devroot

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

I wanted my dist-folder outside the angular project folder. If I didn't change the setting in src/tsconfig.json as well, Angular CLI would throw warnings whenever I build the project.

Here are the most important lines ...

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

And ...

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

Beware: The correct answer is below. This no longer works

Create a file called .ember-cli in your project, and include in it these contents:

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

Angular CLI now uses environment files to do this.

First, add an environments section to the angular-cli.json

Something like :

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

And then inside the environment file (environments/environment.prod.ts in this case), add something like :

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

now when you run :

ng build --prod

it will output to the ./whatever/dist/ folder.


for github pages I Use

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

This is what that copies output into the docs folder : --output-path=docs


Another option would be to set the webroot path to the angular cli dist folder. In your Program.cs when configuring the WebHostBuilder just say

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

or whatever the path to your dist dir is.

참고URL : https://stackoverflow.com/questions/37348045/how-to-change-the-dist-folder-path-in-angular-cli-after-ng-build

반응형