フロントエンド開発には、多くの可動部分が含まれます。途中で遭遇する問題の原因を特定するのが難しい場合があります。これは特にもどかしいことです。ここに示すよくある質問と回答は、フロントエンド開発中に発生する問題のトラブルシューティングと修正に役立ちます。
トラブルシューティングのセクションは次のとおりです。
質問をクリックすると回答が表示されます。
CSS
Angularに既知のバグがあると、CSSファイルの絶対URLが認識されなくなります。
ポータルの性質上、アプリは任意のページに配置できるため、相対URLもオプションではありません。
これを修正するには、CSSにテーマまたはテーマレットを提供するか、またはAngularコードを含むポートレットのcom.liferay.portlet.header-portlet-cssプロパティを使用してCSSファイルへのパスを指定します。
デフォルトでは、CSSファイルはブラウザで縮小されます。 これにより、Internet Explorerで問題が発生する可能性があります。portal-ext.propertiesファイルにtheme.css.fast.load=falseおよびminifier.enabled=falseを含めることにより、この動作を無効にできます。
モジュール
- ロードしようとすると、JQueryモジュールが匿名モジュールエラーをスローするのはなぜですか？
- AngularまたはTypescriptモジュールにソースマップが表示されないのはなぜですか？
- 複数のプロジェクトにliferay-npm-bundlerを使用しています。すべてのプロジェクトでツール全体の分析追跡を無効にするにはどうすればよいですか？
ホストする外部ライブラリを使用している場合は、Using External JavaScript Librariesのチュートリアルで説明されているように、Expose Globalオプションを無効にする必要があります。
これはLPS-83052によるものです。
これを解決するには、引数またはtsconfig.jsonファイルを使用して、inlineSourcesコンパイラオプションをアクティブにします。
レポートを無効にするために使用できるオプションがいくつかあります。
package.jsonのビルドスクリプトで--no-trackingフラグを使用して、レポートを無効にします。liferay-npm-bundler --no-tracking-
プロジェクトのルートフォルダまたはその祖先のいずれかに
.liferay-npm-bundler-no-trackingファイルを作成して、レポートを無効にします。つまり、質問「
liferay-npm-bundlerは、時間の経過とともにツールを改善するための使用統計を匿名で報告できますか？」に対する回答はいいえです。
ポートレット
デフォルトでは、Senna JS SPAエンジンはポートレットとサイトで有効になっています。これにより、ポートレットナビゲーション中のページ全体のリロードが無効になります。
代わりにポートレットでカスタムルーターを使用する場合は、SPAのドキュメントの指示に従って、SPAからポートレットをブラックリストに追加してください。
テンプレート
liferay-map taglibなどの一部のtaglibは、キャッシュ可能なテンプレート（FreeMarkerやVelocityなど）で使用する場合に制限があります。たとえば、liferay-map taglibがキャッシュ可能なテンプレートで使用されている場合にユーザーがページを更新すると、マップは表示されません。
考えられる回避策の1つは、テンプレートを編集し、キャッシュ可能なオプションをオフにすることで、テンプレートのキャッシュを無効にすることです。または、[System Settings]→[Template Engines]に移動し、[Resource Modification Check]を0に設定して、すべてのテンプレートのキャッシュを無効にすることができます。
ただし、ベストプラクティスとして、キャッシュ可能なWebコンテンツではtaglibを使用しないことをお勧めします。
テーマ
- Classicテーマをベーステーマとして使用するにはどうすればよいですか？
- テーマにOSGiヘッダーを含めるにはどうすればよいですか？
- テーマを再デプロイした後、変更内容が表示されないのはなぜですか？
- テーマが読み込まれないのはなぜですか？代わりにデフォルトのテーマが返されます。
Classicテーマはすでに既存のベーステーマの実装であるため、拡張しないでください。必要に応じて、 Gulpキックスタートタスクを使用して、Classicテーマからご自身のテーマにファイルをコピーできます。基本的なスタイル設定から始めたい場合は、代わりにStyledテーマから始めてください。
使用するヘッダーをテーマのliferay-plugin-package.propertiesファイルで指定します。このファイルに配置されたヘッダーは、マニフェストとOSGiバンドルに自動的に含まれます。
たとえば、エクスポートされたパッケージをImport-Packageヘッダーでインポートすることにより、テーマにOSGiの依存関係を追加できます。
Import-Package:com.liferay.docs.portletデフォルトでは、CSS、JS、およびテーマテンプレートファイルはブラウザにキャッシュされます。開発中に、Devloperモードを有効にして、テーマのファイルがキャッシュされないようにすることができます。
「No theme found for specified theme id...」という警告が表示される場合、サイトで古いテーマIDを参照している可能性があります。テーマのliferay-look-and-feel.xml内のテーマIDが、警告メッセージ「mytheme_WAR_mytheme」内のテーマIDと一致することを確認してください。テーマIDが一致している場合、サイトテーマの代わりに古いテーマを使用しているページがある可能性があります。これを確認するには、ページを手動で確認するか、データベースでthemeId -の値を持つレイアウトを検索します。