Angular material issue with latest version of angular cli

Question

I'm trying to create navbar with angular material. So I begin with few setups:

1) I installed angular materials with npm 2) I configured theming in style.css as below:

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

3) I linked angular material themes to index.html as below:

For more information about my environment take a look at my angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "admin-portal": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "targets": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/admin-portal",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "admin-portal:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "admin-portal:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "admin-portal:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "admin-portal-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "targets": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "admin-portal:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "admin-portal:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "admin-portal"
}

But when run ng serve, i get this error as mentioned below:

 ERROR in ./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css)
    Module build failed (from ./node_modules/postcss-loader/lib/index.js):
    Error: Can't resolve 'https://fonts.googleapis.com/icon?family=Material+Icons' in
'C:\Angular Projects\admin-portal\src' at doResolve (C:\Angular Projects\admin-portal ode_modules\enhanced-resolve\lib\Resolver.js:180:19) at hook.callAsync (C:\Angular Projects\admin-portal ode_modules\enhanced-resolve\lib\Resolver.js:238:5) at _fn0 (eval at create (C:\Angular Projects\admin-portal ode_modules apable\lib\HookCodeFactory.js:32:10), :15:1) at resolver.doResolve (C:\Angular Projects\admin-portal ode_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:37:5) at hook.callAsync (C:\Angular Projects\admin-portal ode_modules\enhanced-resolve\lib\Resolver.js:238:5) at _fn0 (eval at create (C:\Angular Projects\admin-portal ode_modules apable\lib\HookCodeFactory.js:32:10), :15:1) at hook.callAsync (C:\Angular Projects\admin-portal ode_modules\enhanced-resolve\lib\Resolver.js:238:5) at _fn0 (eval at create (C:\Angular Projects\admin-portal ode_modules apable\lib\HookCodeFactory.js:32:10), :12:1) at resolver.doResolve (C:\Angular Projects\admin-portal ode_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:42:38) at hook.callAsync (C:\Angular Projects\admin-portal ode_modules\enhanced-resolve\lib\Resolver.js:238:5) at _fn5 (eval at create (C:\Angular Projects\admin-portal ode_modules apable\lib\HookCodeFactory.js:32:10), :57:1) at resolver.doResolve (C:\Angular Projects\admin-portal ode_modules\enhanced-resolve\lib\ModuleKindPlugin.js:23:37) at hook.callAsync (C:\Angular Projects\admin-portal ode_modules\enhanced-resolve\lib\Resolver.js:238:5) at _fn0 (eval at create (C:\Angular Projects\admin-portal ode_modules apable\lib\HookCodeFactory.js:32:10), :15:1) at hook.callAsync (C:\Angular Projects\admin-portal ode_modules\enhanced-resolve\lib\Resolver.js:238:5) at _fn1 (eval at create (C:\Angular Projects\admin-portal ode_modules apable\lib\HookCodeFactory.js:32:10), :24:1)

user_6782707 · Answer

The reason why it's not working is because you specified that the path is local when you're supposed to use the url function. (Also, you're specifying themes and fonts both times, you're supposed to be specifying them either in your index.html file OR your styles.css file, NOT in both of the files).

You can either use the following configuration or the other one:

All imports in styles.css:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

All imports in index.html:

Angular material issue with latest version of angular cli

1 Answers