➜  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.

stackoverflow.com

具体的な対応は、angular.json を修正します。
以下の行をコメントまたは削除する。

For concrete correspondence, modify angular.json.
Comment or delete the following lines

"es5BrowserSupport": true

これで、ビルドが成功するようになりました。
The build is now successful.

2020-04-14

覚書 2020.04.09

kakakakakku.hatenablog.com

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 .

kazusa-pg.com

$ git update-git-for-windows

2020-04-14

覚書 2020.04.06

RxJS

v6.5以降のforkJoinと同じように引数をディクショナリで渡してmapを挟まなくても済むやつ。

github.com

www.youtube.com

medium.com

2020-01-05

Introducing Angular CLI の翻訳

Angular CLI Protractor TypeScript Npm Node Karma Localization

itnext の Introducing Angular CLI の翻訳です。

f:id:ic_lifewood:20200105202945p:plain

この投稿では、 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 を押して続行します。

f:id:ic_lifewood:20200105212013j:plain

その後、ディレクトリ構造と多数の構成とコードファイルを使用してプロジェクトを作成します。主に TypeScript および JSON 形式になります。各ファイルの役割を見てみましょう。

/e2e/ ： Webサイトの end-to-end （ユーザー動作のシミュレーション）テストが含まれています。
/node_modules/ ： npm install を使用して、すべてのサードパーティライブラリがこのフォルダーにインストールされます。
/src/ ：アプリケーションのソースコードが含まれています。ほとんどの作業はここで行われます。
/app/ ：モジュールとコンポーネントが含まれています。
/assets/ ：画像、アイコン、スタイルなどの静的アセットが含まれています。
/environments/ ：環境（本番および開発）固有の構成ファイルが含まれています。
browserslist ： CSS サポートに必要な autoprefixer
favicon.ico ： favicon
index.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 を介して著者に連絡するか、著者をフォローできます。

itnext.io

2020-01-04

Angular: Supercharging The Router の翻訳

Angular TypeScript

medium の Angular: Supercharging The Router の翻訳ですルーターがルーティング以上のことをする場合

f:id:ic_lifewood:20200104224653j:plain — Photo by Shahadat Rahman on Unsplash

アプリに「お問い合わせ」リンクがあり、専用ページにルーティングする代わりに、問い合わせフォームをポップアップ表示したいとします。

「お問い合わせ」ボタンをハードコーディングしても、クリックしたときとは異なる操作をすることは問題ありませんが、ルーターに「何か違う」ことを指示する方法があると便利ではないでしょうか。

これの最大の利点は、ツールバーまたはメニュー上のすべてのリンクを処理するユニークな方法を持つことです。実際にナビゲーションをトリガーするか、必要な他の操作を実行するかは関係ありません。

これを達成する方法を見てみましょう。

ActionLink Observer

基本的な考え方は、 CanActivate 保護メカニズムを利用してルーティング要求をインターセプトすることです。

gist.github.com

上記のコードは、ルーティングガードとして使用される ActionLinkObserver という名前のサービスを実装しています。

gist.github.com

上記の例では、 ActionLinkObserver を使用して「popup」というパスを保護しているため、アプリケーションがそこをナビゲートするたびに、オブザーバーはリクエストをインターセプトし、実際のナビゲーションが行われないようにします。

代わりに、他のユーザーが次のセクションで説明するようにコンテンツをさらに処理できるように、ルートは observer$ subject に沿ってプッシュされます。

お気づきかもしれませんが、ルートはコンポーネントプロパティとして NotFoundComponent を使用します。これは、ルーターがルートの一貫性を確認しているときにエラーをスローするのを避けるために必要であるため、コンポーネントを定義する必要があります。

ところで、これは静的ルートを定義する場合にのみ必要であるため、遅延ロードモジュールで ActionLinkObserver を使用するときはいつでも、コンポーネントプロパティを未定義のままにすることができます。

Observer の登録

ルーティングガードとして機能することに加えて、サービスは任意のコンポーネントまたはディレクティブに挿入できるため、後者は必要に応じてリンクのアクティブ化に基づいて機能します。

gist.github.com

register() メソッドを呼び出すことにより、サービスは Observable を返します。この Observable は、指定されたリンクがアクティブになると発行されます。

フィルタリングメカニズムは、関数の呼び出しに沿って渡されるアクションコードを、ルート構成で定義されているルートパス値と比較することで実現されます。

最終的にルート内でエンコードされるすべてのクエリパラメーターは、プロパティとして単一のオブジェクトにパックされ、サブスクライバーに渡されるため、結果のアクションの動作をさらにカスタマイズできます。

ActionLink Directive

汎用ディレクティブでもまったく同じロジックを実装できます。

gist.github.com

この実装では、 wmActionLink 入力が動作するリンクパスを取得し、それに応じて ActionLinkObserver サービスに登録して、結果を activate 出力に出力します。

すべてまとめる

すべてのピースを配置したら、ポップアップダイアログを表示できます。

gist.github.com

ここでは、 MatDialog の declarative version を使用しています。

このダイアログは、wmActionLink ディレクティブを使用して app.component.html テンプレートで宣言され、アクティブ化されると開きます。

自分で試してみてください

ここで説明するコードは、Github でホストされるオープンソースプロジェクトである wizdm.io の一部です。質問や好奇心については、 hello@wizdm.io までお気軽にご連絡ください。

ここで説明するコードの完全に機能するデモは、 StackBlitz でライブで利用できます。

stackblitz.com

medium.com

Angular

Azure

Deno

Design

Nx

RxJS

Typescript

Angular

Animation

Auth

Compiler

Form

Input / Output

RXJS

Security

Docker

Git

PWA

Typescript

Web Vitals

Memo for dealing with Data path '' '' should NOT have additional properties when updating Angular

Drag and Drop

Unit test

Loading

NgRx

RxJS

Angular CLIとは何ですか？

Angular CLI のインストール

Angular CLI のクイックガイド

プロジェクトの生成

プロジェクトの起動

Angular Artifacts の生成

まとめ

ActionLink Observer

Observer の登録

ActionLink Directive

すべてまとめる

自分で試してみてください