No provider for ElementRef #35

rachid-boukhani · 2019-02-13T14:48:55Z

Hi
I get this error with the latest version (v2.0.0) when I follow the exact steps mentioned on the doc:

FilingUploadDialogComponent.html:2 ERROR Error: StaticInjectorError(AppModule)[FileUploadInputFor -> ElementRef]:
StaticInjectorError(Platform: core)[FileUploadInputFor -> ElementRef]:
NullInjectorError: No provider for ElementRef!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8894)
at resolveToken (core.js:9139)
at tryResolveToken (core.js:9083)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8980)
at resolveToken (core.js:9139)
at tryResolveToken (core.js:9083)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8980)
at resolveNgModuleDep (core.js:21119)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21808)
at resolveDep (core.js:22179)

I'm using:
"@angular/cdk": "6.1.0",
"@angular/common": "^7.2.4",
"@angular/compiler": "^7.2.4",
"@angular/core": "^7.2.4",
"@angular/forms": "^7.2.4",
"@angular/http": "^7.2.4",
"@angular/material": "6.1.0",
"@angular/platform-browser": "^7.2.4",
"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^6.0.1",
"@ngrx/router-store": "^6.0.1",
"angular-material-fileupload": "^2.0.0",

rachid-boukhani · 2019-02-13T15:07:43Z

It works fine on v0.0.9

nishantmc · 2019-02-14T04:40:27Z

@rachid-boukhani How are you building the app? Are you using ng build?
From the package.json you posted, i could see the cdk and material versions not matching the angular versions. Its better to match the angular versions. Was testing this with a angular cli project. This is the deps i have

"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@angular/cdk": "~7.2.0",
"@angular/material": "~7.2.0",
"angular-material-fileupload": "2.0.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.12.0",
"@angular/cli": "~7.2.3",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}

Please check if you can use these versions. But if need a specific feature/bug fix and need to stick to a particular version please let me know.

nishantmc · 2019-03-03T15:27:14Z

@rachid-boukhani Were you able to fix this?

Lukade · 2019-03-03T20:38:56Z

Hello, I am having the same error.

My dependencies:

"dependencies": {
"@angular/animations": "^7.2.7",
"@angular/cdk": "^7.3.3",
"@angular/common": "^7.2.7",
"@angular/compiler": "^7.2.7",
"@angular/core": "^7.2.7",
"@angular/forms": "^7.2.7",
"@angular/http": "^7.2.7",
"@angular/material": "^7.3.3",
"@angular/platform-browser": "^7.2.7",
"@angular/platform-browser-dynamic": "^7.2.7",
"@angular/router": "^7.2.7",
"angular-material-fileupload": "^2.0.0",
"bootstrap": "^4.3.1",
"core-js": "^2.6.5",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"less": "^3.9.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "^0.8.29"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.11.4",
"@angular/cli": "^7.1.4",
"@angular/compiler-cli": "^7.2.7",
"@angular/language-service": "^7.2.7",
"@types/jasmine": "^2.8.16",
"@types/jasminewd2": "^2.0.6",
"@types/node": "~8.9.4",
"codelyzer": "~4.3.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.2",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}

Error messages:

