2020.05.06 覚書 / 2020.05.06 memo's
Angular
Animation
Auth
CLI
Compiler
Form
Input / Output
RXJS
Security
Docker
Git
Javascript
PWA
Typescript
Web Vitals
Angular をアップデートした時にData path '''' should NOT have additional properties の対処の覚書
Memo for dealing with Data path '' '' should NOT have additional properties when updating Angular
自分のポートフォリオサイトの Angular のバージョンを上げた時に下記エラーに遭遇しました。
I encountered the following error when upgrading the version of Angular on my portfolio site.
➜ portfolio git:(feature/next) ✗ npm run build > portfolio@0.0.0 build /Users/lifewood/work/portfolio > ng build --prod Schema validation failed with the following errors: Data path "" should NOT have additional properties(es5BrowserSupport). npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! portfolio@0.0.0 build: `ng build --prod` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the portfolio@0.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/lifewood/.npm/_logs/2020-04-30T14_40_47_007Z-debug.log ➜ portfolio git:(feature/next) ✗ npm run build
更新時のバージョンは、下記の通り
The updated version is as follows
@angular/core@10.0.0-next.4 @angular/cli@10.0.0-next.3
ググったら、下記情報が。
If you googling, the following information is available.
具体的な対応は、angular.json を修正します。
以下の行をコメントまたは削除する。
For concrete correspondence, modify angular.json.
Comment or delete the following lines
"es5BrowserSupport": true
これで、ビルドが成功するようになりました。
The build is now successful.
覚書 2020.04.09
- switch
$ git checkout -b my-git-checkout $ git switch -c my-git-switch
- restore
$ git checkout ${HASH} .
$ git checkout master~2 .
$ git restore -s ${HASH} .
$ git restore -s master~2 .
$ git update-git-for-windows
覚書 2020.04.06
Introducing Angular CLI の翻訳
itnext の Introducing Angular CLI の翻訳です。
この投稿では、 Angular CLI について学び、それを使用して新しい Angular プロジェクトを初期化する方法を説明します。
Angular CLIとは何ですか？
Angular CLI は、Angular プロジェクトを初期化して操作するための公式ツールです。 TypeScript や Webpack などの複雑な構成やビルドツールの手間を省くことができます。
Angular CLI をインストールしたら、1つのコマンドを実行してプロジェクトを生成し、別のコマンドを実行してローカル開発サーバーを使用してアプリケーションを実行する必要があります。
最近のほとんどのフロントエンドツールと同様に、 Angular CLI は Node.js の上に構築されています。
Node.js は、サーバーでJavaScriptを実行し、サーバー側の Web アプリケーションを構築できるサーバーテクノロジーです。 ただし、 Angular はフロントエンドテクノロジーであるため、開発マシンに Node.js をインストールする必要がある場合でも、 CLI の実行専用です。
本番用にアプリを構築したら、最終的なバンドルは静的な HTML 、 CSS 、および JavaScript であり、任意のサーバーまたは CDN で提供できるため、 Node.js は必要ありません。
つまり、 Angular でフルスタック Web アプリケーションを構築している場合、フロントエンドとバックエンドに JavaScript を使用する場合、バックエンドパーツを作成するために Node.js が必要になることがあります。
MEAN スタックをチェックしてください。 MongoDB 、 Express （ Node.js 上に構築された Web サーバーと REST API フレームワーク）、 Angular を含むアーキテクチャです。 ステップバイステップのチュートリアルを開始したい場合は、この記事を読むことができます。
この場合、 Node.js はアプリのバックエンド部分を構築するために使用され、 PHP 、 Ruby 、 Python などの必要なサーバーサイドテクノロジーに置き換えることができます。 ただし、 Angular は、 CLI ツールと npm からのパッケージのインストールを除き、 Node.js に依存しません。
NPM は Node Package Manager の略です。 Node パッケージをホストするためのレジストリです。 近年では、 Angular 、 React 、 Vue.js 、 Bootstrap などのフロントエンドパッケージやライブラリの公開にも使用されています。
注：Angular Book：Angularで最初のWebアプリを無料で構築できます。
Angular CLI のインストール
最初に、開発マシンに Node と npm をインストールする必要があります。 次のような多くの方法があります。
- システム内の node の複数のバージョンをインストールおよび操作するために NVM （Node Version Manager）を使用
- オペレーティングシステムの公式 package manager を使用する
- 公式 Web サイトからインストールします。
シンプルに保ち、公式ウェブサイトを使用しましょう。 ダウンロードページにアクセスして、 Windows 用のバイナリを取得し、セットアップウィザードに従ってください。
Node がインストールされているバージョンを表示するコマンドプロンプトで次のコマンドを実行することにより、 Node がシステムにインストールされていることを確認できます。
$ node -v
次に、以下のコマンドを実行して Angular CLI をインストールします。
$ npm install @angular/cli
この記事の執筆時点で、 Angular 8.3 がインストールされます。
Angular 9 をインストールする場合は、次のように次のタグを追加するだけです。
$ npm install @angular/cli@next
コマンドが正常に終了したら、 Angular CLI をインストールされているか確認する必要があります。
Angular CLI のクイックガイド
Angular CLI をインストールした後、多くのコマンドを実行できます。 インストールされた CLI のバージョンを確認することから始めましょう。
$ ng version
実行する必要がある 2 番目のコマンドは、完全な使用法のヘルプを取得するための help コマンドです。
$ ng help
CLI は次のコマンドを紹介します。
add ： プロジェクトに外部ライブラリのサポートを追加します。
build (b) ： Angularアプリを、指定された出力パスにある dist/ という名前の出力ディレクトリにコンパイルします。 ワークスペースディレクトリ内から実行する必要があります。
config ： Angular の設定値を取得または設定します。
doc (d) ： 公式のAngularドキュメント（ angular.io ）をブラウザーで開き、特定のキーワードを検索します。
e2e (e) ： Angular アプリをビルドして提供し、Protractor を使用して end-to-end のテストを実行します。
generate (g) ： schematic に基づいてファイルを生成および/または変更します。
help ： 使用可能なコマンドとその簡単な説明をリストします。
lint (l) ： 特定のプロジェクトフォルダー内の Angular アプリコードで linting ツールを実行します。
new (n) ： 新しいワークスペースと初期の Angular アプリを作成します。
run ： プロジェクトで定義されたカスタムターゲットを実行します。
serve (s) ： アプリをビルドして提供し、ファイルの変更時に再構築します。
test (t) ： プロジェクトで単体テストを実行します。
update ： アプリケーションとその依存関係を更新します。 https://update.angular.io/ を参照してください
version (v) ： Angular CLI バージョンを出力します。
xi18n ： ソースコードから i18n メッセージを抽出します。
プロジェクトの生成
Angular CLI を使用して、コマンドラインインターフェイスで次のコマンドを実行することにより、 Angular プロジェクトをすばやく生成できます。
$ ng new frontend
注： frontend はプロジェクトの名前です。 もちろん、プロジェクトの有効な名前を選択できます。 フルスタックアプリケーションを作成するため、フロントエンドアプリケーションの名前としてフロントエンドを使用しています。
前述のように、 CLI は、 Angular ルーティングを追加しますかと尋ねます。 そして、 y （はい）または n （いいえ）を入力して答えることができます。これはデフォルトのオプションです。 また、使用するスタイルシート形式（ CSS など）についても尋ねられます。 オプションを選択し、 Enter を押して続行します。
その後、ディレクトリ構造と多数の構成とコードファイルを使用してプロジェクトを作成します。 主に TypeScript および JSON 形式になります。 各ファイルの役割を見てみましょう。
/e2e/： Webサイトの end-to-end （ユーザー動作のシミュレーション）テストが含まれています。/node_modules/：npm installを使用して、すべてのサードパーティライブラリがこのフォルダーにインストールされます。/src/： アプリケーションのソースコードが含まれています。 ほとんどの作業はここで行われます。/app/： モジュールとコンポーネントが含まれています。/assets/： 画像、アイコン、スタイルなどの静的アセットが含まれています。/environments/： 環境（本番および開発）固有の構成ファイルが含まれています。browserslist： CSS サポートに必要な autoprefixerfavicon.ico： faviconindex.html： メイン HTML ファイルkarma.conf.js： Karma （テストツール）の構成ファイルmain.ts： AppModule が bootstrap されるメインの開始ファイルpolyfills.ts： Angular に必要なポリフィルstyles.css： プロジェクトのグローバルスタイルシートファイルtest.ts： これは Karma の構成ファイルです。tsconfig.*.json： TypeScript の構成ファイルangular.json： CLI の構成が含まれています。package.json： プロジェクトの基本情報（名前、説明、依存関係）が含まれますREADME.md： プロジェクトの説明を含むマークダウンファイルtsconfig.json： TypeScriptの構成ファイルtslint.json： TSlint （静的分析ツール）の構成ファイル
プロジェクトの起動
Angular CLI は、ローカルマシンでフロントエンドアプリを開発するための完全な tool-chain を提供します。 そのため、プロジェクトにサービスを提供するためにローカルサーバーをインストールする必要はありません。ターミナルから ng serve コマンドを使用してプロジェクトをローカルにサービスすることができます。
まず、プロジェクトのフォルダー内を移動し、次のコマンドを実行します。
$ cd frontend $ ng serve
これで、 http://localhost:4200/ アドレスに移動して、フロントエンドアプリケーションでの再生を開始できます。 ソースファイルを変更すると、ページは自動的にライブリロードされます。
Angular Artifacts の生成
Angular CLI には、開発者がモジュール、コンポーネント、ディレクティブ、パイプ、サービスなどの基本的な Angular アーティファクトを生成するのに役立つ ng generate コマンドが用意されています。
$ ng generate component my-component
my-component はコンポーネントの名前です。 Angular CLI は、src/app.module.ts ファイル内の components 、directives 、および pipes への参照を自動的に追加します。
components 、directives 、または pipes を別のモジュール（メインアプリケーションモジュール、 app.module.ts 以外）に追加する場合は、モジュール名とスラッシュを component の名前の前に付けるだけです。
$ ng g component my-module/my-component
my-module は既存のモジュールの名前です。
まとめ
この投稿では、開発マシンに Angular CLI をインストールする方法を見て、それを使用して新しい Angular プロジェクトをゼロから初期化しました。
モジュール、コンポーネント、サービスなどのAngularアーティファクトを生成するためにプロジェクトの開発全体で使用できるさまざまなコマンドも確認しました。
個人の Web サイトである Twitter、 LinkedIn 、および Github を介して著者に連絡するか、著者をフォローできます。