No provider for ElementRef about angular-material-fileupload HOT 17 OPEN

It works fine on v0.0.9

from angular-material-fileupload.

@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.

from angular-material-fileupload.

@rachid-boukhani Were you able to fix this?

from angular-material-fileupload.

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

from angular-material-fileupload.

I am getting this error as well. Using ng serve

from angular-material-fileupload.

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"
  }

from angular-material-fileupload.

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'.

from angular-material-fileupload.

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

from angular-material-fileupload.

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

from angular-material-fileupload.

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"
  }

from angular-material-fileupload.

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

from angular-material-fileupload.

@rachid-boukhani Can you try the above method?

from angular-material-fileupload.

@rachid-boukhani Were you able to try it?

from angular-material-fileupload.

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?

from angular-material-fileupload.

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"
  }
}

from angular-material-fileupload.

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

from angular-material-fileupload.

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"
}

from angular-material-fileupload.