ERROR Error: StaticInjectorError(AppModule)[FileUploadInputFor -> ElementRef]:
StaticInjectorError(Platform: core)[FileUploadInputFor -> ElementRef]:
NullInjectorError: No provider for ElementRef!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8895)
at resolveToken (core.js:9140)
at tryResolveToken (core.js:9084)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
at resolveToken (core.js:9140)
at tryResolveToken (core.js:9084)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
at resolveNgModuleDep (core.js:21217)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21906)
at resolveDep (core.js:22277)

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[FileUploadInputFor -> ElementRef]:
StaticInjectorError(Platform: core)[FileUploadInputFor -> ElementRef]:
NullInjectorError: No provider for ElementRef!
Error: StaticInjectorError(AppModule)[FileUploadInputFor -> ElementRef]:
StaticInjectorError(Platform: core)[FileUploadInputFor -> ElementRef]:
NullInjectorError: No provider for ElementRef!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8895)
at resolveToken (core.js:9140)
at tryResolveToken (core.js:9084)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
at resolveToken (core.js:9140)
at tryResolveToken (core.js:9084)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
at resolveNgModuleDep (core.js:21217)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21906)
at resolveDep (core.js:22277)
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8895)
at resolveToken (core.js:9140)
at tryResolveToken (core.js:9084)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
at resolveToken (core.js:9140)
at tryResolveToken (core.js:9084)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
at resolveNgModuleDep (core.js:21217)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21906)
at resolveDep (core.js:22277)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17289)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
at

I am also getting some warnings about circular dependencies and I don't know if these can be related to this error. I will throw them in just in case.

Warnings:

WARNING in ./node_modules/angular-material-fileupload/node_modules/@angular/core/fesm5/core.js 18358:15-36
Critical dependency: the request of a dependency is an expression
WARNING in ./node_modules/angular-material-fileupload/node_modules/@angular/core/fesm5/core.js 18370:15-102
Critical dependency: the request of a dependency is an expression

Fyb3roptik · 2019-03-03T23:51:26Z

I am getting this error as well. Using ng serve

Fyb3roptik · 2019-03-03T23:54:20Z

Here are my dependencies

"dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/cdk": "^7.2.0",
    "@angular/common": "~7.1.4",
    "@angular/compiler": "~7.1.4",
    "@angular/core": "^7.1.4",
    "@angular/flex-layout": "^7.0.0-beta.22",
    "@angular/forms": "~7.1.4",
    "@angular/http": "~7.1.4",
    "@angular/material": "^7.2.0",
    "@angular/platform-browser": "~7.1.4",
    "@angular/platform-browser-dynamic": "~7.1.4",
    "@angular/router": "~7.1.4",
    "@material/snackbar": "^0.44.1",
    "@nguniversal/express-engine": "^7.1.0",
    "angular-material-fileupload": "^2.0.0",
    "angulartics2": "^7.2.4",
    "core-js": "^2.6.1",
    "hammerjs": "^2.0.8",
    "json-server": "^0.14.2",
    "ngx-cookie": "^4.1.2",
    "rxjs": "~6.3.3",
    "video.js": "^7.4.1",
    "zone.js": "~0.8.26"
  }

Fyb3roptik · 2019-03-03T23:55:44Z

Getting this error as well:

ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

Fyb3roptik · 2019-03-04T02:43:11Z

Ok updating to angular 7.2.7 and making sure CDK and Material matched version was key to getting this to work

nishantmc · 2019-03-04T02:45:48Z

@Fyb3roptik Glad it worked, was facing similar issues #35 (comment).

Lukade · 2019-03-04T19:54:00Z

What did the trick for me, was reinstalling the module, after updating angular to the latest version. That also took rid of the circular dependency warnings I mentioned: #35

My final dependency list, with which the module is functioning accordingly:

  "dependencies": {
    "@angular/animations": "^7.2.7",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "^7.2.7",
    "@angular/compiler": "^7.2.7",
    "@angular/core": "^7.2.7",
    "@angular/forms": "^7.2.7",
    "@angular/http": "^7.2.7",
    "@angular/material": "^7.3.3",
    "@angular/platform-browser": "^7.2.7",
    "@angular/platform-browser-dynamic": "^7.2.7",
    "@angular/router": "^7.2.7",
    "angular-material-fileupload": "^2.0.0",
    "bootstrap": "^4.3.1",
    "core-js": "^2.6.5",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.3.1",
    "less": "^3.9.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.4",
    "@angular/cli": "^7.3.4",
    "@angular/compiler-cli": "^7.2.7",
    "@angular/language-service": "^7.2.7",
    "@types/jasmine": "^3.3.9",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "~11.10.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^5.4.2",
    "ts-node": "~8.0.2",
    "tslint": "~5.13.1",
    "typescript": "^3.2.4"
  }

