查看使用[Angular] ng new命令生成的工作区的配置详细信息

1 年 ago
科, 雅
4 minutes

触发

    • Angularに触れる機会があり、チュートリアルを進めていく中で自動生成されるファイルを読み解くのが大変。

 

    あまり理解していなくとも、気付けばアプリが動いていた。（フレームワークのいいところでもある）

因为从这个经历中，我想顺便整理一下应用程序的配置文件，所以我会在这篇文章中进行总结。

请参考公式文档教程《英雄之旅导览》，使用命令 ng new angular-tour-heroes 开始，解释每个生成文件的概要。同时附上了官方文档的链接，详细信息请参阅链接。

执行环境 (shí

    • angular-cli: 13.3.0

 

    • Node: 14.18.1

 

    Package Manager: npm 8.5.5

生成的文件和目录结构

执行 ng new angular-tour-heroes 命令时，您可以选择以下对话框中的选项来进行路由设置和选择样式表的格式。
本次配置将选择默认路由设置为 “No”，样式表格式为 “CSS”。

C:\Angular>ng new angular-tour-heroes
? Would you like to add Angular routing? (y/N) y or N ⇒デフォルトはNo
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org                                             ]

执行命令后，会自动创建一个名为angular-tour-heroes的Angular工作空间，并为我们创建所需的文件，以下文件夹将被组织起来。请参考：https://angular.jp/guide/file-structure

/angular-tour-heroes                  // アプリルート
├── /node_modules                     // npmで管理されたパッケージまとめフォルダ
├── /src                              // アプリ本体の格納フォルダ
│   ├── /app                          // Angularアプリのコード一式
│   │   ├── app.component.html        // ルートコンポーネントhtml
│   │   ├── app.component.css         // ルートコンポーネントcss
│   │   ├── app.component.spec.ts     // テストスクリプト
│   │   ├── app.component.ts          // ルートコンポーネント
│   │   └── app.module.ts             // ルートモジュール
│   ├── /assets                       // 静的アセットの格納フォルダ
│   ├── /environments                 // 環境設定の格納フォルダ
│   │   ├── environment.prod.ts       // ターゲット固有向け
│   │   └── environment.ts            // 本番環境向け
│   ├── favicon.ico                   // ファビコン（Webページのアイコン）
│   ├── index.html    - ★            // メインページ
│   ├── main.ts       - ★ 　　　　　　// Angularアプリ起動コード 
│   ├── polyfills.ts　　　　　　　　　 // ポリフィル（古いWebブラウザへのサポート設定）
│   ├── styles.css                    // Angularアプリ全体のスタイルファイル
│   └── test.ts                       // テスト設定ファイル（基本編集しない）
├── .browserslistrc                   // ターゲットブラウザ、フロントエンドツール間のNode.jsバージョン共有設定
├── .editorconfig                     // コードエディタ向け設定
├── .gitignore                        // Gitに無視してほしいファイルの設定
├── angular.json      - ★            // Angularワークスペース設定
├── karma.conf.js                     // テストフレームワークKarma(*1)設定ファイル
├── package-lock.json                 // 利用するパッケージ情報まとめ（直接編集しない）
├── package.json      - ★            // パッケージ情報まとめ
├── README.md                         // 本プロジェクトに関するREADME
├── tsconfig.app.json                 // アプリケーション固有のTypeScript(*2)設定
├── tsconfig.json     - ★            // TypeScriptコンパイラの設定情報
└── tsconfig.spec.json                // アプリケーションテスト用のTypeScript設定

(*1) Karma: 请参考官方网站https://karma-runner.github.io/2.0/config/configuration-file.html。
(*2) TypeScript: 请查看官方网站https://www.typescriptlang.org/。

从以上中摘选出了Angular应用程序运行所需的（但很少人知道的）关键点（★印）。

    • メインファイル

main.ts
index.html

各種設定ファイル

package.json
tsconfig.json
angular.json

主文件

    • main.ts

 

    index.html

主要.ts

启动Angular应用的代码。
https://angular.io/guide/file-structure#application-source-files

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

platformBrowserDynamic是Angular的标准函数，用于在浏览器中启动应用程序。它通过platformBrowserDynamic#bootstrapModule方法启动了根模块AppModule。换句话说，通过引导应用程序的根模块AppModule在浏览器中运行，实现了应用程序的操作。

索引.html

应用程序的主要页面正在运行。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularTourHeroes</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

在标签中，通过元素显示了根组件AppComponent的模板（即templateUrl指定的html文件，app.component.html）。

配置文件

    • package.json

 

    • tsconfig.json

 

    angular.json

package.json 文件

用于管理应用程序使用的库信息的配置文件。
npm命令和yarn命令将根据此文件中定义的包进行安装。
https://angular.jp/guide/npm-packages#packagejson

