在 Angular 18 中創建應用程式

在本文中，我們將研究創建一個新的 Angular 18 應用程式。

Angular 文件建議全域安裝 ng：
angular.dev/tools/cli/setup-local#install-the-angular-cli

sudo npm install -g @angular/cli

執行指令後：

ng new buy-and-fly

值得注意的是，這並沒有明顯的必要。您可以從應用程式本身使用 ng，您需要在啟動之前新增yarn(npm)。

要建立一個項目，只需 npx 就足夠了。

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

沒有全域 CLI，一切都是一樣的。

產生了以下檔案：

 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

為了方便起見，讓我們建立一個 git 流：

git flow init

如果您沒有 gitflow 軟體包，您可以安全地跳過此步驟。
讓我們創造一個新的早午餐：

git flow feature start config-workspace

然後刪除package-lock.json：

rm package-lock.json

由於我更喜歡紗線，所以讓我們製作預設紗線：

yarn set version stable

更多關於yarn的資訊請造訪官方網站-yarnpkg.com
由於 pnpm 仍然會造成問題，為了簡單起見，我們將使用標準的 nodeLinker：

yarn config set nodeLinker node-modules

刪除 npm 安裝的依賴項：

rm -rf node_modules

為了不用費心選擇在哪裡新增供應商，讓我們將依賴項和 devDependency 結合起來。

結果，我們得到以下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"
}

從儲存庫中排除 .gitignore 中產生的檔案：

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

安裝依賴項：

yarn

向 git 新增變更：

git add .

提交：

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

在下一篇文章中，我們將設定 linter 和 IDE。

連結

所有來源都在 github 上的儲存庫 - github.com/Fafnur/buy-and-fly

您可以在這裡觀看示範 - buy-and-fly.fafn.ru/

我的群組：telegram、medium、vk、x.com、linkedin、site

以上是在 Angular 18 中創建應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！