Angular 18에서 애플리케이션 만들기

이 기사에서는 새로운 Angular 18 애플리케이션을 만드는 방법을 살펴보겠습니다.

Angular 문서에서는 ng를 전역적으로 설치하도록 권장합니다.
angular.dev/tools/cli/setup-local#install-the-angular-cli

sudo npm install -g @angular/cli

명령 실행 후:

ng new buy-and-fly

이것이 반드시 필요하지는 않다는 점은 주목할 가치가 있습니다. 실행하기 전에 원사(npm)를 추가해야 하는 애플리케이션 자체에서 ng를 사용할 수 있습니다.

프로젝트를 만들려면 npx만 있으면 충분합니다.

npx -p @angular/cli ng new buy-and-fly

글로벌 CLI가 없으면 모든 것이 동일합니다.

다음 파일이 생성되었습니다:

 buy-and-fly
├── angular.json
├── package.json
├── package-lock.json
├── public
│   └── favicon.ico
├── README.md
├── server.ts
├── src
│   ├── app
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.config.server.ts
│   │   ├── app.config.ts
│   │   └── app.routes.ts
│   ├── index.html
│   ├── main.server.ts
│   ├── main.ts
│   └── styles.scss
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

편의를 위해 git 흐름을 만들어 보겠습니다.

git flow init

gitflow 패키지가 없으면 이 단계를 건너뛰어도 됩니다.
새로운 브런치를 만들어 보세요:

git flow feature start config-workspace

그런 다음 package-lock.json을 삭제하세요.

rm package-lock.json

저는 실을 선호하므로 기본 실을 만들어 보겠습니다.

yarn set version stable

얀에 대한 자세한 내용은 공식 홈페이지(Yanpkg.com)에서 확인하세요
pnpm은 여전히 ​​문제를 일으키므로 단순화를 위해 표준 nodeLinker를 사용합니다.

yarn config set nodeLinker node-modules

npm으로 설치된 종속성을 제거합니다.

rm -rf node_modules

새 공급업체를 추가할 위치를 선택하는 데 어려움을 겪지 않도록 종속성과 devDependency를 결합해 보겠습니다.

결과적으로 다음 package.json을 얻게 됩니다.

{
  "name": "buy-and-fly",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:buy-and-fly": "node dist/buy-and-fly/server/server.mjs"
  },
  "private": true,
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.0.5",
    "@angular/animations": "^18.0.4",
    "@angular/cli": "^18.0.5",
    "@angular/common": "^18.0.4",
    "@angular/compiler": "^18.0.4",
    "@angular/compiler-cli": "^18.0.4",
    "@angular/core": "^18.0.4",
    "@angular/forms": "^18.0.4",
    "@angular/platform-browser": "^18.0.4",
    "@angular/platform-browser-dynamic": "^18.0.4",
    "@angular/platform-server": "^18.0.4",
    "@angular/router": "^18.0.4",
    "@angular/ssr": "^18.0.5",
    "@types/express": "^4.17.21",
    "@types/jasmine": "~5.1.4",
    "@types/node": "^20.14.8",
    "express": "^4.19.2",
    "jasmine-core": "~5.1.2",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.1",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "rxjs": "~7.8.1",
    "tslib": "^2.6.3",
    "typescript": "~5.4.5",
    "zone.js": "~0.14.7"
  },
  "packageManager": "yarn@4.3.1"
}

저장소에서 .gitignore에 생성된 파일을 제외합니다.

# Custom
.yarn
.angular
*.patch
.husky/*
junit.xml
/junit
.env
package-lock.json
yarn.lock
.nx
src/i18n/source.xlf

종속성 설치:

yarn

git에 변경사항 추가:

git add .

커밋:

git commit -m “[workspace] Change package manager”

다음 글에서는 린터와 IDE를 구성하겠습니다.

모래밭

모든 소스는 github, 저장소(github.com/Fafnur/buy-and-fly)에 있습니다

여기에서 데모를 시청할 수 있습니다 - buy-and-fly.fafn.ru/

내 그룹: Telegram, Medium, vk, x.com, linkedin, site

위 내용은 Angular 18에서 애플리케이션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!