Créer une application dans Angular 18-js tutoriel-php.cn

Créer une application dans Angular 18

DDD

Libérer： 2024-09-13 22:17:32

original

658 Les gens l'ont consulté

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

Copier après la connexion

Après avoir exécuté la commande :

ng new buy-and-fly

Copier après la connexion

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

Copier après la connexion

Создание приложения на Angular 18

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

Copier après la connexion

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

git flow init

Copier après la connexion

Создание приложения на Angular 18

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

Copier après la connexion

Puis supprimez package-lock.json :

rm package-lock.json

Copier après la connexion

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

yarn set version stable

Copier après la connexion

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

Copier après la connexion

Supprimez les dépendances installées par npm :

rm -rf node_modules

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Installer les dépendances :

yarn

Copier après la connexion

Ajouter des modifications à git :

git add .

Copier après la connexion

S'engager :

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

Copier après la connexion

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!