AngularプロジェクトにMaterial UIを導入した際、コンポーネントが正しく表示されない事象が発生しました。npm installコマンドでの導入後に公式ドキュメントに従ってng addコマンドを実行しても同様の問題が継続。この原因は追加設定が自動適用されなかったためです。以下、解決手順を詳細に解説します。
ng add @angular/materialを実行すると、以下の設定オプションが表示されます。
- テーマの選択（事前ビルドテーマまたはカスタムテーマ）
- グローバルスタイルの適用
- ブラウザアニメーションの有効化
index.htmlにRobotoフォントとMaterial Iconsのリソースを追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MaterialApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>ネットワーク環境によってはリソース取得が不安定になるため、ローカルにファイルを配置することを推奨します。
angular.jsonのstyles配列に事前ビルドテーマを追加します。
"styles": [
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
]src/styles.scssにグローバルスタイルを設定します。
html, body {
height: 100%;
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}package.jsonの依存関係を整合性のあるバージョンで設定します。
{
"dependencies": {
"@angular/animations": "~10.2.0",
"@angular/cdk": "^10.2.7",
"@angular/material": "^10.2.7",
"@angular/common": "~10.2.0",
"@angular/compiler": "~10.2.0",
"@angular/core": "~10.2.0",
"@angular/forms": "~10.2.0",
"@angular/platform-browser": "~10.2.0",
"@angular/platform-browser-dynamic": "~10.2.0",
"@angular/router": "~10.2.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1002.0",
"@angular/cli": "~10.2.0",
"@angular/compiler-cli": "~10.2.0",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}package.json更新後、node_modulesディレクトリを削除しnpm installを実行して依存関係を再構築します。非ルートモジュールでコンポーネントを使用する際、エラーが発生する場合はルートモジュールと当該モジュールの両方でインポートが必要です。