2017-05-21 17 views
1

私は幸運なしに角度アプリに素材デザインを追加しようとしています。角度アプリ - 素材デザイン

材料設計をインストールしましたが、すべてのモジュールがapp.moduel.tsファイルに追加されましたが、コンポーネントが非常に悪く見えます。

私はこのメッセージが表示されます:Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide:https://material.angular.io/guide/theming

私はindex.htmlファイル

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

の頭部へのリンクを追加しましたが、何らかの理由で私はStatus Code:404 Not Foundを取得します。私は、動作しなかった資産にCSSファイルを追加しようとしました。

githubのマテリアルデザインのサンプルアプリケーションをチェックすると、テーマのCSSファイルへのリンクがないので、少し変です。

https://github.com/jelbourn/material2-app/blob/master/src/index.html

http://localhost:4200/node_modules/@angular/material/prebuilt-themes/indigo-pink.css

私のindex.htmlファイルは次のようになります。

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>M2App</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/icon?family=Material+Icons" rel="stylesheet"> 
    <link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> 

</head> 
<body> 
    <app-root>Loading...</app-root> 
</body> 
</html> 

答えて

1

それは本当にあなたのアプリを構築し、設定しているかに依存するが、Status Code:404 Not Foundエラーに関連していますIこれは、index.htmlから"node_modules/@angular/material/prebuilt-themes/indigo-pink.css"への相対パスが見つからないことを意味し、../../を追加すると役立ちます。テーマガイドのドキュメントへ

参考:また

は、あなただけのファイルを直接参照することができます。

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

は、サーバーの設定によって異なります実際のパス:これは次のようになります。

関連する問題