Angular 워크스페이스 설정

Angular 워크스페이스 루트에 있는 angular.json 파일은 워크스페이스 전체와 개별 프로젝트의 기본 설정을 제공합니다. 이 설정은 Angular CLI가 제공하는 빌드 및 개발 도구에서 사용합니다. 설정에 지정하는 경로 값은 워크스페이스 루트 디렉터리를 기준으로 하는 상대 경로입니다.

JSON의 전체 구조

angular.json의 최상위에는 워크스페이스를 설정하는 몇 가지 프로퍼티가 있고, projects 섹션에는 나머지 프로젝트별 설정 옵션이 있습니다. 프로젝트 수준의 기본값으로 워크스페이스 수준에서 설정한 Angular CLI 기본값을 덮어쓸 수 있습니다. 명령줄을 사용하여 프로젝트 수준의 기본값도 덮어쓸 수 있습니다.

파일의 최상위에 있는 다음 프로퍼티로 워크스페이스를 설정합니다.

ng new app-name으로 생성한 초기 애플리케이션은 "projects" 아래에 나열됩니다.

ng generate library로 라이브러리 프로젝트를 생성하면 해당 프로젝트도 projects 섹션에 추가됩니다.

• ng new로 생성한 초기 애플리케이션은 워크스페이스 파일 구조의 최상위에 있습니다.
• 다른 애플리케이션과 라이브러리는 기본적으로 projects 디렉터리 아래에 있습니다.

자세한 내용은 워크스페이스와 프로젝트 파일 구조를 참고하세요.

Angular CLI 설정 옵션

다음 프로퍼티는 Angular CLI를 사용자 정의하는 옵션입니다.

캐시 옵션

경고 옵션

프로젝트 설정 옵션

각 프로젝트의 projects['project-name'] 아래에서 다음 최상위 설정 프로퍼티를 사용할 수 있습니다.

i18n 옵션

i18n 프로젝트 옵션으로 애플리케이션의 원본 지역과 추가로 빌드할 지역을 정의하세요.

sourceLocale 객체

원본 지역의 출력 디렉터리나 기본 HREF를 사용자 정의하려면 문자열 대신 객체를 전달하세요.

지역 객체

locales의 각 항목은 경로 문자열, 경로 배열 또는 객체일 수 있습니다.

스키매틱

Angular 스키매틱은 새 파일을 추가하거나 기존 파일을 수정하여 프로젝트를 변경하는 지침입니다. 스키매틱 이름을 기본 옵션 집합에 연결하여 설정할 수 있습니다.

스키매틱의 "이름"은 <schematic-package>:<schematic-name> 형식입니다. 기본 Angular CLI ng generate 하위 명령어의 스키매틱은 @schematics/angular 패키지에 모여 있습니다. 예를 들어 ng generate component로 컴포넌트를 생성하는 스키매틱은 @schematics/angular:component입니다.

스키매틱 스키마의 필드는 Angular CLI 하위 명령어 옵션에 허용되는 명령줄 인수 값과 기본값에 대응합니다. 워크스페이스 스키마 파일을 업데이트하여 하위 명령어 옵션의 기본값을 변경할 수 있습니다. 예를 들어 ng generate component에서 standalone을 기본적으로 비활성화하려면 다음과 같이 설정합니다.

{
  "projects": {
    "my-app": {
      "schematics": {
        "@schematics/angular:component": {
          "standalone": false
        }
      }
    }
  }
}

CLI 빌더 설정하기

Architect는 Angular CLI가 컴파일이나 테스트 실행과 같은 복잡한 작업을 수행하는 데 사용하는 도구입니다. Architect는 대상 설정에 따라 지정한 빌더를 실행하여 작업을 수행하는 셸입니다. 새로운 빌더와 대상을 정의하고 설정하여 Angular CLI를 확장할 수 있습니다. Angular CLI 빌더를 참고하세요.

기본 Architect 빌더와 대상

Angular는 특정 명령어나 범용 ng run 명령어에서 사용할 기본 빌더를 정의합니다. 각 빌더의 옵션과 기본값을 정의하는 JSON 스키마는 @angular/build 패키지에 모여 있습니다. 이 스키마로 다음 빌더의 옵션을 설정합니다.

빌더 대상 설정하기

angular.json의 architect 섹션에는 Architect 대상 집합이 있습니다. 대부분의 대상은 해당 대상을 실행하는 Angular CLI 명령어에 대응합니다. 다른 대상은 ng run 명령어로 실행할 수 있으며, 직접 대상을 정의할 수도 있습니다.

