Import Any Existing Angular App into Nx Workspace (angular.json migration covered)
- Nx 도입의 이점: 더 빠른 빌드, 효율적인 모노레포 관리를 위해 기존 Angular 앱을 Nx 워크스페이스로 가져오는 과정 설명. 🚀
- Nx
import 명령어 (Nx 20+): 외부 Git 저장소에서 소스 코드를 가져오는 과정을 대화형으로 안내하며, 브랜치, 폴더, 워크스페이스 내 대상 경로를 지정. 📥
- 초기 가져오기 후 작업: 프로젝트별
package.json의 의존성을 루트 package.json으로 이동하고, 새로운 의존성 설치. 📦
- Nx의 Angular JSON 이해: Nx는 Angular CLI에서 파생되었기에
angular.json 파일을 이해하며, project.json 없이도 프로젝트 가시성 및 빌드, 서브, 테스트와 같은 타겟을 추론 가능. 🧠
- Angular JSON과 Nx 개념 유사성: Angular의
builder는 Nx의 executor, schematics는 generators, angular.json은 project.json과 유사한 역할. 🔄
project.json으로의 마이그레이션 필요성: 일관성, 확장성, 풍부한 플러그인 생태계를 위해 angular.json에서 project.json으로의 완전한 전환이 권장됨. 💡
project.json 마이그레이션 단계: 불필요한 파일 제거 (예: .angular, 프로젝트 package.json), project.json 생성, angular.json의 architect 설정을 targets로 복사. 📝
- 경로 및 키 조정:
builder 키를 executor로 변경하고, outputPath, tsConfig, assets, styles 등 모든 경로를 워크스페이스 루트 또는 프로젝트 루트에 맞게 조정. 🗺️
- Nx 기능 활성화: 빌드 타겟에 캐싱 (
cacheableOperations, inputs) 및 의존성 (dependsOn) 설정 추가로 성능 최적화. ⚡
- TSConfig 확장: 프로젝트
tsconfig.json이 워크스페이스 루트의 tsconfig.base.json을 확장하도록 설정하여 일관된 타입스크립트 구성 유지. 🔗
- 추가 고려사항: 테스트 프레임워크 (Karma에서 Jest로), 린팅 설정 동기화 등은 수동 작업이 필요하며, 더 복잡한 앱에서는 마이그레이션이 더 어려울 수 있음. 🚧
- 전문가 지원: 저자는 Nx 비디오 코스 및 컨설팅 서비스를 제공하여 Nx 도입 및 관련 문제 해결을 지원. 🧑🏫