[BUG] An unexpected error occurred: NullInjectorError: R3InjectorError(SalesDashboardModule)[MatSelect -> MatSelect -> MatSelect -> MatSelect -> MatSelect -> MatSelect]: NullInjectorError: No provider for MatSelect! #514

elmagd91 · 2025-01-21T07:49:58Z

Describe the bug

when upgrading prettier npm package to the latest version 3.4.2, my module which uses your package was failed in console although ng serve is working correctly

To Reproduce

Important install angular 17 with the latest version of prettier and try to use your package

Expected behavior

no errors

Desktop (please complete the following information):

OS: Ubuntu 22
Browser chrome

macjohnny · 2025-01-21T08:07:48Z

hi
can you please post the content of your package.json, and how you import the NgxMatSelectSearch module, and how you use it in your template and controller?

elmagd91 · 2025-01-21T10:23:58Z

  "name": "crm-app",
  "version": "1.0.3",
  "scripts": {
    "format": "prettier --write .",
    "format:show-only-error": "prettier --write . | grep 'error'",
    "lint": "eslint . --ext .js,.ts",
    "ng": "ng",
    "start": "nx serve",
    "build": "nx build",
    "test": "jest -c --watch --detectOpenHandles",
    "test:coverage": "jest --coverage",
    "ng-lint": "nx lint",
    "e2e": "nx e2e",
    "graph": "nx graph",
    "clean": "npm cache clean --force && rm -rf node_modules package-lock.json"
  },
  "private": true,
  "dependencies": {
    "@angular-material-components/datetime-picker": "^16.0.1",
    "@angular/animations": "17.3.0",
    "@angular/cdk": "17.3.10",
    "@angular/common": "17.3.0",
    "@angular/compiler": "17.3.0",
    "@angular/core": "17.3.0",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/forms": "17.3.0",
    "@angular/google-maps": "^17.3.0",
    "@angular/material": "17.3.10",
    "@angular/material-luxon-adapter": "^17.3.10",
    "@angular/platform-browser": "17.3.0",
    "@angular/platform-browser-dynamic": "17.3.0",
    "@angular/router": "17.3.0",
    "@angular/service-worker": "17.3.0",
    "@auth0/angular-jwt": "^5.1.2",
    "@fullstory/browser": "^1.7.1",
    "@kolkov/angular-editor": "^2.1.0",
    "@ngneat/until-destroy": "^9.2.3",
    "@ngrx/effects": "17.1.1",
    "@ngrx/entity": "17.1.1",
    "@ngrx/router-store": "17.1.1",
    "@ngrx/store": "17.1.1",
    "@ngrx/store-devtools": "17.1.1",
    "@ngx-loading-bar/core": "^6.0.2",
    "@ngx-loading-bar/router": "^6.0.2",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@swimlane/ngx-charts": "^20.5.0",
    "angular-calendar": "^0.31.0",
    "d3": "^7.9.0",
    "date-fns": "^2.29.3",
    "fast-levenshtein": "^3.0.0",
    "html2canvas": "^1.4.1",
    "lexorank": "^1.0.5",
    "luxon": "^3.4.4",
    "ngx-color-picker": "^14.0.0",
    "ngx-infinite-scroll": "^17.0.0",
    "ngx-mat-select-search": "^7.0.5",
    "ngx-owl-carousel-o": "^17.0.0",
    "ngx-permissions": "^17.1.0",
    "ngx-print": "1.3.1",
    "recordrtc": "^5.6.2",
    "rxjs": "^7.8.0",
    "topojson-client": "^3.1.0",
    "ts-mixer": "^6.0.3",
    "tslib": "^2.5.0",
    "zone.js": "~0.14.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.8",
    "@angular-devkit/core": "17.3.0",
    "@angular-devkit/schematics": "17.3.0",
    "@angular-eslint/eslint-plugin": "~17.3.0",
    "@angular-eslint/eslint-plugin-template": "~17.3.0",
    "@angular-eslint/template-parser": "~17.3.0",
    "@angular/cli": "17.3.0",
    "@angular/compiler-cli": "17.3.0",
    "@angular/language-service": "17.3.0",
    "@nx/angular": "17.3.0",
    "@nx/cypress": "17.3.0",
    "@nx/jest": "17.3.0",
    "@nx/js": "17.3.0",
    "@nx/web": "17.3.0",
    "@nx/webpack": "17.3.0",
    "@nx/workspace": "17.3.0",
    "@schematics/angular": "^15.2.4",
    "@swc-node/register": "~1.6.7",
    "@swc/core": "~1.3.85",
    "@swc/helpers": "~0.5.2",
    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
    "@types/d3": "^7.4.3",
    "@types/jest": "^29.5.0",
    "@types/luxon": "^3.4.2",
    "@types/node": "^18.16.9",
    "@types/recordrtc": "^5.6.14",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.0.0",
    "calendar-utils": "^0.10.4",
    "cypress": "^13.0.0",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-cypress": "^2.13.4",
    "eslint-plugin-prettier": "^3.1.4",
    "husky": "^3.1.0",
    "jasmine-marbles": "^0.9.2",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-preset-angular": "^11.1.2",
    "jsonc-eslint-parser": "^2.1.0",
    "karma-coverage": "~2.0.3",
    "lint-staged": "^9.4.2",
    "lodash": "^4.17.21",
    "ng-packagr": "^17.3.0",
    "nx": "17.3.0",
    "prettier": "^2.6.2",
    "pretty-quick": "^3.1.0",
    "standard-version": "^9.5.0",
    "ts-jest": "^29.1.2",
    "ts-node": "^10.9.1",
    "tslint": "~6.1.3",
    "typescript": "^5.3.3",
    "uuid": "^10.0.0",
    "webpack-bundle-analyzer": "^4.10.2"
  },
  "overrides": {
    "@angular-material-components/datetime-picker": {
      "@angular/platform-browser": ">=16.0.0",
      "@angular/common": ">=16.0.0",
      "@angular/core": ">=16.0.0",
      "@angular/forms": ">=16.0.0",
      "@angular/material": ">=16.0.0",
      "@angular/cdk": ">=16.0.0"
    },
    "@angular-material-components/moment-adapter": {
      "@angular/common": ">=16.0.0",
      "@angular/core": ">=16.0.0"
    }
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setupJest.ts"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/dist/"
    ],
    "globals": {
      "ts-jest": {
        "tsconfig": "<rootDir>/tsconfig.spec.json",
        "stringifyContentPathRegex": "\\.html$"
      }
    },
    "moduleNameMapper": {
      "@shared/(.*)": "<rootDir>/src/app/shared-modules/$1"
    }
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,json,scss,md,html}": [
      "prettier --write",
      "git add"
    ]
  }
}

