将物化添加到 Angular 8 不起作用答案

【问题标题】：adding materialize to angular 8 not working将物化添加到 Angular 8 不起作用
【发布时间】：2019-09-18 10:41:48
【问题描述】：

我用ng new materialize 创建了一个新的角度项目（角度 8），然后我在我的终端和项目的文件夹中运行了这些项目：

npm install materialize-css --save 
npm install jquery --save
npm install --save hammerjs

然后我像这样修改了我的 angular.json 文件：

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

我已经在我的 index.html 中添加了素材图标。问题是当我使用这样的物化类时：

  <div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>

只是一个常规的 div 显示，不应用具体化类。我在这里遗漏了什么吗？

【问题讨论】：

你能发布一个相同的堆栈闪电战。我按照相同的步骤从我身边创建了一个并且工作正常：stackblitz.com/edit/angular-vt4c5h?file=angular.json
这很奇怪，它在 stackblits 中也适用于我。但是当我在本地创建一个项目时，它在这里不起作用是我的项目的链接github.com/mojtabaparvar/materialize-angular/blob/master/…
Atlast 发现了错误。如果它解决了您的问题，请将其标记为答案

标签： angular materialize

【解决方案1】：

最后发现你的错误。

您在 angular.json 文件中声明的样式和脚本在测试部分中

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/materialize-css/dist/css/materialize.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/hammerjs/hammer.js",
              "node_modules/materialize-css/dist/js/materialize.js"
            ]
          }
        }

将它移到构建部分中，您的代码就可以正常工作了

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/panel",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/materialize-css/dist/css/materialize.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/hammerjs/hammer.js",
              "node_modules/materialize-css/dist/js/materialize.js"
            ]
          }

【讨论】：