Issue with import of angular material module

[Zargith]

trafficstars

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

OS and Version

Ubuntu 20.04.3 LTS

Versions

Output from: ng --version:

Angular CLI: 10.2.3
Node: 16.8.0
OS: linux x64

Angular: 10.1.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.15
@angular-devkit/build-angular   0.1102.15
@angular-devkit/core            10.2.3
@angular-devkit/schematics      10.2.3
@angular/cdk                    11.2.5
@angular/cli                    10.2.3
@angular/flex-layout            10.0.0-beta.32
@angular/material               10.1.1
@schematics/angular             10.2.3
@schematics/update              0.1002.3
rxjs                            6.6.2
typescript                      4.0.5

Repro steps

I run the following command on my repo: npm run start My package.json:

{
  "name": "web",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "old_start": "ng serve --host 0.0.0.0 --disableHostCheck",
    "start": "ng serve --host 0.0.0.0",
    "start:staging": "ng serve -c=staging --port=4200 --host 0.0.0.0 --disableHostCheck",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular-devkit/schematics": "^10.1.1",
    "@angular-material-extensions/faq": "^3.0.4",
    "@angular/animations": "~10.1.1",
    "@angular/cdk": "^11.2.3",
    "@angular/common": "~10.1.1",
    "@angular/compiler": "~10.1.1",
    "@angular/core": "~10.1.1",
    "@angular/flex-layout": "^10.0.0-beta.32",
    "@angular/forms": "~10.1.1",
    "@angular/material": "^10.1.1",
    "@angular/platform-browser": "~10.1.1",
    "@angular/platform-browser-dynamic": "~10.1.1",
    "@angular/router": "~10.1.1",
    "@georgedoescode/spline": "^1.0.1",
    "@sentry/angular": "^5.26.0",
    "@sentry/tracing": "^5.26.0",
    "@types/gapi.auth2": "0.0.54",
    "@types/quill": "^1.3.10",
    "angular-calendar": "^0.28.22",
    "angularx-social-login": "^3.5.6",
    "aos": "^2.3.4",
    "autoprefixer": "^9.8.6",
    "calendar-utils": "^0.8.4",
    "date-fns": "^2.19.0",
    "json2typescript": "^1.5.0-rc.0",
    "jwt-decode": "^3.0.0-beta.2",
    "leaflet": "^1.7.1",
    "ng-recaptcha": "^8.0.1",
    "ng5-slider": "^1.2.4",
    "ngx-autosize": "^1.8.4",
    "ngx-colors": "^2.9.0",
    "ngx-quill": "^14.3.0",
    "node-geocoder": "^3.27.0",
    "postcss": "^7.0.36",
    "quill": "^1.3.7",
    "rxjs": "^6.5.5",
    "simplex-noise": "^3.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0",
    "tslib": "^2.0.1",
    "zone.js": "~0.11.1"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^10.0.1",
    "@angular-devkit/build-angular": "^0.1102.12",
    "@angular/cli": "^10.2.3",
    "@angular/compiler-cli": "~10.1.1",
    "@angular/language-service": "~10.1.1",
    "@fullhuman/postcss-purgecss": "^2.2.0",
    "@types/googlemaps": "^3.39.13",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^14.10.1",
    "agm-overlays": "^2.0.0",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.2",
    "karma": "^6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^4.1.0",
    "postcss-scss": "^2.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~9.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

The log given by the failure

ERROR in Failed to compile entry-point @angular-material-extensions/faq (es2015 as esm2015) due to compilation errors:
node_modules/@angular-material-extensions/faq/esm2015/faq.js:129:26 - error NG1010: Value at position 4 in the NgModule.imports of MatFaqModule is not a reference
  Value could not be determined statically.

129                 imports: [
                             ~
130                     CommonModule,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
... 
139                     MatExpansionModule
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
140                 ],
    ~~~~~~~~~~~~~~~~~

  node_modules/@angular-material-extensions/faq/esm2015/faq.js:134:21
    134                     MatCardModule,
                            ~~~~~~~~~~~~~
    Unknown reference.

Solution

To fix this I just had to replace import { MatCardModule, MatToolbarModule, MatButtonModule, MatInputModule, MatIconModule, MatExpansionModule } from '@angular/material'; by

import { MatCardModule } from '@angular/material/card';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatExpansionModule } from '@angular/material/expansion';

Find answer here : https://stackoverflow.com/questions/60141975/not-able-to-import-angular-material-module#answer-60142211

Desired functionality

I just want to make easily a FAQ page

Mention any other details that might be useful

None