Angular vscode 開発環境構築

## Angular CLIをインストールする
Angular CLIをインストールするには、ターミナルウィンドウを開き、次のコマンドを実行します:
```typescript
npm install -g @angular/cli
```
バージョンを指定してインストール
```typescript
npm install -g @angular/cli@10.1.0
```
```typescript
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular/cli@17.1.2',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^18.13.0 || >=20.9.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6 || >=8.0.0',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v16.14.2', npm: '8.5.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/architect@0.1701.2',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^18.13.0 || >=20.9.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6 || >=8.0.0',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v16.14.2', npm: '8.5.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/core@17.1.2',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^18.13.0 || >=20.9.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6 || >=8.0.0',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v16.14.2', npm: '8.5.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/schematics@17.1.2',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^18.13.0 || >=20.9.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6 || >=8.0.0',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v16.14.2', npm: '8.5.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@schematics/angular@17.1.2',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^18.13.0 || >=20.9.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6 || >=8.0.0',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v16.14.2', npm: '8.5.0' }
npm WARN EBADENGINE }

added 61 packages, removed 49 packages, changed 170 packages, and audited 232 packages in 35s

45 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```
On Windows client computers, the execution of PowerShell scripts is disabled by default. To allow the execution of PowerShell scripts, which is needed for npm global binaries, you must set the following execution policy
```typescript
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
```
## ワークスペースと初期アプリケーションを作成する
次に示すように、CLIコマンド ng new を実行し、my-app という名前を付けます。
```typescript
ng new my-app
```
```typescript
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. No
Global setting: disabled
Local setting: No local workspace configuration file.
Effective status: disabled
? Which stylesheet format would you like to use? CSS
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
CREATE my-app/angular.json (2687 bytes)
CREATE my-app/package.json (1075 bytes)
CREATE my-app/README.md (1086 bytes)
CREATE my-app/tsconfig.json (936 bytes)
CREATE my-app/.editorconfig (290 bytes)
CREATE my-app/.gitignore (590 bytes)
CREATE my-app/tsconfig.app.json (277 bytes)
CREATE my-app/tsconfig.spec.json (287 bytes)
CREATE my-app/.vscode/extensions.json (134 bytes)
CREATE my-app/.vscode/launch.json (490 bytes)
CREATE my-app/.vscode/tasks.json (980 bytes)
CREATE my-app/src/main.ts (256 bytes)
CREATE my-app/src/favicon.ico (15086 bytes)
CREATE my-app/src/index.html (304 bytes)
CREATE my-app/src/styles.css (81 bytes)
CREATE my-app/src/app/app.component.html (20239 bytes)
CREATE my-app/src/app/app.component.spec.ts (945 bytes)
CREATE my-app/src/app/app.component.ts (315 bytes)
CREATE my-app/src/app/app.component.css (0 bytes)
CREATE my-app/src/app/app.config.ts (235 bytes)
CREATE my-app/src/app/app.routes.ts (80 bytes)
CREATE my-app/src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
```
## vscodeを起動する
```console
my-app>code .
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3184769/55e27b1f-7f7a-8219-01ab-cf0a35bb18f9.png)
## アプリケーションを実行する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3184769/4b0932b5-fe9c-509c-7b4b-7bbe311f1bea.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3184769/16a9718b-4d79-3459-9aa3-9fee3557d68c.png)