みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
Angularの解説シリーズです。
今回はエラーの原因がわからないときに見るブログです！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
- 原因不明のエラーの解決策がわかるかもしれない
ただ開発をしているよよくある凡ミスが多いよ！
パスは正しいのに画像が表示されない
画像等のリソースはassets/に格納してください
パスは該当ファイルからの相対パスではなく“assets/images/samehack.png”のように指定してください。
データが取得されているのに*ngIfコンポーネントが表示されない
- リターンされた値がFalthyになっていませんか？
<div *ngIf="api.getUserId | async">xxxxxxxx</div>
例えば上記のような条件式があった場合、
正常にデータを取得できていたとしても
userIdが0の場合はコンポーネントが表示されません！
これはなぜかというと、0という値はFalthyな値なので
*ngIfの条件を満たしていないという判定がなされます。
こういった場合はuserIdを1からスタートさせるようにしよう！
HTTP通信がうごかない！
http.XXXのCRUD指定はあっていますか？
fetchUser(id) {
const params = { userId: id };
http.patch("/api/user", params);
}app.get("/user", async(req, res) => {
const query=req.query.userId;
const response = await db.getUserRepository().getUser(query)
res.send(response)
})例えばこのように、フロントエンドではhttp.patchとなっているのに
バックエンドではapp.getになっている場合には正しく動作しません。
subscribe()が漏れていませんか？
fetchUser(id) {
const params = { userId: id };
http.patch("/api/user", params);
}このようにObservableを返す関数を動かす場合は
関数のあとに.subscribe()つけないとhttp通信が実行されません。
NG例
fetchUser(777)OK例
fetchUser(777).subscribe().subscribe()をつけ忘れてそもそも動いていない、というのはあるあるだよ！
NGRXのActionに引数が渡せない
export const setUser = createAction(
`ユーザの設定`,
props<{ user: User }>()
);このようなActionを呼び出す際のよくあるミスと
正しい記述を以下に示します。
NG
AppAction.setUser(user);OK
AppAction.setUser({user});インポートした関数がうまく動かない
- 同名の別の関数をインポートしていませんか？
VSCode等のエディタを使用していると、
関数名を入力した際に自動でインポート文を補完してくれますが
同名の関数が複数あると別ファイルの関数をインポートしてしまうことがあります。
- どうしてもうまく動かない
- 引数が間違っている
などのエラーが出る際は一度確認してみてください。
fetchData()のような被りそうな関数名の定義は避けよう！
それでも原因不明！
/distを削除し、npm start
意外と直ることがあります。
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
