adding materialize to angular 8 not working

Question

I have created a new angular project (angular 8) with ng new materialize and then I ran these in my terminal and in the Folder of my project:

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

and then I have modified my angular.json file like this:

"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"
            ]

and I have added material icons to my index.html. the problem is that when I am using materialize classes like this:

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

just a regular div shows and the materialize classes are not applied. am I missing something here?

Answer 1

Found your error atlast.

The styles and scripts you declared in angular.json file is within the test section

"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"
            ]
          }
        }

Move it inside the build section and your code will work fine

"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"
            ]
          }