Créer une application dans Angular 18

Dans cet article, nous examinerons la création d'une nouvelle application Angular 18.

La documentation Angular conseille d'installer ng globalement :
angulaire.dev/tools/cli/setup-local#install-the-angular-cli

sudo npm install -g @angular/cli

Après avoir exécuté la commande :

ng new buy-and-fly

Il convient de noter qu’il n’y a pas de nécessité évidente pour cela. Vous pouvez utiliser ng depuis l'application elle-même, où vous devez ajouter du fil (npm) avant de lancer.

Pour créer un projet, juste npx suffit.

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

Tout est pareil sans CLI globale.

Les fichiers suivants ont été générés :

 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

Pour plus de commodité, créons un flux git :

git flow init

Si vous n'avez pas le package gitflow, vous pouvez ignorer cette étape en toute sécurité.
Créons un nouveau brunch :

git flow feature start config-workspace

Puis supprimez package-lock.json :

rm package-lock.json

Puisque je préfère le fil, créons le fil par défaut :

yarn set version stable

Plus d'informations sur le fil sur le site officiel - Yarnpkg.com
Puisque pnpm pose toujours des problèmes, par souci de simplicité, nous utiliserons le standard nodeLinker :

yarn config set nodeLinker node-modules

Supprimez les dépendances installées par npm :

rm -rf node_modules

Afin de ne pas avoir à choisir où ajouter de nouveaux fournisseurs, combinons les dépendances et les devDependencies.

En conséquence, nous obtenons le package.json suivant :

{
  "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"
}

Exclure les fichiers générés dans .gitignore du référentiel :

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

Installer les dépendances :

yarn

Ajouter des modifications à git :

git add .

S'engager :

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

Dans le prochain article, nous configurerons les linters et les IDE.

Links

Toutes les sources sont sur github, dans le dépôt - github.com/Fafnur/buy-and-fly

Vous pouvez regarder la démo ici - buy-and-fly.fafn.ru/

Mes groupes : télégramme, medium, vk, x.com, linkedin, site

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!