각 대상 객체는 해당 대상의 builder를 지정합니다. 이는 Architect가 실행할 도구의 npm 패키지입니다. 각 대상에는 기본 옵션을 설정하는 options 섹션과 이름이 있는 대체 설정을 지정하는 configurations 섹션도 있습니다. 아래 빌드 대상의 예제를 참고하세요.

빌드 대상

architect 아래의 각 대상에는 다음 프로퍼티가 있습니다.

예를 들어 최적화를 비활성화한 빌드를 설정하려면 다음과 같이 작성합니다.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "optimization": false
          }
        }
      }
    }
  }
}

대체 빌드 설정

Angular CLI는 production과 development라는 두 가지 빌드 설정을 제공합니다. 기본적으로 ng build 명령어는 production 설정을 사용하며, 다음과 같은 빌드 최적화를 적용합니다.

• 파일 번들링
• 불필요한 공백 최소화
• 주석 및 사용하지 않는 코드 제거
• 식별자를 짧은 이름으로 바꾸는 코드 압축

개발 과정에 맞게 staging 같은 대체 설정을 추가로 정의하고 이름을 붙일 수 있습니다. 명령줄의 --configuration 플래그에 이름을 전달하면 대체 설정을 선택할 수 있습니다.

예를 들어 프로덕션 빌드(ng build --configuration production)에서만 최적화를 활성화하려면 다음과 같이 설정합니다.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "optimization": false
          },
          "configurations": {
            "production": {
              "optimization": true
            }
          }
        }
      }
    }
  }
}

쉼표로 구분한 목록으로 둘 이상의 설정 이름을 전달할 수도 있습니다. 예를 들어 staging과 french 빌드 설정을 모두 적용하려면 ng build --configuration staging,french 명령어를 사용합니다. 이 경우 명령어는 지정한 설정을 왼쪽에서 오른쪽 순서로 해석합니다. 여러 설정이 같은 항목을 변경하면 마지막으로 설정한 값이 최종값이 됩니다. 이 예제에서 staging과 french가 모두 출력 경로를 지정한다면 french의 값을 사용합니다.

추가 빌드 및 테스트 옵션

기본 빌드나 특정 대상을 위한 빌드에서 설정할 수 있는 옵션은 일반적으로 ng build와 ng test 명령어의 옵션에 대응합니다. 각 옵션과 사용 가능한 값의 자세한 내용은 Angular CLI 레퍼런스를 참고하세요.

추가 개발 서버 옵션

개발 서버는 자체 옵션을 제공하며, 일반적으로 ng serve 명령어에서 사용할 수 있는 옵션에 대응합니다.

복합 설정값

assets, index, outputPath, styles, scripts 옵션은 단순한 경로 문자열이나 특정 필드를 가진 객체를 값으로 사용할 수 있습니다. sourceMap과 optimization 옵션은 단순한 불리언 값으로 설정할 수 있으며, 설정 파일에서 복합 값을 지정할 수도 있습니다.

다음 섹션에서는 각 경우에 이러한 복합 값을 사용하는 방법을 자세히 설명합니다.

정적 리소스 설정

각 build 대상 설정에는 프로젝트를 빌드할 때 그대로 복사할 파일이나 폴더를 나열하는 assets 배열을 포함할 수 있습니다. 기본적으로 public/ 디렉터리의 내용이 복사됩니다.

리소스를 제외하려면 정적 리소스 설정에서 해당 항목을 제거하세요.

복사할 정적 리소스를 워크스페이스 루트 기준의 단순 상대 경로 대신 객체로 지정하면 더 세부적으로 설정할 수 있습니다. 리소스 지정 객체에는 다음 필드를 사용할 수 있습니다.

예를 들어 다음 리소스 객체는 src/assets/의 내용을 /assets/로, src/favicon.ico를 출력 루트로 복사합니다.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets/",
                "output": "/assets/"
              },
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              }
            ]
          }
        }
      }
    }
  }
}

다음 예제는 ignore 필드를 사용하여 정적 리소스 디렉터리의 특정 파일이 빌드 결과에 복사되지 않도록 합니다.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets/",
                "ignore": ["**/*.svg"],
                "output": "/assets/"
              }
            ]
          }
        }
      }
    }
  }
}

