Angular 2: MaterializeCSS模块不能通过路由正确加载
Angular 2是一种流行的前端开发框架，而MaterializeCSS是一个基于CSS的UI框架。在Angular 2中，通过路由加载MaterializeCSS模块可能会遇到一些问题。
首先，要确保已经正确安装了MaterializeCSS模块。可以通过以下命令使用npm进行安装：
npm install materialize-css接下来，在Angular 2的项目中，需要在angular.json文件中添加MaterializeCSS的样式和脚本文件路径。在styles数组中添加以下路径：
"node_modules/materialize-css/dist/css/materialize.css"在scripts数组中添加以下路径：
"node_modules/materialize-css/dist/js/materialize.js"然后，在Angular 2的组件中，可以通过导入MaterializeCSS的样式和脚本来使用它们。在组件的.ts文件中添加以下导入语句：
import 'materialize-css/dist/css/materialize.css';
import 'materialize-css/dist/js/materialize.js';接下来，可以在组件的模板文件中使用MaterializeCSS的样式和组件。例如，可以在HTML中添加一个MaterializeCSS的按钮：
<button class="btn waves-effect waves-light" type="button">Button</button>这样，当通过路由加载该组件时，MaterializeCSS的样式和脚本将被正确加载和应用。
关于MaterializeCSS的分类，它是一个基于CSS的UI框架，提供了丰富的样式和组件，用于构建现代化的用户界面。它具有响应式设计，适用于各种设备和屏幕尺寸。
MaterializeCSS的优势在于它提供了现成的样式和组件，可以快速构建漂亮且功能丰富的界面。它还具有良好的浏览器兼容性，并且易于使用和定制。
MaterializeCSS适用于各种应用场景，包括网站、Web应用程序和移动应用程序的开发。它可以用于创建各种元素，如按钮、卡片、导航栏、表单等。
腾讯云提供了一些与Angular 2和MaterializeCSS相关的产品和服务。例如，腾讯云提供了云服务器（CVM）和云数据库（CDB）等基础设施服务，可以用于托管和部署Angular 2应用程序。此外，腾讯云还提供了对象存储（COS）和内容分发网络（CDN）等服务，用于存储和分发静态资源。
更多关于腾讯云产品和服务的信息，可以访问腾讯云官方网站：腾讯云。
相关·内容
2回答
材质+角度6如何配置？
angular、angular-material、angular6、materialize
我在一般的角度上是新的，我尝试使用和角度6，我使用CLI来创建我的组件。
我读过关于如何在角2中这样做的材料，但是角6似乎是不同的，例如没有角-cli.json文件。
我怎样才能使物料在六角形运行呢？
用于安装materializecss：npm i materialize-css@next的命令
angular.json尝试修改：
"styles": [
"./node_modules/materialize-css/dist/css/materialize.css",
"s
浏览 1提问于2018-08-02得票数 3
2回答
实际上，我正在尝试在我的angular项目中实现materializecss，但在这里我所做的并不适用于我
npm install --save materialize-css jquery font-awesome
Angular.json
"styles": [
"src/styles.css",
"node_modules/materialize-css/dist/css/materialize.css",
"node_modules/font-awe
浏览 0提问于2019-12-13得票数 0
我想安装实体化-css，jQuery和字体-可怕，在我的角8项目中，我运行这个cmd：
npm install materialize-css jquery make-awesome --save
我在angular.json中添加了链接
"styles": [
"Src / styles.css"
"Node_modules / materialize-css / dist / css / materialize.css"
"Node_modules
浏览 1提问于2019-11-17得票数 1
2回答
与Webpack一起将材料纳入Angular2项目
angular、webpack、materialize、angular2-material
我对Angular2及其生态系统非常陌生，我试图弄清楚事物是如何一起工作的。如果有些问题显得微不足道的话，很抱歉。
因此，我部署了一个新的Angular2应用程序，在的帮助下，后者使用Webpack。
对于用户界面，我想使用的材料，而不是启动带。我做了一些研究，我开始迷失在围绕材料的大量项目中。我要找的是：
一种使用材料css和类的简单方法，比如网格.
似乎是解决方案。
使用指令
我找到了来完成这个任务
使用材料组件作为Angular2组件
是我发现的最高级的项目，它提供了这些东西。
这是很多:D，我已经找到了材料
浏览 3提问于2016-08-24得票数 1
1回答
升级实现1.0.0 -> 1.1.0
reactjs、materialize
我正在编写一个React教程，它使用Materialize 1.0.0
旧代码直接从实质性css包导入css和js文件，如下所示：
import 'materialize-css/dist/css/materialize.min.css';
import M from 'materialize-css/dist/js/materialize.min.js';
我卸载了materialize-css包，并安装了@materializecss/materialize，这是Materialize的下一个版本。按照旧的逻辑，我试图导入scc和js文件，如下所示：
imp
浏览 7提问于2021-12-07得票数 0
1回答
将materialize添加到angular 8不起作用
angular、materialize
我用ng new materialize创建了一个新的angular项目(angular 8)，然后在我的终端和项目的文件夹中运行以下代码： npm install materialize-css --save
npm install jquery --save
npm install --save hammerjs 然后我像这样修改了我的angular.json文件： "styles": [
"src/styles.css",
"node_modules/materialize-css/dis
浏览 11提问于2019-09-18得票数 0
回答已采纳
3回答
如何使用带有角的物化-css
javascript、css、angular、materialize
我创建了一个angular4项目，其中包含了angular。我想去图书馆。所以我用
npm install materialize-css@next --save
所以这个安装了
"materialize-css": "^1.0.0-alpha.2",
然后在角-cli.json中添加了对css和js文件的引用。
"styles": [
"styles.css",
"../node_modules/materialize-css/dist/css/materialize.css"
],
"scr
浏览 1提问于2017-12-28得票数 10
回答已采纳
1回答
不能使用angular2-物化(TypeError: jQuery.easing未定义)
jquery、angular、angular-cli、angular2-materialize
大家好，谢谢大家的阅读。嗯，这是我在运行ng服务时遇到的错误。
TypeError: jQuery.easing is undefined
这正是我所做的
ng new X
cd X
npm install materialize-css --save
npm install angular2-materialize --save
npm install jquery@^2.2.4 --save
然后将其添加到angular-cli.json脚本块中
"scripts": [
"../node_modules/jquery/dist/jquery.js",
浏览 2提问于2016-10-24得票数 0
1回答
Angular4: jQuery和Angular2-在路线导航后物化不起作用
jquery、angular、materialize
我用angular-cli创建了一个angular 4项目。导入angular-cli.json文件中的css和js。
"styles": [
"../node_modules/materialize-css/dist/css/materialize.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/hammerjs/hammer.js
浏览 17提问于2017-07-03得票数 6
回答已采纳
1回答
物化在Webpack应用中不起作用的jQuery函数
webpack、materialize
我最近将我的项目从流星迁移到了Webpack，在尝试使用Materialize.css构建我的UI时遇到了错误。自定义物化函数(如$(...).tooltip )会导致在控制台中抛出未捕获的TypeError。这不允许我在应用程序中使用Materialize。
有没有人在尝试在webpack应用程序中使用Materialize时遇到过这种类型的错误？任何关于如何解决这些问题的方向都将不胜感激。谢谢!
下面是我用来在目录根目录的index.js中加载Materialize模块及其依赖项的代码。
index.js：
import 'materialize-loader';
impo
浏览 1提问于2016-12-10得票数 5
2回答
无法导入React项目中的materialize-css以使用芯片
javascript、reactjs
我已经通过命令创建了项目：
create-react-app app
我正在使用materialize-css ，并且想使用芯片。
import React, { Component } from 'react';
import $ from 'jquery';
import 'materialize-css';
class Form extends Component {
constructor(props) {
super(props);
$(document).ready(function() {
浏览 2提问于2017-01-15得票数 8
回答已采纳
1回答
使用MaterializeCSS的Ionic2
angular、ionic2、materialize
我将在MaterializeCSS中使用Ionic2，但我不知道如何使用。我安装了angular2-materialize和material-css并尝试导入。
我尝试通过index.html添加css和js。
<link type="text/css" rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.css" />
如果我使用这个，它的工作是：
<link rel="stylesheet" href="ht
浏览 0提问于2017-01-18得票数 0
2回答
将materialize.css (0.97.7)与Aurelia CLI (当前版本)配合使用时出错
javascript、materialize、aurelia
问题:我正在尝试让materialize.css与Aurelia CLI一起工作。但我得到的是控制台中作为错误输出的整个materialize.js，我想也是hammerjs的一部分。
我所做的Aurelia cli与aurelia.json中的以下代码行编译得很好：
"jquery",
{
"name": "hammerjs",
"path": "../node_modules/hammerjs",
"main": "hammer",
"deps":
浏览 14提问于2016-08-23得票数 3
1回答
物化中的formSelect()方法在角6输入中不起作用
angular、materialize
我使用的是与角6相结合的物化CSS，我的问题是输入的标签如果从某些服务加载数据，标签与输入的文本重叠。
在他们的正式文档中，他们使用这段代码来修复这种行为：
$(document).ready(function(){
$('select').formSelect();
});
但是，如果我在ngOnInit()甚至ngAfterViewInit()中使用这段代码，就会出现以下错误：
错误TS2339:在'JQuery‘类型上不存在属性'formSelect’。
我已经导入了Jquery，显然没有检测到物化脚本。我尝试从CDN导入脚本，在ang
浏览 0提问于2018-08-07得票数 1
回答已采纳
2回答
如何在Angular Story Book中包含字体、包和CSS框架？
angular、storybook
在Angular故事书中，我们在哪里包含任何外部字体？我使用materialize css和一些google字体。HTML：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400" rel="stylesheet">
CSS:在angular-cli.j
浏览 1提问于2018-03-16得票数 4
7回答
如何在nodejs中使用MaterializeCSS？
node.js、materialize
我已经运行了以下命令：
npm install materialize-css --save
npm install hammerjs --save
npm install jquery --save
然后在我的app.js中，var materialize = require('materialize-css');
但是当我运行npm start时，我总是会得到相同的错误
/Users/myname/code/websites/n-website/node_modules/materialize-css/bin/materialize.js:1
eof require?$=r
浏览 1提问于2016-06-15得票数 3
1回答
是否有materialize-css的css组件版本
materialize、web-component、lit-element
是否有materialize-css的"webcomponent“版本？ 有没有人尝试过使用materialize-css来构建Has组件？我能够获得样式，但还没有想出如何让底层的javascript/图标出现： import {html, LitElement, css, unsafeCSS} from 'lit-element';
// import 'materialize-css';
import MaterializeCSS from 'materialize-css/dist/css/materialize.min.css'
浏览 7提问于2019-08-31得票数 2
3回答
如何在用角cli创建的项目中集成angular2-物化
angularjs、angular、materialize
我想在我的项目中使用Materialize CSS框架。我使用Angular CLI设置了一个项目ng new BLABLA
之后，我遵循了指南中的步骤。
但是，如果我使用ng serve启动该项目，则会在浏览器中得到以下错误：
TypeError: undefined is not an object (evaluating 'jQuery.easing.swing')
我的角-cli.json
{
"project": {
"version": "1.0.0-beta.15",
"name"
浏览 7提问于2016-09-24得票数 3
回答已采纳
1回答
角2 MaterializeCSS Javascript函数未调用
javascript、angular、materialize
我有一个问题，我的下拉菜单不工作。下拉菜单有两个元素，但没有显示任何选项。我相信这是我的Javascript的一个问题，但我不知道为什么它不能工作，因为它是.js和.css文件直接来自NPM和MaterializeCSS。下面是它当前样子的图片：
下面是我的一些代码：index.html
<!DOCTYPE html>
<html>
<head lang="en">
<base href="/">
<title>Angular 2 Project</title>
浏览 0提问于2017-04-24得票数 1
2回答
未找到Angular materialize字体
angular、typescript、webpack、angular-cli、materialize
我正在尝试集成materialize，但是当我尝试添加
"./node_modules/materialize-css/dist/js/materialize.js"
和
"./node_modules/materialize-css/sass/materialize.scss",
转到webpack.config.json
我在构建时得到了这个错误(我得到了多个)：
ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{
浏览 0提问于2017-09-21得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
