らいふうっどの閑話休題

興味のあることをゆる~く書いていく

2020.05.23 覚書 / 2020.05.23 memo's

Angular

t.co

Angular Components with Extracted Immutable State

t.co

t.co

Angular Components with Extracted Immutable State

Effortless Web Storage Persistence in Angular Forms

t.co

t.co

Azure

t.co

CSS

t.co

Deno

t.co

What is Deno and will it Replace NodeJS

Design

Designing Scalable Angular Apps: Pages, Containers and Views

Smoother UX on Page Load with Angular Resolvers

Nx

Improved Next.js support, auto-populated publishable library dependencies, and more in Nx 9.3!

RxJS

github.com

Marble testing with RxJS testing utils

RxJS Terms You MUST know in Angular

Typescript

t.co

t.co

2020.05.06 覚書 / 2020.05.06 memo's

Angular

Animation

Animate Dynamic Components in Angular

Auth

medium.com

CLI

medium.com

Compiler

medium.com

Form

medium.com

Input / Output

medium.com

RXJS

medium.com

Master RxJS: Frontend data stores in services using BehaviorSubject

Security

medium.com

Docker

medium.com

Git

medium.com

Javascript

medium.com

PWA

medium.com

Typescript

Fun with Functors in TypeScript

Web Vitals

web.dev

Angular をアップデートした時にData path '''' should NOT have additional properties の対処の覚書

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

f:id:ic_lifewood:20200501001838p:plain

自分のポートフォリオサイトの 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.

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

Drag and Drop

medium.com

medium.com

Unit test

medium.com

medium.com

Loading

levelup.gitconnected.com

NgRx

medium.com

RxJS

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

github.com

www.youtube.com

medium.com

medium.com

Introducing Angular CLI の翻訳

itnextIntroducing 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 はアプリのバックエンド部分を構築するために使用され、 PHPRubyPython などの必要なサーバーサイドテクノロジーに置き換えることができます。 ただし、 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/ : 環境(本番および開発)固有の構成ファイルが含まれています。
  • browserslistCSS サポートに必要な autoprefixer
  • favicon.icofavicon
  • index.html : メイン HTML ファイル
  • karma.conf.js : Karma (テストツール)の構成ファイル
  • main.ts : AppModule が bootstrap されるメインの開始ファイル
  • polyfills.ts : Angular に必要なポリフィル
  • styles.css : プロジェクトのグローバルスタイルシートファイル
  • test.ts : これは Karma の構成ファイルです。
  • tsconfig.*.json : TypeScript の構成ファイル
  • angular.jsonCLI の構成が含まれています。
  • 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 ファイル内の componentsdirectives 、および pipes への参照を自動的に追加します。

components 、directives 、または pipes を別のモジュール(メインアプリケーションモジュール、 app.module.ts 以外)に追加する場合は、モジュール名とスラッシュを component の名前の前に付けるだけです。

$ ng g component my-module/my-component

my-module は既存のモジュールの名前です。

まとめ

この投稿では、開発マシンに Angular CLI をインストールする方法を見て、それを使用して新しい Angular プロジェクトをゼロから初期化しました。

モジュール、コンポーネント、サービスなどのAngularアーティファクトを生成するためにプロジェクトの開発全体で使用できるさまざまなコマンドも確認しました。

個人の Web サイトである TwitterLinkedIn 、および Github を介して著者に連絡するか、著者をフォローできます。

itnext.io

itnext.io