角度のアプリケーション上の問題を解決する本当の挑戦することができます.それはすべて私たちのアプリが動作しない場合は、はるかに困難になると私たちを与えるすべては、コンソールでいくつかの“重要な”赤い線です.
しかし、私を信じて、結局、それはとても痛くないでしょう.あなたがしなければならないほとんどすべての角度の開発者が直面していると少なくとも一度ヒットするいくつかの一般的な間違いを避けることです.
7つの最も一般的な間違いを分析するこの記事を読んでください.
私は、それが悪い習慣または単にエラーである点について説明します、そして、私は少なくとも一つの可能な解決であなたを正しい方向に向けます.

1 .必要な角度モジュールのインポート

初心者の場合、最も一般的なミスは、必要なモジュールをインポートすることではありません.なぜ?あなたがフレームワークについて十分に知らないので.
角度の完全な概要を持ついくつかの時間がかかります.
間違いは次のようになります.

Can't bind to 'ngModel' since it isn't a known property of 'input'

このエラーは角型モジュールがモジュールにインポートされていないことを示します.
次のエラーを取得します.

Unhandled Promise rejection: No provider for HttpClient!

これは、httpclientモジュールがルートモジュールにインポートされていないことを意味します.
解決策
解決策は簡単です:私たちのメインモジュールに欠落しているモジュールをインポートする必要があります.ほとんどの場合、これらのモジュールは、アプリケーションのappmoduleにインポートする必要があります.

注意:アプリケーションのサイズが大きくなるのを避けるために、必要なモジュールだけをインポートしなければなりません.このベストプラクティスは、フレームワークモジュールだけでなく、使用するカスタムモジュールごとに適用されます.
例として角材料ライブラリを取りましょう:sidenavモジュールを使用するために、特別なMatsidenavモジュールなどがあります.
したがって、モジュールの必要に応じて、特定のモジュールをインポートすることもできます.

...
MatSidenavModule
MatCheckboxModule
...

2 .まだ存在しない項目に対するDOM参照を使用しないでください

@ viewchild装飾子の助けを借りて、角度は、コンポーネントの特定の子要素(ノードまたはHTMLコンポーネント)を参照することを非常に簡単にします.
単に後に加える.例えば、

<div #myFirstDiv></div>

我々のコンポーネントからその要素を参照することができます.コンポーネントである場合は、パブリックメソッドを呼び出してそのプロパティにアクセスできます.単純なHTML要素なら、そのスタイル、属性、または子を変更することができます.
このプロパティを@ viewChildren装飾子で飾る場合、角度は自動的に参照をコンポーネントのプロパティに割り当てます.
参照名をデコレータに渡すようにしましょう.例えば@ viewchild (' myfirstdiv ').

問題
@ viewchildディレクティブは非常に有用ですが、参照される要素が実際に存在することに注意しなければなりません.
問題は起こります:なぜそれは存在しないでしょうか?
参照する項目が実際に存在しない理由がいくつかあります.最も一般的な理由は、ブラウザがアップロードをまだ完了していないため、この要素がDOMに追加されていないことです.
明らかに、この段階でこの要素にアクセスしようとすると、未定義またはnullになります.
存在しない場合のDOMアクセスの例は、NGoNinit LifeCycleコールバックのコンポーネントコンストラクターにあります.
例を見てみましょう.

解決策
DomContentLoaderイベントまたはスーパー古典的なjQuery callback $を覚えてください.readend () ?ここで角で使われるメカニズムは同じです:ngafterviewinit.
問題のコールバックは角のライフサイクルフックの一部です.ngRemoveWinWitは、すべてのコンポーネントと子のビューが初期化されたときに呼び出されるコールバックです.
前の例に戻ると、このようにコードを変更できます.

すごい!我々は問題を解決した.しかし、まだ考慮する他の落とし穴があります注意してください.
前に述べたように、実際に追加されたときにDOM内の要素にアクセスできます.
このようなシナリオがあれば:
ngifディレクティブを持つ要素はDOMから完全に削除されます.
それで、我々はその場合それにアクセスすることができません.
我々のアプリケーションがクラッシュするのを防ぐために、私たちは、それがNULLであるかどうかに関係なく、我々の参照をチェックする必要があります.実際には、コードは次のようになります.

3 . DOMを直接操作しない

注意:DOMを直接角度で操作することは悪い習慣とはみなされません.
おそらく我々のアプリは、ブラウザ上で正しく動作するが、アングルユニバーサルのような異なる環境では、これは発生しない可能性があります.概要ユニバーサルでは、サーバー側で我々の角度のアプリをレンダリングすることができます.
例を見てみましょう.

解決策
角はDOM : Renderer 2を操作するためのアドホックAPIを提供します.このAPIの助けを借りて、我々はDOMとの作業時に使用されるすべてを行うことができます.
以下に明確な例を示します:

として、我々は本当に何かを行うことができますので、私はあなたが公式ドキュメントを見てお勧めします.

4 .角度ガードは(本当の)セキュリティ機能ではない

角度ガードは人工的に特定のルートへのアクセスを制限する素晴らしい方法です.
古典的な例は、ログインなしで特定のページへのアクセスを禁止することです.


問題
これは特定のルートへの「禁止」アクセスに対する有効な解決のままであるが、他の「Web」解決策のように、100 %安全ではない.
我々は潜在的な“危険な”ユーザーに完全なソースコードを提供するので、アプリケーションは任意の方法で変更することができます.これは、我々のガードがいくつかの線でコメントすることによって容易に回避されることができることを意味します.
解決策
サーバーサイドソリューションを追加すると、アプリケーション内のデータへの侵入のリスクを軽減します.例はJWT(JSONウェブトークン)の使用でしょう.

一度だけコンポーネントを宣言します

我々のアプリケーションをモジュールにグループ化し始めると、基本的にはベストプラクティスです.
コンポーネントは、1つのモジュールで宣言することができます!
しかし、我々のコンポーネントを複数のモジュールで使用したいなら、どうすればよいでしょうか?
解決策
解決策は簡単です:モジュール内でコンポーネントを追加するだけです.
多分、コンポーネントによるモジュールは少し過度です、したがって、なぜコンポーネント・モジュールを作成しないか.そのモジュールを他のモジュールにインポートすることができます.

6 .最適化し、[ hidden ]属性の代わりにngifを使用してアプリケーションをスピードアップ

隠れたディレクティブの使用と* NGIFディレクティブの間の混乱がしばしばあります.
主な違いは、* ngifディレクティブで、マークされた要素だけを隠す代わりに(実際に隠れたディレクティブを作るもの)、DOMから削除します.パフォーマンスに関して可能な改善から離れて、* NGIF解決は、よりきれいに見えます.
それで、私はこれらのシナリオで標準としてそれを推薦します.

保守性問題を回避するためにサービスを使用する

注:一般的なアドバイスとして、それは常に良い実践ビジネスロジックをサービスに外挿することです.
このように、可能な変更が数秒で実行されることができて、十分にローカライズされることができて、コードのn - 000行を修正する際に狂ってはいけません.
HttpClientを使用する場合、このアドバイスは確かにtrueです.それは常に集中サービスの中で囲まれるべきです.このように、それは容易にテスト可能です、そして、それは変化をするのが簡単です.
たとえば、バックエンドは、更新後に各リクエストに渡す新しいヘッダーが必要です.集中サービスなしでは、あなたのアプリケーション内のコードの複数の行を変更する必要があります.
私はこの記事が役に立つことを望みます.もしそうならば、あなたの友人、同僚または誰でも興味があるかもしれないと思うそれを共有してください.