nishantmc · 2019-03-05T03:19:09Z

@Lukade Glad to hear it worked, it's a good idea to match cdk and material versions to angular.

nishantmc · 2019-03-05T03:20:29Z

@rachid-boukhani Can you try the above method?

nishantmc · 2019-03-19T03:57:59Z

@rachid-boukhani Were you able to try it?

GarridoM · 2019-06-24T17:25:42Z

Hi,

I have the same problem and I am not able to fix it. My package is:

  "dependencies": {
    "@agm/core": "1.0.0-beta.5",
    "@angular/animations": "7.2.7",
    "@angular/cdk": "7.3.3",
    "@angular/common": "7.2.7",
    "@angular/compiler": "7.2.7",
    "@angular/core": "7.2.7",
    "@angular/flex-layout": "7.0.0-beta.19",
    "@angular/forms": "7.2.7",
    "@angular/http": "7.2.7",
    "@angular/material": "7.3.3",
    "@angular/material-moment-adapter": "7.0.4",
    "@angular/platform-browser": "7.2.7",
    "@angular/platform-browser-dynamic": "7.2.7",
    "@angular/router": "7.2.7",
    "@ngrx/effects": "6.1.2",
    "@ngrx/router-store": "6.1.2",
    "@ngrx/store": "6.1.2",
    "@ngrx/store-devtools": "6.1.2",
    "@ngx-translate/core": "11.0.1",
    "@swimlane/dragula": "3.7.3",
    "@swimlane/ngx-charts": "10.0.0",
    "@swimlane/ngx-datatable": "14.0.0",
    "@swimlane/ngx-dnd": "6.0.0",
    "@types/prismjs": "1.9.0",
    "angular-calendar": "0.26.4",
    "angular-in-memory-web-api": "0.7.0",
    "chart.js": "2.7.3",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.7",
    "d3": "5.7.0",
    "date-fns": "1.29.0",
    "hammerjs": "2.0.8",
    "lodash": "4.17.11",
    "moment": "2.22.2",
    "ng2-charts": "1.6.0",
    "ngrx-store-freeze": "0.2.4",
    "ngx-bar-rating": "1.1.0",
    "ngx-color-picker": "7.0.2",
    "ngx-cookie-service": "2.0.0",
    "perfect-scrollbar": "1.4.0",
    "prismjs": "1.15.0",
    "rxjs": "6.3.3",
    "rxjs-compat": "6.3.3",
    "sass-loader": "7.1.0",
    "web-animations-js": "2.3.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "7.3.4",
    "@angular/compiler-cli": "7.2.7",
    "@angular/language-service": "7.2.7",
    "@angular-devkit/build-angular": "0.13.4",
    "@angularclass/hmr": "2.1.3",
    "@types/jasmine": "2.8.11",
    "@types/jasminewd2": "2.0.6",
    "@types/lodash": "4.14.118",
    "@types/node": "8.9.5",
    "codelyzer": "4.5.0",
    "jasmine-core": "2.99.1",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "3.0.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "2.0.4",
    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.4.1",
    "ts-node": "7.0.1",
    "tslint": "5.11.0",
    "typescript": "3.1.6",
    "webpack-bundle-analyzer": "3.0.3"
  }
}

any help?

a-bradaric · 2019-06-26T12:47:32Z

