[javascript] Parcel에서 Angular를 사용하는 방법은?

22 Nov 2023

javascript

Parcel에서 Angular를 사용하기 위해서는 몇 가지 설정이 필요합니다. Parcel은 기본적으로 TypeScript를 지원하기 때문에 Angular에 대한 추가적인 설정은 필요하지 않습니다.

먼저, 프로젝트 폴더에서 다음과 같이 Angular CLI를 설치합니다.

npm install -g @angular/cli

이제 Angular 프로젝트를 생성합니다.

ng new my-app

Angular 프로젝트 폴더로 이동합니다.

cd my-app

이제 Parcel을 설치합니다.

npm install --save-dev parcel-bundler

package.json 파일을 열고, scripts에 다음과 같이 "start" 스크립트를 추가합니다.

"scripts": {
  "start": "parcel index.html"
}

이제 index.html 파일을 생성하고, 다음과 같이 Angular 컴포넌트를 렌더링하는 코드를 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parcel + Angular</title>
</head>
<body>
  <app-root></app-root>
  <script src="main.ts"></script>
</body>
</html>

마지막으로 다음 명령어로 애플리케이션을 실행합니다.

npm start

이제 Parcel과 Angular가 함께 동작하는 애플리케이션을 사용할 수 있습니다.

더 자세한 내용은 Parcel 공식문서를 참고하시기 바랍니다.