Mencipta aplikasi dalam Angular 18

Dalam artikel ini kita akan melihat untuk mencipta aplikasi Angular 18 baharu.

Dokumentasi Angular menasihatkan pemasangan ng secara global:
angular.dev/tools/cli/setup-local#install-the-angular-cli

sudo npm install -g @angular/cli

Selepas menjalankan arahan:

ng new buy-and-fly

Perlu diperhatikan bahawa tidak ada keperluan yang jelas untuk ini. Anda boleh menggunakan ng daripada aplikasi itu sendiri, di mana anda perlu menambah benang(npm) sebelum melancarkan.

Untuk mencipta projek, hanya npx sudah memadai.

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

Semuanya sama tanpa CLI global.

Fail berikut telah dijana:

 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

Untuk kemudahan, mari buat aliran git:

git flow init

Jika anda tidak mempunyai pakej gitflow, anda boleh melangkau langkah ini dengan selamat.
Jom buat makan tengah hari baharu:

git flow feature start config-workspace

Kemudian padamkan package-lock.json:

rm package-lock.json

Memandangkan saya lebih suka benang, mari buat benang lalai:

yarn set version stable

Maklumat lanjut tentang benang di laman web rasmi - yarnpkg.com
Memandangkan pnpm masih menyebabkan masalah, untuk memudahkan kami akan menggunakan nodeLinker standard:

yarn config set nodeLinker node-modules

Alih keluar kebergantungan yang dipasang oleh npm:

rm -rf node_modules

Untuk tidak bersusah payah memilih tempat untuk menambah vendor baharu, mari gabungkan dependencies dan devDependencies.

Akibatnya, kami mendapat pakej berikut.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"
}

Kecualikan fail yang dijana dalam .gitignore daripada repositori:

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

Pasang kebergantungan:

yarn

Tambahkan perubahan pada git:

git add .

Komited:

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

Dalam artikel seterusnya kami akan mengkonfigurasi linters dan IDE.

Pautan

Semua sumber ada di github, dalam repositori - github.com/Fafnur/buy-and-fly

Anda boleh menonton demo di sini - buy-and-fly.fafn.ru/

Kumpulan saya: telegram, medium, vk, x.com, linkedin, tapak

Atas ialah kandungan terperinci Mencipta aplikasi dalam Angular 18. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!