Erstellen einer Anwendung in Angular 18

In diesem Artikel befassen wir uns mit der Erstellung einer neuen Angular 18-Anwendung.

In der Angular-Dokumentation wird die globale Installation von ng empfohlen:
angle.dev/tools/cli/setup-local#install-the-angular-cli

sudo npm install -g @angular/cli

Nach dem Ausführen des Befehls:

ng new buy-and-fly

Es ist erwähnenswert, dass hierfür kein offensichtlicher Bedarf besteht. Sie können ng über die Anwendung selbst verwenden, wo Sie vor dem Start Garn (npm) hinzufügen müssen.

Um ein Projekt zu erstellen, reicht nur npx.

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

Ohne globale CLI ist alles beim Alten.

Die folgenden Dateien wurden generiert:

 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

Der Einfachheit halber erstellen wir einen Git-Flow:

git flow init

Wenn Sie nicht über das Gitflow-Paket verfügen, können Sie diesen Schritt getrost überspringen.
Lasst uns einen neuen Brunch kreieren:

git flow feature start config-workspace

Dann löschen Sie package-lock.json:

rm package-lock.json

Da ich Garn bevorzuge, machen wir das Standardgarn:

yarn set version stable

Weitere Informationen über Garn auf der offiziellen Website – Yarnpkg.com
Da pnpm immer noch Probleme bereitet, verwenden wir der Einfachheit halber den Standard-NodeLinker:

yarn config set nodeLinker node-modules

Abhängigkeiten entfernen, die von npm installiert wurden:

rm -rf node_modules

Um sich nicht die Mühe zu machen, auszuwählen, wo neue Anbieter hinzugefügt werden sollen, kombinieren wir Abhängigkeiten und DevDependencies.

Als Ergebnis erhalten wir die folgende 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"
}

Generierte Dateien in .gitignore aus dem Repository ausschließen:

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

Abhängigkeiten installieren:

yarn

Änderungen zu Git hinzufügen:

git add .

Commit:

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

Im nächsten Artikel werden wir Linters und IDEs konfigurieren.

Links

Alle Quellen befinden sich auf Github im Repository – github.com/Fafnur/buy-and-fly

Sie können sich die Demo hier ansehen – buy-and-fly.fafn.ru/

Meine Gruppen: Telegram, Medium, VK, x.com, LinkedIn, Site

Das obige ist der detaillierte Inhalt vonErstellen einer Anwendung in Angular 18. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!