Experiencing the same problem, unfortunately. Here's my settings and thanks in advance

   "dependencies": {
    "@angular/animations": "^8.0.2",
    "@angular/cdk": "^8.0.1",
    "@angular/common": "^8.0.2",
    "@angular/compiler": "^8.0.2",
    "@angular/core": "^8.0.2",
    "@angular/flex-layout": "^8.0.0-beta.26",
    "@angular/forms": "^8.0.2",
    "@angular/material": "^8.0.1",
    "@angular/platform-browser": "^8.0.2",
    "@angular/platform-browser-dynamic": "^8.0.2",
    "@angular/router": "^8.0.2",
    "angular-material-fileupload": "^2.0.0",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.800.4",
    "@angular/cli": "^8.0.4",
    "@angular/compiler-cli": "^8.0.2",
    "@angular/language-service": "^8.0.2",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

aximobile · 2019-07-05T08:39:35Z

Same problem here with the same settings as @a-bradaric

vandreas19 · 2019-11-06T08:44:17Z

I have the same issues.
this is my dependencies and dev dependencies.
"dependencies": {
"@angular/animations": "~8.2.7",
"@angular/cdk": "~8.2.2",
"@angular/common": "~8.2.7",
"@angular/compiler": "~8.2.7",
"@angular/core": "~8.2.7",
"@angular/flex-layout": "^8.0.0-beta.27",
"@angular/forms": "~8.2.7",
"@angular/material": "^8.2.2",
"@angular/platform-browser": "~8.2.7",
"@angular/platform-browser-dynamic": "~8.2.7",
"@angular/router": "~8.2.7",
"@fortawesome/angular-fontawesome": "^0.5.0",
"@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-solid-svg-icons": "^5.11.2",
"angular-material-fileupload": "^2.0.0",
"bootstrap": "^4.3.1",
"hammerjs": "^2.0.8",
"jquery": "^3.4.1",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.5",
"@angular/cli": "~8.3.5",
"@angular/compiler-cli": "~8.2.7",
"@angular/language-service": "~8.2.7",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}

nishantmc mentioned this issue Mar 5, 2019

does this work with angular 5.2.0 #34

Closed

This was referenced Apr 10, 2019

not working with angular 7 #45

Open

getting error NullInjectorError: No provider for MatFileUploadQueue! #47

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

No provider for ElementRef #35

No provider for ElementRef #35

rachid-boukhani commented Feb 13, 2019

rachid-boukhani commented Feb 13, 2019 •

edited

nishantmc commented Feb 14, 2019

nishantmc commented Mar 3, 2019

Lukade commented Mar 3, 2019

Fyb3roptik commented Mar 3, 2019

Fyb3roptik commented Mar 3, 2019

Fyb3roptik commented Mar 3, 2019

Fyb3roptik commented Mar 4, 2019

nishantmc commented Mar 4, 2019

Lukade commented Mar 4, 2019 •

edited

nishantmc commented Mar 5, 2019

nishantmc commented Mar 5, 2019

nishantmc commented Mar 19, 2019

GarridoM commented Jun 24, 2019 •

edited

a-bradaric commented Jun 26, 2019

aximobile commented Jul 5, 2019

vandreas19 commented Nov 6, 2019

No provider for ElementRef #35

No provider for ElementRef #35

Comments

rachid-boukhani commented Feb 13, 2019

rachid-boukhani commented Feb 13, 2019 • edited

nishantmc commented Feb 14, 2019

nishantmc commented Mar 3, 2019

Lukade commented Mar 3, 2019

Fyb3roptik commented Mar 3, 2019

Fyb3roptik commented Mar 3, 2019

Fyb3roptik commented Mar 3, 2019

Fyb3roptik commented Mar 4, 2019

nishantmc commented Mar 4, 2019

Lukade commented Mar 4, 2019 • edited

nishantmc commented Mar 5, 2019

nishantmc commented Mar 5, 2019

nishantmc commented Mar 19, 2019

GarridoM commented Jun 24, 2019 • edited

a-bradaric commented Jun 26, 2019

aximobile commented Jul 5, 2019

vandreas19 commented Nov 6, 2019

rachid-boukhani commented Feb 13, 2019 •

edited

Lukade commented Mar 4, 2019 •

edited

GarridoM commented Jun 24, 2019 •

edited