{
  "name": "angular-tour-heroes",            // アプリ名
  "version": "0.0.0",                       // バージョン
  "scripts": {                              // npm run で実行できるコマンド
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,                          // モジュール公開の可否
  "dependencies": {                         // 依存するモジュールとバージョン管理
    ...
  },
  "devDependencies": {                      // アプリで利用する開発ライブラリ
    ...
  }
}

tsconfig.json配置文件 (tsconfig.json configuration file)

TypeScript编译器的配置文件，用于设定其行为。
https://angular.io/guide/typescript-configuration#configuration-files

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {                            // コンパイルオプション
    "baseUrl": "./",                              // 相対パスの起点となるディレクトリパス
    "outDir": "./dist/out-tsc",                   // .jsファイルが出力されるディレクトリパス
    "forceConsistentCasingInFileNames": true,     // ファイル名の大文字小文字を区別する
    "strict": true,                               // true:strict系(*1)が全て有効となる
    "noImplicitOverride": true,                   // true:継承クラスがもつ同名の関数には`override`をつけないといけない
    "noPropertyAccessFromIndexSignature": true,   // true:定義していないfieldへのアクセスを許容しない
    "noImplicitReturns": true,                    // true:戻り値が必要な関数にreturnが存在しなくてもよいことを許容しない
    "noFallthroughCasesInSwitch": true,           // true:switch文において、次のcaseへ処理を持ち越すことを許容しない
    "sourceMap": true,                            // ソースマップの生成
    "declaration": false,                         // 全てのTypeScript/JavaScriptファイルに`d.ts`を生成するか
    "downlevelIteration": true,                   // 古いバージョンのJavaScriptにトランスパイルするか
    "experimentalDecorators": true,               // デコレーターを有効にするか
    "moduleResolution": "node",                   // モジュールの解決方法; node
    "importHelpers": true,                        // ヘルパー関数をtslibモジュールからインストールするか
    "target": "es2017",                           // 生成するJavaScriptのバージョン
    "module": "es2020",                           // 生成するJavaScriptモジュールの形式
    "lib": [                                      // コンパイル時にincludeされるライブラリ
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,     // false: i18n属性によってテンプレートでタグづけされたメッセージのレガシーID生成を指示しない
    "strictInjectionParameters": true,            // true:インジェクションタイプを必ず指定しなければならない
    "strictInputAccessModifiers": true,           // Inputプロパティにバインディングする際、アクセス修飾子private/protected/readonlyを許容しない
    "strictTemplates": true                       // true: 厳密なテンプレートタイプチェック(*2)を有効
  }
}

(1) 严格模式：https://www.typescriptlang.org/tsconfig#strict
(2) 严格模板：https://angular.jp/guide/template-typecheck#strict-mode

angular.json 可以进行重构。

使用Angular CLI进行构建和开发工具方面的默认配置文件，涉及整个工作区和项目的特定配置。指定的路径值是以根工作区文件夹为基准。请参考：https://angular.jp/guide/workspace-config。

angular.json文件（由于过长，已折叠）：
{
“$schema”: “./node_modules/@angular/cli/lib/config/schema.json”,
“version”: 1,
“newProjectRoot”: “projects”,
“projects”: {
“angular-tour-heroes”: {
“projectType”: “application”,
“schematics”: {
“@schematics/angular:application”: {
“strict”: true
}
},
“root”: “”,
“sourceRoot”: “src”,
“prefix”: “app”,
“architect”: {
“build”: {
“builder”: “@angular-devkit/build-angular:browser”,
“options”: {
“outputPath”: “dist/angular-tour-heroes”,
“index”: “src/index.html”,
“main”: “src/main.ts”,
“polyfills”: “src/polyfills.ts”,
“tsConfig”: “tsconfig.app.json”,
“assets”: [
“src/favicon.ico”,
“src/assets”
],
“styles”: [
“src/styles.css”
],
“scripts”: []
},
“configurations”: {
“production”: {
“budgets”: [
{
“type”: “initial”,
“maximumWarning”: “500kb”,
“maximumError”: “1mb”
},
{
“type”: “anyComponentStyle”,
“maximumWarning”: “2kb”,
“maximumError”: “4kb”
}
],
“fileReplacements”: [
{
“replace”: “src/environments/environment.ts”,
“with”: “src/environments/environment.prod.ts”
}
],
“outputHashing”: “all”
},
“development”: {
“buildOptimizer”: false,
“optimization”: false,
“vendorChunk”: true,
“extractLicenses”: false,
“sourceMap”: true,
“namedChunks”: true
}
},
“defaultConfiguration”: “production”
},
“serve”: {
“builder”: “@angular-devkit/build-angular:dev-server”,
“configurations”: {
“production”: {
“browserTarget”: “angular-tour-heroes:build:production”
},
“development”: {
“browserTarget”: “angular-tour-heroes:build:development”
}
},
“defaultConfiguration”: “development”
},
“extract-i18n”: {
“builder”: “@angular-devkit/build-angular:extract-i18n”,
“options”: {
“browserTarget”: “angular-tour-heroes:build”
}
},
“test”: {
“builder”: “@angular-devkit/build-angular:karma”,
“options”: {
“main”: “src/test.ts”,
“polyfills”: “src/polyfills.ts”,
“tsConfig”: “tsconfig.spec.json”,
“karmaConfig”: “karma.conf.js”,
“assets”: [
“src/favicon.ico”,
“src/assets”
],
“styles”: [
“src/styles.css”
],
“scripts”: []
}
}
}
}
},
“defaultProject”: “angular-tour-heroes”
}
✖
广告
将在 10 秒后关闭
bannerAds