programing

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

javajsp 2023. 5. 4. 18:40

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

asp.net core와 함께 angular-cli를 사용하고 싶은데 dist 폴더의 경로를 변경하는 방법을 알고 싶습니다.

최신 방법은 다음을 업데이트하는 것입니다.outDir의 재산.angular.json(호출).angular-cli.json이전 Angular CLI 버전의 경우).

ng build 명령 인수--output-path(또는)-op줄여서)도 여전히 지원됩니다. 이는 여러 값을 원하는 경우 유용할 수 있습니다.package.jsonnpm 스크립트로.

주의: The.angular-cli.json속성이 호출되지 않음output-path@cwill747의 현재 답변처럼.그것이 바로ng build논쟁의 여지가

라고 합니다.outDir위에서 언급했듯이, 그것은 아래에 있습니다.apps소유물.

.

추신.

(2017년 12월)

답변을 추가한 지 1년 만에 누군가가 기본적으로 동일한 내용의 새로운 답변을 추가했고, 원본 포스터는 이 답변의 첫 줄에 동일한 내용이 포함된 1년 늦은 답변으로 수락된 답변을 변경했습니다.

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

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

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

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

분명히, 이것은 당신의 앱을 워크스페이스/dist/my-app-name에서 생성할 것입니다.다른 디렉터리를 선호하는 경우 outputPath를 수정합니다.

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

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

S.a. https://angular.io/cli/build

하위 디렉터리에서 각 앱 호스팅

출력 경로를 설정하면 "컴파일된" 파일을 배치할 위치가 각도로 표시되지만, 앱을 실행할 때 출력 경로를 변경해도 각도는 앱이 웹 서버의 문서 루트에 호스팅되어 있다고 가정합니다.

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

inangular.json:

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

클리:

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

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

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

입구 지점

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

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

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

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

ng build -prod --output-path=production

# or

ng serve --output-path=devroot

내게 유일하게 효과가 있었던 것은 변화하는 것이었습니다.outDir 두 글자로angular-cli.json그리고.src/tsconfig.json.

나는 각진 프로젝트 폴더 밖에 있는 나의 dist 폴더를 원했습니다.설을변않은경에서 .src/tsconfig.json또한 Angular CLI는 프로젝트를 빌드할 때마다 경고를 던집니다.

여기 가장 중요한 대사가 있습니다...

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

그리고...

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

주의: 정답은 아래와 같습니다.더 이상 작동하지 않습니다.

는 파일을 ..ember-cli다음 내용을 포함합니다.

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

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

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

폴더에 합니다.--output-path=docs

이제 Angular CLI에서 환경 파일을 사용하여 이 작업을 수행합니다.

먼저, 추가합니다.environments까지의 angular-cli.json

다음과 같은 것:

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

파일에 (그런내부파일경환음다(▁the▁and내▁(ment부그파일)environments/environment.prod.ts에는 ), 즉: 이경우같것, 추과은을가다와 같은합니다.

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

이제 실행할 때:

ng build --prod

은출력것입다니될그로 됩니다../whatever/dist/폴더를 누릅니다.

다른 옵션은 웹 루트 경로를 Angular clidist 폴더로 설정하는 것입니다.WebHostBuilder를 구성할 때 Program.cs 에서 다음과 같이 말합니다.

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

아니면 당신의 디스트리뷰터로 가는 길이 무엇이든.

주의:각도 6 이상!


가 있는 .angular.json(아닙니다.angular-cli.json) 키 올바른 키는 outputPath입니다.각도 구성이 다음으로 변경된 것 같습니다.angular.json6 Angular 6을 .angular.jsonjava.

출력 경로를 변경하려면 outputPath 및 빌드 옵션을 변경해야 합니다.

angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "projects": {
        "angular-app": {
            "projectType": "application",
            [...]
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/angular-app",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        [...]

이에 대한 공식 문서를 찾을 수 없었습니다(예상했던 것처럼 https://angular.io/guide/workspace-config 에 포함되지 않았습니다). 아마도 누군가가 이에 대한 공식 자료를 링크할 수 있을 것입니다.

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