Angular에서 여러 프로젝트 작업

Angular 앱을 빌드할 때 코드를 모듈로 분할하면 코드를 특정 위치에 유지하는 것이 좋지만 모든 것을 격리된 영역에 배치하기 위해 프로젝트로 분할해야 하는 경우가 있습니다.

기본적으로 Angular CLI는 초기 애플리케이션을 생성하지만 프로젝트가 커지면 어떻게 될까요? 기본 웹으로 시작하지만 랜딩 페이지를 만들어야 하고 라이브러리를 사용하여 페이지 간에 구성 요소를 공유하고 싶을 수 있습니다. Angular Workspace를 사용하는 것이 완벽한 시나리오입니다.

Read more about Angular WorkSpaces Official

WorkSpace란 무엇입니까?

Angular 작업 공간을 사용하면 여러 프로젝트에서 코드를 분할하고 구성할 수 있으므로 종속성을 쉽게 관리하고 애플리케이션용 단일 npm install 및 node_modules로 빌드하고 모든 것을 단일 저장소에 통합할 수 있습니다.

WorkSpace 사용

작업 공간 사용을 시작하려면 기본 구조를 생성해야 합니다. 예를 들어, 우리 회사는 amazing_company 아래에 몇 가지 프로젝트가 있습니다.

플래그ng new를 사용하여 --create-application=false를 실행하여 기본 프로젝트를 생성하지 않습니다.

ng new amazing_company --create-application=false

CLI를 사용하여 새 프로젝트를 관리, 등록 및 생성하는 데 필요한 package.json, tslint, tsconfig 등으로 파일 구조를 구축합니다.

차이점은 무엇입니까?

ng new myproject와 플래그--create-application=false의 차이점을 보여드리겠습니다.
ng new myproject 디렉토리와 함께 src에 의해 생성된 파일 목록과 코딩을 시작할 예제 앱입니다.

angular.json package.json src tsconfig.spec.json
karma.conf.js package-lock.json tsconfig.app.json
node_modules README.md tsconfig.json

플래그--create-application=false를 사용하여 프로젝트를 관리할 최소한의 파일만 생성합니다.

angular.json package.json README.md
node_modules package-lock.json tsconfig.json

완벽합니다. 작업 공간에 프로젝트를 추가한 후 분명한 차이점이 있습니다.

WorkSpace에 프로젝트 추가

작업 공간에 세 개의 새 프로젝트를 추가할 예정입니다.

두 가지 애플리케이션: amazing_web 및 amazing_landing .

하나의 라이브러리amazing_library는 앱 간에 구성 요소를 공유합니다.

먼저 ng g의 CLI 명령generate과 플래그 애플리케이션 및 프로젝트 이름을 사용하여 두 개의 애플리케이션을 추가합니다.

ng g application amazing_landing
ng g application amazing_web

CLI는 디렉토리projects를 생성하고 디렉토리에 애플리케이션을 등록합니다.

angular.json package.json projects tsconfig.json
node_modules package-lock.json README.md
dany@dany:~/Desktop/amazing_company$ cd projects/
dany@dany:~/Desktop/amazing_company/projects$ ls
amazing_landing amazing_web

두 개의 애플리케이션이 생성되었습니다. 다음으로 앱 간에 코드를 공유할 라이브러리를 만듭니다.

라이브러리 추가

라이브러리를 프로젝트로 추가하려면 ng g library amazing-library 명령을 실행합니다.

ng g library amazing-library

CLI는 그의 종속성을 등록하기 위해 그의 package.json을 사용하여 라이브러리에 대한 파일 목록을 생성합니다.

karma.conf.js package.json src tsconfig.lib.prod.json
ng-package.json README.md tsconfig.lib.json tsconfig.spec.json

완벽합니다. 이미 그의 파일로 라이브러리를 만들었습니다. 다음 단계는 프로젝트를 빌드하고 실행하는 것입니다.

Learn more about Angular CLI Commands.

프로젝트 빌드 및 실행

이전에 CLI로 작업한 것처럼 애플리케이션 이름과 함께 ng 또는 ng server와 같은 ng build 명령을 사용하여 애플리케이션을 실행하거나 빌드할 수 있습니다.

By default, the angular.json sets the first project as default and loads the first project created if you use ng serve without the application name.

ng serve amazing_landing
ng build amazing-library

요약

각도 작업 공간을 사용하여 프로젝트를 분할하는 이유와 각도 CLI가 프로젝트, 실행 및 빌드를 효율적으로 관리하는 방법을 배웁니다. 다음 프로젝트에 도움이 되었으면 합니다.

Foto de Thomas Park ko Unsplash