또 다른 Angular 기사, 부품 구성 및 환경

이전 기사에서는 구성 요소를 생성하는 방법을 배웠습니다. 앞으로 나아가기 전에 구성과 환경에 대한 다양한 개념을 살펴봐야 할 것 같습니다.

구성의 왕은 Angular 동작과 TypeScript 컴파일러입니다. 오늘은 Angular 부분을 살펴보겠습니다. 모든 내용은Angular.json 프로젝트에 있습니다.

이 파일은 모든 프로젝트를 설명하고 Angular CLI의 스키마를 따릅니다: /@angular/cli/lib/config/schema.json

'프로젝트'가 주요 부분입니다. 그리고 여기에는 '설계도'와 '건축가'가 있습니다.

아키텍트는 CLI의 동작(빌드, 제공, 테스트 등)을 설명합니다.

도식은 코드 생성 방법을 설명합니다. 이것이 오늘 우리가 할 일입니다.

첫 번째 기사 이후의 내 글은 다음과 같습니다.

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

스타일 키에 'scss'가 포함되어 있음을 알 수 있습니다. 왜냐하면 제가 프로젝트를 생성할 때 cli 프롬프트에 'scss'라고 대답했기 때문입니다.

하지만 저는 더 하고 싶어요. 일반적으로 저는 단일 파일 구성 요소 패턴으로 구성 요소를 빌드하는 것을 선호합니다. 이는 VueJS와 같습니다. 스타일, HTML, 타이프스크립트 코드를 하나의 파일에 담으세요. 이는 작은 구성요소를 구축하도록 강요하기 때문입니다.
그렇게 하려면 inlineStyle 및 inlineTemplate
줄을 추가하세요.

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

이제 ng generate 구성 요소 my-new-comComponent를 실행하면 typescript 파일만 생성됩니다.

몇 가지 최적화 작업을 계속할 예정입니다. 모범 사례에서는 변경 감지를 항상 'OnPush'로 설정해야 한다고 설명합니다. 따라서 컴포넌트 생성 중에 이루어져야 합니다.
그렇게 하려면 다음 줄을 추가하세요:changeDetection

"@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true,
    "changeDetection": "OnPush"
  }
},

이제 기본 프로젝트 코드 생성이 설정되었습니다.

이전 Angular 버전에서는 "standalone: ​​true"를 정의할 수 있었습니다. 하지만 이제는 이것이 기본 동작입니다.

환경 개념으로 마무리하겠습니다. 애플리케이션을 구축할 때 일반적으로 API에 의존합니다. 이러한 API는 로컬로(코드를 작성할 때 컴퓨터에서) 제공될 수 있지만 테스트 서버, 사전 프로덕션 서버 또는 프로덕션 서버에서 제공될 수 있습니다.
그래서 변수에 호스트 이름을 설정해야 합니다.

Angular는 환경에 대한 친절한 솔루션을 제공합니다.

환경 생성

이 명령은 프로젝트에 2개의 새 파일(environment.ts 및 Environment.development.ts)을 추가합니다
또한 'projects.my-new-project.architect.configurations.development' 노드에 'fileReplacements' 배열을 추가하여 angle.json을 수정합니다

빌드 프로세스 중에 필수 Environment.ts를 필수 환경 파일(예: environment.development.ts)로 대체합니다.

모든 특정 환경 변수를 내부에 저장하고 필요한 모든 곳에서 Environment.ts를 가져올 수 있습니다. 하지만 다른 Environement.*.ts는 런타임에 사용할 수 없으므로 가져오지 않도록 주의하세요!

다음은 환경 샘플입니다.

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

따라서 내부에 필수 변수가 포함된 새로운 'environment.production.ts'를 생성하기만 하면 됩니다. 그런 다음 angle.json을 변경하여 다음과 같이 'project.architect.configurations.production' 아래에 fileReplacements 섹션을 추가합니다.

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

제 생각에는 Angular가 개발 파일과 프로덕션 파일을 모두 생성했어야 했습니다. 좀 이상하네요.

호, Angular v19에서는 시작 시 전역 변수를 정의할 수 있다는 것을 깜빡했네요. 이는 환경 개념에 대한 대안일 수 있지만 빌드 프로세스에 대한 추가 설정이 필요합니다.

좋은 하루 보내세요 ☁️

[참고] 모든 기사는 Angular v19*의 명령을 사용합니다.

위 내용은 또 다른 Angular 기사, 부품 구성 및 환경의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!