angular16にしたら@angular-builders/custom-webpackが動かなくなった話
angular16にアップデートしたら@angular-builders/custom-webpackに互換性がなくなり困り果てていました
しかし、ついにベータ版ですが@angular-builders/custom-webpack@16.0.0がリリースされましたね!
早速アップデート
npm install --save-dev @angular-builders/custom-webpack@16.0.0-beta.0
angular.jsonまたはproject.jsonを書き換えましょう
‘‘‘ts "build": { "executor": "@angular-builders/custom-webpack:browser", // 省略
"serve": { "executor": "@angular-builders/custom-webpack:dev-server", // 省略
‘‘‘
@angular-builders/custom-webpack:xxxの別の書き方は公式ドキュメントをみるべし
angular16でもcustom-webpackがつかえるようになってうれしいです
nxを使ってangularのバージョンを最新にする
Nxのバージョンをアップデートする:
nx migrate @nrwl/workspace@latest
生成されたマイグレーションを実行する:
nx migrate --run-migrations migrations.json
Angularのバージョンを最新にする:
nx migrate @angular/core@latest
生成されたマイグレーションを実行する:
nx migrate --run-migrations migrations.json
補足2023/5/16
こういったエラーが出る場合バージョン16.1.4で不具合があります
Error: Only URLs with a scheme in: file and data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
バージョン指定してインストールしましょう
nx migrate @nrwl/workspace@16.1.0
削除したはずのプロジェクトがnx graphに出る
ディレクトリも設定ファイルも消したはずなのに・・・
破壊したはずでは( ゚Д゚)
キャッシュを消してみましょう
rm -rf node_modules/.cache/nx
windowdsの方はこちら
rmdir /s /q .\node_modules\.cache\nx
nx generateでプロジェクトが見つからない
結論
プロジェクトがないからです
そのまんまですね
作りましょう
例えば共通ライブラリのコンポーネントのプロジェクトを作りたい場合
このコマンドを使うことによって次回からcomponentsがプロジェクトとして追加されます
nx generate @nrwl/angular:lib components
これで無事HogeComponentをコマンドで作ることができます
nx generate @nrwl/angular:component HogeComponent --project=components
TypeScriptの基礎知識: はじめてのTypeScript
タイトル: TypeScriptの基礎知識: はじめてのTypeScript
はじめに
近年、JavaScriptの上位互換言語として急速に普及しているTypeScriptについて、その基礎知識を解説します。TypeScriptは、JavaScriptに静的型付けの機能を追加し、開発者がより堅牢で保守性の高いコードを書くのに役立ちます。
TypeScriptのインストール
TypeScriptを使い始めるには、まずnpm (Node.jsのパッケージマネージャー) を使用してTypeScriptをインストールします。
npm install -g typescript
型注釈
TypeScriptの主な機能は、変数や関数の引数に型注釈を付けられることです。型注釈を使用することで、コンパイル時に型の誤りを発見できます。
例:
let message: string = "Hello, TypeScript!"; let count: number = 42;
関数の引数と戻り値の型
関数の引数と戻り値にも型を指定できます。これにより、関数が正しい型の引数と戻り値を持っていることを保証できます。
例:
function add(a: number, b: number): number { return a + b; }
インターフェース
TypeScriptでは、インターフェースを使用してカスタム型を定義できます。インターフェースは、オブジェクトの構造を定義するために使われます。
例:
interface Person { name: string; age: number; const person: Person = { name: "Alice", age: 30, };
クラスと継承
TypeScriptはクラスベースのオブジェクト指向プログラミングもサポートしています。クラスは、プロパティやメソッドを持つことができ、他のクラスから継承することもできます。
例:
class Animal { constructor(public name: string) {} makeSound(): void { console.log("Some generic animal sound"); } } class Dog extends Animal { makeSound(): void { console.log("Woof! Woof!"); } } const dog = new Dog("Buddy"); dog.makeSound(); // Output: Woof! Woof!
まとめ
この記事では、TypeScriptの基礎知識について説明しました。TypeScriptはJavaScriptに型情報を追加することで、より堅牢で保守性の高いコードを書くことができます。今回紹介した機能は、TypeScriptのほんの一部に過ぎません
とても地味なjavascriptのはまりどころ
<div class="hoge" Onclick="Hoge("hoge")"></div>
.hoge {width: 400px; height: 400px; background: pink; }
function Hoge(text){ alert(text); }
一見問題なさそうですが文字列を引数に渡すときはダブルクオーテーションはいけません。
シングルクオーテーションです。
正解はこちら
<div class="hoge" Onclick="Hoge("hoge")"></div>
余談ですがとある漫画の「我流のやつは基礎ができていない」にぐさっときました・・・精進します
地味にはまったルーティング
・routes
get '/hoges/:id', to: 'hoges#show' get '/hoges/get_example', 'hoges#get_example'
・controller
def get_example ... end
うまくいかない。エラーメッセージを見るとルーティングが見つかりませんとな。
なんでじゃー!と頭を悩ませ調べに調べた結果
・controller
def index end def show end private def private_example ... end def get_example ... end
なんてことだ・・・privateメソッドに書いてしまったのであった
初心に帰った一日でした