2017-05-21 3 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">

실제 경로는 서버 설정에 따라 달라집니다 :이 같이 보일 것입니다.