いつも ng new 一発でテスト環境まで準備済みだが、ふとユニットテスト環境を作るのにどういうパッケージとどういう設定が必要かきになったので試してみた記録 テスト環境がない状態で Angular アプリケーションを用意 ng new のオプションにめちゃくちゃ都…

@ngrx/component が試せるようになっていたので使ってみた サンプルコード github.com @ngrx/component とは ドキュメントを見ると zone less を実現するためのヘルパーで Angular アプリケーションをより Reactive に書けるようになると書いてある 試せる A…

Angular Library を Secondary Entry Points 構成にするための手順をメモ 試したリポジトリ GitHub - kasaharu/try-angular-lib-secondary-entrypoints 新規 application を作成 Angular CLI を使ってアプリケーションを作成 Angular CLI : v9.1.0 $ npx @an…

ComponentHarness を使って Angular アプリケーションの単体テストを書いてみた 試したコード github.com ComponentHarness とは angular/components v9.0.0 に追加された testing tool テストコードを書く時の役割が ComponentHarness を作る人と Component…

Angular のデータバインディングの種類に「属性バインディング」と「プロパティバインディング」があるが明確に違いがわかっていなかったのでメモ 属性バインディングとプロパティバインディングの違い そもそも HTML 属性か DOM プロパティかの違いがある H…

構造ディレクティブとは angular.jp ドキュメントを見ると以下のように定義されている。 構造ディレクティブは HTML のレイアウトを担当します。 それらは、通常は要素を追加、削除、または操作することによって、 DOM の 構造 を構築または再構成します。 …

既存の Angular アプリに Scully を入れてみたのでそのメモ github.com Scully とは Angular 用の静的サイトジェネレーター(SSG) 各ページを pre rendering する Node.js v10.x 以上、Angular v9.x 以上が必要(今だと v9 RC を使う必要がある) 導入 インスト…

Angular CLI v8.3.0 で導入された ng deploy コマンドで Firebase への deploy を試したメモ。 automatic-deployment-with-the-cli を参考にした。 ng deploy コマンドは 3rd party library を使って様々な Hosting サービスにデプロイができる。今回は @ang…

AngularConnect の Keynote に Ivy のデバッグ機能の紹介があったので試す (Keynote の 38 分くらいから) 準備 @angular/cli@next で新規アプリケーションを作成 routing の設定と stylesheet format はなんでもよい $ npx @angular/cli@next new sample-app…

問題 Storybook を起動して IE で見ようとすると Object.assign() が見つからずエラーになっていた やったこと ES2015 の仕様に対応していないので Babel を使ってトランスパイル 入れたパッケージ @babel/polyfill · Babel 設定ファイルの変更 お手元の .st…

Angular CLI を v6.0.x 系で TypeScript を v2.8 以上にしてビルドを実行すると以下のエラーが出て、失敗する ERROR in The Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but 2.9.1 was found instead. 現時点では Angular AOT Compiler v6.0.x…

問題 innerHTML を使って表示している DOM の className にスタイルを適用できない問題が起きた rendered_body = "<div class="code-frame"><div class="highlight"><pre><span></span>$yarn</pre></div></div>" <div class="content" [innerHTML]="rendered_body"></div> .content { .code-frame { background-color: black; } } 解決策 スタイルに ::ng-deep を使用す…