angular-material-fileupload
angular-material-fileupload copied to clipboard
nishantmc
No provider for ElementRef
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 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.
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
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"
}
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'.
Ok updating to angular 7.2.7 and making sure CDK and Material matched version was key to getting this to work
@Fyb3roptik Glad it worked, was facing similar issues https://github.com/nishantmc/angular-material-fileupload/issues/35#issuecomment-463487076.
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: https://github.com/nishantmc/angular-material-fileupload/issues/35?_pjax=%23js-repo-pjax-container#issuecomment-469061713
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"
}
@Lukade Glad to hear it worked, it's a good idea to match cdk and material versions to angular.
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?
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"
}
}
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" }
