Error when using component in template

[cmauersberger]

Hi! I'd love to use your wrapper and followed the simple steps, but I get an error when using the component in my template. The console reads:

ERROR Error: StaticInjectorError[ElementRef]: StaticInjectorError[ElementRef]: NullInjectorError: No provider for ElementRef! at _NullInjector.get (core.js:923) [...]

Any idea how that comes? Is there any additional info I can supply?

[ZNick1982]

Hello Christof. Can you provide the version of Angular that you use. And examples of your code, how you try to setup the widget, including templates.

[cmauersberger]

Hey ZNick, ng version gives me:

Angular CLI: 1.6.3 Node: 8.9.4 OS: win32 x64 Angular: 5.0.5 ... animations, common, compiler, compiler-cli, core, forms ... http, platform-browser, platform-browser-dynamic, router

angular/cli: 1.6.3 angular-devkit/build-optimizer: 0.0.36 angular-devkit/core: 0.0.22 angular-devkit/schematics: 0.0.42 ngtools/json-schema: 1.1.0 ngtools/webpack: 1.9.3 schematics/angular: 0.1.11 schematics/schematics: 0.0.11 typescript: 2.4.2 webpack: 3.10.0

In my component.html file, I put

<ngx-uploadcare-widget
  images-only="true"
  public-key="XXX....YYY">
</ngx-uploadcare-widget>

In my component.ts file, I changed nothing.

In my module.ts file, I put (just like your docu says):

import { UcWidgetComponent } from 'ngx-uploadcare-widget';
...
declarations: [ConfigurationDetailComponent, ConfOptionComponent, UcWidgetComponent]

My package.json includes:

...
  "dependencies": {
    "@angular-redux/store": "7.0.1",
    "@angular/animations": "^5.0.5",
    "@angular/common": "5.0.5",
    "@angular/compiler": "5.0.5",
    "@angular/core": "5.0.5",
    "@angular/forms": "5.0.5",
    "@angular/http": "5.0.5",
    "@angular/platform-browser": "5.0.5",
    "@angular/platform-browser-dynamic": "5.0.5",
    "@angular/router": "5.0.5",
    "@swimlane/ngx-datatable": "11.1.5",
    "X-editable": "github:vitalets/x-editable",
    "bootstrap": "3.3.7",
    "bootstrap-colorpicker": "2.5.2",
    "bootstrap-duallistbox": "3.0.6",
    "bootstrap-markdown": "2.10.0",
    "bootstrap-progressbar": "0.9.0",
    "bootstrap-slider": "10.0.0",
    "bootstrap-tagsinput": "0.7.1",
    "bootstrap-timepicker": "0.5.2",
    "chart.js": "2.7.1",
    "classlist.js": "^1.1.20150312",
    "clockpicker": "0.0.7",
    "clone": "2.1.1",
    "core-js": "2.5.1",
    "debounce": "1.1.0",
    "dropzone": "5.2.0",
    "dygraphs": "2.0.0",
    "font-awesome": "^4.7.0",
    "fuelux": "3.16.2",
    "he": "1.1.1",
    "highcharts": "6.0.3",
    "ion-rangeslider": "2.2.0",
    "jquery": "3.2.1",
    "jquery-color": "git+https://github.com/jquery/jquery-color.git",
    "jquery-jcrop": "0.9.13",
    "jquery-knob": "1.2.11",
    "jquery-ui-npm": "1.12.0",
    "jquery-validation": "1.17.0",
    "jquery.maskedinput": "1.4.1",
    "markdown": "0.5.0",
    "morris.js": "0.5.0",
    "ngx-bootstrap": "^2.0.0-beta.2",
    "ngx-popover": "0.0.16",
    "ngx-toastr": "^8.1.1",
    "ngx-uploadcare-widget": "^0.1.3",
    "nouislider": "10.1.0",
    "primeng": "^5.0.2",
    "raphael": "2.2.7",
    "redux": "3.7.2",
    "rxjs": "5.5.2",
    "scriptjs": "2.5.8",
    "select2": "4.0.6-rc.1",
    "smartadmin-plugins": "1.0.21",
    "summernote": "0.8.8",
    "to-markdown": "3.1.0",
    "ts-helpers": "1.1.2",
    "uploadcare-widget": "^3.2.2",
    "web-animations-js": "2.3.1",
    "zone.js": "0.8.18"
  },
...

I hope this gives you an idea! Thanks for your help!

[ZNick1982]

Hey Christof. Thanks for detailed examples. I hope it's enough for bug reproduction. I will check and write back to you then. Cheers.

[ZNick1982]

Hi Christof. I did try CLI of your version (1.6.3), generate a new app and add the wrapper. Unfortunately the error did not reproduced. I think that could be mismatches in "devDependencies" in configuration. Could you send "devDependencies" of your package.json?

Also I little discovered about your error and found the following issue: https://github.com/angular/angular/issues/20101 Hope its helps.

[cmauersberger]

Thanks for your answer and sorry for not getting back to you earlier (sick...). My devDependencies read (I removed the @ from lines 2-6):

"devDependencies": { "angular/cli": "^1.6.3", "angular/compiler-cli": "5.0.5", "types/jasmine": "2.8.2", "types/jquery": "3.2.16", "types/node": "8.0.54", "codelyzer": "4.0.1", "css-loader": "0.28.7", "exports-loader": "0.6.4", "expose-loader": "0.7.4", "file-loader": "1.1.5", "imports-loader": "0.7.1", "jasmine-core": "2.8.0", "jasmine-spec-reporter": "4.2.1", "karma": "1.7.1", "karma-chrome-launcher": "2.2.0", "karma-cli": "1.0.1", "karma-coverage-istanbul-reporter": "1.3.0", "karma-jasmine": "1.1.1", "karma-jasmine-html-reporter": "0.2.2", "karma-remap-istanbul": "0.6.0", "protractor": "5.2.0", "raw-loader": "0.5.1", "script-loader": "0.7.2", "style-loader": "0.19.0", "ts-node": "3.3.0", "tslint": "5.8.0", "typescript": "2.4.2", "url-loader": "0.6.2" },

The link you provided didn't give me a straightforward solution, although I didn't try all the suggested hints.

[cmauersberger]

Issue resolved after we updated to latest angular CLI!