<mat-select
          #singleSelect
          class="erp-material-select-simple-list"
          panelClass="erp-material-select-simple-list-panel"
          [formControl]="optionControl"
          [complete]="(totalPages$ | async) === (page$ | async)"
          msInfiniteScroll
          (infiniteScroll)="nextPage()"
          [multiple]="multi"
          [compareWith]="valueAsObject ? objectComparisonFunction : stringComparisonFunction"
        >
          <!-- <mat-option *ngIf="label" class="is-label" disabled
            ><label>{{ label }}</label></mat-option
          > -->
          <mat-option>
            <ngx-mat-select-search
              [formControl]="optionFilterControl"
              [searching]="loading$ | async"
              [placeholderLabel]="searchPlaceholderLabel"
              [noEntriesFoundLabel]="
                !(loading$ | async) ? optionFilterControl.value + ' not found' : ''
              "
              [clearSearchInput]="false"
              [disableScrollToActiveOnOptionsChanged]="true"
            ></ngx-mat-select-search>
          </mat-option>```

ibnsamy96 · 2025-01-21T10:36:46Z

I'm facing this problem too but I don't think it's related to the newest version of prettier.
The project was working without a problem but I needed to remove the node modules and reinstall them, I removed the node modules, cache folders and the package-lock.json file, and faced this problem after reinstalling the node modules.
I've the same angular and material versions that @elmagd91 shared in his comment.

elmagd91 · 2025-01-21T11:08:35Z

there problem occurs when adding clear selector without inputs and outputs like that
<ngx-mat-select-search></ngx-mat-select-search>

macjohnny · 2025-01-21T11:12:15Z

can you check that you have

ngx-mat-select-search/src/app/app.module.ts

Line 9 in 1595f36

import { MatSelectModule } from '@angular/material/select';

with that exact path?

can you make sure that there is only one folder @angular/material/select inside node_modules? i.e. it should be under node_modules/@angular/material/select, but not node_modules/ngx-mat-select-search/@angular/material/select

elmagd91 · 2025-01-21T11:45:01Z

we did that in-app module and all sub modules

elmagd91 · 2025-01-21T11:47:29Z

package-lock.json
when I remove package-lock.json and try to run npm install
I faced this problem

when I keep pack-lock.json and try to run npm install I don't face this problem

macjohnny · 2025-01-21T13:28:11Z

I suspect that

  "overrides": {
    "@angular-material-components/datetime-picker": {
      "@angular/platform-browser": ">=16.0.0",
      "@angular/common": ">=16.0.0",
      "@angular/core": ">=16.0.0",
      "@angular/forms": ">=16.0.0",
      "@angular/material": ">=16.0.0",
      "@angular/cdk": ">=16.0.0"
    },
    "@angular-material-components/moment-adapter": {
      "@angular/common": ">=16.0.0",
      "@angular/core": ">=16.0.0"
    }
  },

of your package json would cause an additional, separate @angular/material package to be installed.

please provide the package-lock.json when you face the problem

elmagd91 · 2025-01-21T13:45:16Z

should I replace it with

"overrides": {
    "@angular-material-components/datetime-picker": {
      "@angular/platform-browser": ">=16.0.0",
      "@angular/common": ">=16.0.0",
      "@angular/core": ">=16.0.0",
      "@angular/forms": ">=16.0.0",
      "@angular/material": ">=16.0.0",
      "@angular/cdk": ">=16.0.0"
    },
    "ngx-mat-select-search": {
      "@angular/material": ">=16.0.0"
    }
  },

macjohnny · 2025-01-21T14:04:05Z

no, there should not be overrides with @angular/material, maybe this causes multiple copies of the package to be loaded. then the <mat-select> used in your template is different from the MatSelect that is injected in ngx-mat-select-search, so it results in the dependency injection error.

elmagd91 · 2025-01-21T19:23:31Z

"overrides": {
"@angular-material-components/datetime-picker": {
"@angular/platform-browser": ">=17.0.0",
"@angular/common": ">=17.0.0",
"@angular/core": ">=17.0.0",
"@angular/forms": ">=17.0.0",
"@angular/material": ">=17.0.0",
"@angular/cdk": ">=17.0.0"
}
},
I tried this solution but it still issue exist

elmagd91 · 2025-01-21T20:30:31Z

I should keep package-lock.json and avoid this error

package-lock.json

why when removing it and running npm install
package-lock.json changes and I face this issue

elmagd91 · 2025-01-21T21:00:39Z

I think the issue will be resolved if you add MatOptionModule in
https://github.com/bithost-gmbh/ngx-mat-select-search/blob/master/src/app/mat-select-search/ngx-mat-select-search.module.ts

macjohnny · 2025-01-21T21:17:26Z

can you please attach the package-lock.json the you get after deleting the current one and installing the packages again?

elmagd91 · 2025-01-21T21:40:27Z

can you please attach the package-lock.json the you get after deleting the current one and installing the packages again?

package-lock.json

elmagd91 · 2025-01-21T21:56:25Z

https://github.com/bithost-gmbh/ngx-mat-select-search/blob/master/src/app/mat-select-search/mat-select-search.component.ts

@Inject(MatSelect) public matSelect: MatSelect,

macjohnny · 2025-01-22T08:14:17Z

thats strange, the diff between the package locks doesnt contain any change related to angular material.

I would suggest that you delete the package-lock.json and node_modules, and then run npm install again.

elmagd91 · 2025-01-22T08:16:43Z

I did that, I will clone your lib and try to fix it to avoid this issue and tell you the final result

macjohnny · 2025-02-07T15:31:53Z

@elmagd91 any update on this?

elmagd91 · 2025-02-07T15:55:30Z

I am so busy until this moment, I didn't trace it

elmagd91 added the bug Something isn't working label Jan 21, 2025

macjohnny added not a bug and removed bug Something isn't working labels Jan 21, 2025

macjohnny mentioned this issue Jan 31, 2025

[BUG] After Migrating from angular 14 to 16 the search option troughing below error #519

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BUG] An unexpected error occurred: NullInjectorError: R3InjectorError(SalesDashboardModule)[MatSelect -> MatSelect -> MatSelect -> MatSelect -> MatSelect -> MatSelect]: NullInjectorError: No provider for MatSelect! #514

[BUG] An unexpected error occurred: NullInjectorError: R3InjectorError(SalesDashboardModule)[MatSelect -> MatSelect -> MatSelect -> MatSelect -> MatSelect -> MatSelect]: NullInjectorError: No provider for MatSelect! #514

elmagd91 commented Jan 21, 2025

macjohnny commented Jan 21, 2025

elmagd91 commented Jan 21, 2025 •

edited

Loading

ibnsamy96 commented Jan 21, 2025 •

edited

Loading

elmagd91 commented Jan 21, 2025 •

edited

Loading

macjohnny commented Jan 21, 2025

elmagd91 commented Jan 21, 2025

elmagd91 commented Jan 21, 2025

macjohnny commented Jan 21, 2025

elmagd91 commented Jan 21, 2025

macjohnny commented Jan 21, 2025 •

edited

Loading

elmagd91 commented Jan 21, 2025

elmagd91 commented Jan 21, 2025

elmagd91 commented Jan 21, 2025

macjohnny commented Jan 21, 2025

elmagd91 commented Jan 21, 2025

elmagd91 commented Jan 21, 2025

macjohnny commented Jan 22, 2025

elmagd91 commented Jan 22, 2025

macjohnny commented Feb 7, 2025

elmagd91 commented Feb 7, 2025

[BUG] An unexpected error occurred: NullInjectorError: R3InjectorError(SalesDashboardModule)[MatSelect -> MatSelect -> MatSelect -> MatSelect -> MatSelect -> MatSelect]: NullInjectorError: No provider for MatSelect! #514

[BUG] An unexpected error occurred: NullInjectorError: R3InjectorError(SalesDashboardModule)[MatSelect -> MatSelect -> MatSelect -> MatSelect -> MatSelect -> MatSelect]: NullInjectorError: No provider for MatSelect! #514

Comments

elmagd91 commented Jan 21, 2025

macjohnny commented Jan 21, 2025

elmagd91 commented Jan 21, 2025 • edited Loading

ibnsamy96 commented Jan 21, 2025 • edited Loading

elmagd91 commented Jan 21, 2025 • edited Loading

macjohnny commented Jan 21, 2025

elmagd91 commented Jan 21, 2025

elmagd91 commented Jan 21, 2025

macjohnny commented Jan 21, 2025

elmagd91 commented Jan 21, 2025

macjohnny commented Jan 21, 2025 • edited Loading

elmagd91 commented Jan 21, 2025

elmagd91 commented Jan 21, 2025

elmagd91 commented Jan 21, 2025

macjohnny commented Jan 21, 2025

elmagd91 commented Jan 21, 2025

elmagd91 commented Jan 21, 2025

macjohnny commented Jan 22, 2025

elmagd91 commented Jan 22, 2025

macjohnny commented Feb 7, 2025

elmagd91 commented Feb 7, 2025

elmagd91 commented Jan 21, 2025 •

edited

Loading

ibnsamy96 commented Jan 21, 2025 •

edited

Loading

elmagd91 commented Jan 21, 2025 •

edited

Loading

macjohnny commented Jan 21, 2025 •

edited

Loading