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

糸の詳細については、公式 Web サイト -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”

次の記事では、リンターと IDE を構成します。

リンク

すべてのソースは github のリポジトリ - github.com/Fafnur/buy-and-fly にあります

ここでデモを見ることができます - buy-and-fly.fafn.ru/

私のグループ: telegram、medium、vk、x.com、linkedin、site

以上がAngular 18 でのアプリケーションの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。