Angular 2实现CSS答案

【问题标题】：Angular 2 materialize cssAngular 2实现CSS
【发布时间】：2016-12-01 09:54:13
【问题描述】：

我使用 Angular 2 和 Webpack 模块捆绑器，我按照本教程将 Materialize css 添加到我的项目中。然后我陷入了这个错误消息： Uncaught Error: Couldn't find Materialize object on window. It is created by the materialize-css library. Please import materialize-css before importing angular2-materialize.

有没有人经历过这种情况？任何帮助都将受到欢迎。

【问题讨论】：

您解决了这个问题吗？如果您展示如何导入模块的代码示例，我可能会提供帮助。向我指出你所遵循的指示方向。
我不知道如何修复这个错误。然后我反转我的代码并将 jquery、materialize.min.js 添加到 angular-cli.json 的脚本属性中。令人惊讶的是，它奏效了。
你是如何添加 jquery 的？你能回答你的问题吗？

标签： angular materialize angular2-material

【解决方案1】：

将 Materialise CSS 与 Angular 6 集成：

安装所有依赖项：

npm install jquery hammerjs materialize-css@next angular2-materialize --save

在应用程序部分中添加这些依赖项的 js 文件，然后在文件 angular.json 中的脚本子部分中添加：

"styles": [  
"./node_modules/materialize-css/dist/css/materialize.css",
  "src/styles.scss"
],
"scripts": [
  "./node_modules/jquery/dist/jquery.js",
  "./node_modules/hammerjs/hammer.js",
  "./node_modules/materialize-css/dist/js/materialize.js"
]

在主app.module中导入materialize-css和MaterializeModule：

...
import 'materialize-css';
import { MaterializeModule } from 'angular2-materialize';
...
@NgModule({
imports: [
...
MaterializeModule,
],
})

重启服务器

来源：

https://fullstackengine.net/create-wedding-page-angular-materialize/

http://colinstodd.com/blog/post/how-to-install-materialize-css-in-angular-5

Angular 5 with materialize css

【讨论】：