つまづき日記

日々のエンジニア日記

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 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メソッドに書いてしまったのであった
初心に帰った一日でした