この記事では、新しい 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 サイトの他の関連記事を参照してください。