#angular #material-design-lite
#angular #material-design-lite
Вопрос:
Я только начинаю работу над своим первым приложением Angular 2, но у меня возникли некоторые проблемы.
Моя среда разработки — WebStorm, и я сгенерировал проект с помощью Angular CLI
Моя проблема возникает при попытке использовать Material Design Lite.
Я импортировал три зависимости в свой index.html:
<link rel="stylesheet" href="../../node_modules/material-design-lite/material.min.css">
<script src="../../node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="../../node_modules/material-design-icons/iconfont/material-icons.css">
Однако после вызова ng-serve в браузере все три приводят к ошибке не удалось загрузить ресурс.
Есть идеи, как это решить?
ПРИМЕЧАНИЕ: index.html находится в папке приложения, расположенной в папке src в папке моего проекта
Ответ №1:
Вы не должны ссылаться на зависимости таким образом. вы должны установить их с помощью
npm i material-design-lite
а затем в вашем angular-cli.json вы добавляете его в стили или скрипты.
т.е.
{
"project": {
"version": "1.0.0-beta.16",
"name": "test"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"../node_modules/material-design-lite/material.min.css",
"../node_modules/material-design-icons/iconfont/material-icons.css"
],
"scripts": [
"../node_modules/material-design-lite/material.min.js"
],
Комментарии:
1. Поэтому я удалил их из index.html и вместо этого поместите их в angular-cli.json. Теперь ошибок нет, однако при создании объекты MDL не отображаются, разметка MDL игнорируется, а основные элементы HTML отображаются.
2. Потому что вы должны добавить этот компонент в свой ngmodule в директивах