스타일 및 스크립트 설정

styles와 scripts 옵션 배열의 항목은 단순한 경로 문자열이나 추가 진입점 파일을 가리키는 객체일 수 있습니다. 해당 빌더는 빌드 중에 파일과 그 의존성을 별도의 번들로 로드합니다. 설정 객체를 사용하면 bundleName 필드로 진입점의 번들 이름을 지정할 수 있습니다.

기본적으로 번들은 자동 삽입되지만 inject를 false로 설정하여 삽입하지 않도록 할 수 있습니다. 예를 들어 다음 객체 값은 스타일과 스크립트가 포함된 번들을 생성하고 이름을 지정하되 자동으로 삽입하지 않습니다.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "styles": [
              {
                "input": "src/external-module/styles.scss",
                "inject": false,
                "bundleName": "external-module"
              }
            ],
            "scripts": [
              {
                "input": "src/external-module/main.js",
                "inject": false,
                "bundleName": "external-module"
              }
            ]
          }
        }
      }
    }
  }
}

스타일 전처리기 옵션

Sass에서는 컴포넌트 스타일과 전역 스타일 모두에 includePaths 기능을 사용할 수 있습니다. 이를 통해 임포트 시 검색할 기본 경로를 추가할 수 있습니다.

경로를 추가하려면 stylePreprocessorOptions 옵션을 사용하세요.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["src/style-paths"]
            }
          }
        }
      }
    }
  }
}

src/style-paths/_variables.scss 같은 해당 디렉터리의 파일은 프로젝트 어디에서든 상대 경로 없이 임포트할 수 있습니다.

// A relative path works
@import '../style-paths/variables';

// But now this works as well
@import 'variables';

최적화 설정

optimization 옵션은 불리언 값이나 더 세밀한 설정을 위한 객체일 수 있습니다. 이 옵션은 다음과 같은 빌드 출력 최적화를 활성화합니다.

• 스크립트와 스타일 압축
• 트리 셰이킹
• 사용하지 않는 코드 제거
• 중요 CSS 인라인 삽입
• 글꼴 인라인 삽입

여러 옵션으로 애플리케이션 최적화를 세밀하게 조정할 수 있습니다.

스타일 최적화 옵션

글꼴 최적화 옵션

다음과 같은 값을 지정하여 각 항목의 최적화를 개별적으로 적용할 수 있습니다.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "optimization": {
              "scripts": true,
              "styles": {
                "minify": true,
                "inlineCritical": true
              },
              "fonts": true
            }
          }
        }
      }
    }
  }
}

소스맵 설정

sourceMap 빌더 옵션은 불리언 값이나 애플리케이션의 소스맵을 더 세밀하게 제어하기 위한 객체일 수 있습니다.

다음 예제는 하나 이상의 값을 켜거나 꺼서 소스맵 출력을 설정하는 방법을 보여줍니다.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "sourceMap": {
              "scripts": true,
              "styles": false,
              "hidden": true,
              "vendor": true
            }
          }
        }
      }
    }
  }
}

원본 소스 코드가 없는 소스맵

원본 소스 코드를 포함하는 sourcesContent 필드 없이 소스맵을 생성할 수 있습니다. 이를 통해 소스 코드가 노출되지 않도록 보호하면서 프로덕션에 소스맵을 배포하여 원본 소스 이름을 사용한 더 나은 오류 보고를 제공할 수 있습니다.

소스맵에서 원본 소스 코드를 제외하려면 sourcesContent 옵션을 false로 설정하세요.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "sourcesContent": false
            }
          }
        }
      }
    }
  }
}

인덱스 설정

애플리케이션의 HTML 인덱스 생성을 설정합니다.

index 옵션은 문자열이나 더 세밀한 설정을 위한 객체일 수 있습니다. HTML 인덱스 파일을 생성하지 않으려면 false로 설정하세요.

문자열 값을 지정하면 해당 경로의 파일 이름을 생성할 파일 이름으로 사용하며, 애플리케이션에 설정된 출력 경로의 루트에 파일을 생성합니다.

인덱스 옵션

보안 설정

security 옵션은 개별 보안 기능을 활성화하는 객체입니다.

출력 경로 설정

outputPath 옵션은 base 값으로 사용할 문자열이나 더 세밀한 설정을 위한 객체일 수 있습니다.

여러 옵션으로 애플리케이션의 출력 구조를 세밀하게 조정할 수 있습니다.