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.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
