How to detect if device is desktop or mobile

npm package: ngx-device-detector https://www.npmjs.com/package/ngx-device-detector   Live Demo: https://koderlabs.github.io/ngx-device-detector/demo/ Docs: https://koderlabs.github.io/ngx-device-detector/

Angular Universal use websocket

https://stackoverflow.com/questions/52566563/how-to-use-socket-io-in-angular-with-node-js

Angular Universal 注意事項

1、https://angular.cn/generated/zips/universal/universal.zip 2、ビルドの時:Module not found: Error: Can’t resolve ‘fs’ webpack.server.config.jsに「target: ‘node’」の設定を追加します。 3、serveしてbrowserで表示される時:Error: No NgModule metadata found for ‘[object Object]’. angular.jsonファイルの「server→options」に「”bundleDependencies&#8 […]

Angular で Monaco Editor を使用する

1. ngx-monaco-editor インストール NPM パッケージをインストールします。 npm install ngx-monaco-editor –save 2. angular.json を編集する。 angular.json の project – プロジェクト名 – architect – build の中、options の assets の中に以下を記述します。 “glob”: “**/*”, “input”: “node_modules/ngx-monaco-editor/assets/monaco”, “output”: “./assets/monaco/” こんな感じになると思います。 { … 省略 … “projects”: { “app1”: { . […]

[Angular]変数のバインドで、htmlタグを埋め込む

Angularではjsの変数をhtmlへバインドする時、変数にHTMLが入っている場合はHTMLタグが自動で取り除かれます。 これはセキュリティを考慮した振る舞いです。 import { Component } from ‘@angular/core’; @Component({ selector: ‘my-app’, template: `{{scriptStr}}`, }) export class AppComponent { scriptStr: string = “<div style=’color:blue;’>hello</div>”; } TypeScript タグも含めてバインドする この振る舞いを避けたい場合は、以下のように[innerHHTML] […]

Chrome DevTools を使った非同期 JavaScript のデバッグ

はじめに JavaScript をユニークなものにしている強力な特徴の1つはそのコールバック関数を通して非同期に動作させられることです。非同期コールバックを割り当てるとイベントドリブンなコードを書くことができますが、JavaScript は直線的には実行されないため、バグを追い掛けるのがやっかいです。 幸いなことに、現在、Chrome Canary のデベロッパー ツールで非同期 JavaScript の完全なコールスタックを見ることができます! 非同期コールスタックの外観です。(このデモの流れはすぐ後に解説します。) デベロッパー ツールで非同期コールスタック機能を有効にすると、Web アプリのいろんなポイントでの状態を深掘って見ることができます。イベントリスナーや setInterval […]