Intellij에서 Angular 개발을 디버깅 할 때까지

소개

Angular 개발의 IDE로 Intellij를 사용하여 프로젝트 작성에서 디버그까지의 도입 메모입니다.
Angular CLI, npm 경로를 통과하는 곳이 조금 번거롭기 때문에 기록에 남깁니다

개발 환경

MacBook Air (M1, 2020)
Mac OS Big Sur 11.0.1
IntelliJ Ultimate 2020.3
Node v15.4.0
Node의 Virgin 관리 anyenv/nodeenv

프로젝트 만들기

New Project로 프로젝트 만들기


템플릿 [Javascript] > [Angular]를 선택합니다.


프로젝트 이름 입력


Angular CLI 경로를 입력하고 Finish 버튼 누르기

~/.anyenv/envs/nodenv/versions/15.4.0/lib/node_modules/@angular/cli

프로젝트가 생성됩니다.


Angular CLI의 경로는 각자의 환경에 따라 다릅니다.
나는 anyenv/nodeenv 버전 관리에서 AngularCLI를 npm으로 Global로 설치합니다.

npm의 Package Manager 경로 설정

[Run] > [Edit Configurations]의 Package manager를 설정하고 OK 버튼 누르기

~/.anyenv/envs/nodenv/versions/15.4.0/lib/node_modules/npm

디버그로 정지하고 싶은 부분에 브레이크 포인트 설정

예 app.component.ts

디버그 실행

[Run] > [Debug 'Angular CLI Server'] 실행


로컬 서버에서 시작


Cosole에 표시된 [ http://localhost:4200 ]를 Cmd+Shift 키를 누른 채 클릭
디버그 용 Chrome 인스턴스가 시작되고 디버깅 할 수 있습니다.



디버깅을 위해 브라우저가 시작됩니다.


브레이크 포인트가 설정된 위치에서 처리가 중지됩니다.



이상, IntelliJ에서 Angular를 디버깅 할 때까지의 절차였습니다.