search

bleenco / ngx-uploader

Angular File Uploader
https://ngx-uploader.jankuri.me
MIT License
757 stars 348 forks source link

Ionic 2 rc3 error "Can't bind to 'options'" #151

Closed theromis closed 7 years ago

theromis commented 7 years ago

Everything worked fine, after update gives this error.

Can't bind to 'options' since it isn't a known property of 'div'. ("
                <ion-item>
                    <div ngFileDrop
                         [ERROR ->][options]="profileOptions"

template.html

                        <div ngFileDrop
                             [ngClass]="{'file-over': protectionDropZoneOver}"
                             [options]="protectionOptions"
                             (onUpload)="handleUpload($event)"
                             (onFileOver)="fileOverBaseProtection($event)"
                             class="image-drop-zone">

app.module.ts

import { Ng2UploaderModule } from 'ng2-uploader';
...
@NgModule({
  imports: [
    IonicModule.forRoot(MyApp),
    Ng2UploaderModule,
    BrowserModule,
    FormsModule,
    MomentModule,
    AngularFireModule.initializeApp(firebaseConfig, myFirebaseAuthConfig),
  ],
....
theromis commented 7 years ago

Just found in closed issues similar https://github.com/jkuri/ng2-uploader/issues/146 trying what been done there, doesn't help.

theromis commented 7 years ago

ok my problem was in ng2-upload version I've used 1.5.7 (1.5.6, 1.6.0 not works as well), downgrade to 1.5.5 fixed issue. problem in 1.5.5 that I have to run build --dev which is wrong.

Please help me with update to the latest version, I really love this module. package.json

{
  "name": "ionic-chat-lonje",
  "author": "Lonje",
  "homepage": "https://chat.lonje.com/",
  "private": true,
  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "@types/jasmine": "^2.5.38",
    "@types/socket.io-client": "1.4.27",
    "angular2-jwt": "0.1.23",
    "angular2-moment": "^1.0.0-beta.rc.1",
    "angularfire2": "^2.0.0-beta.6",
    "ionic-angular": "2.0.0-rc.3",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "ng2-tag-input": "^0.4.4",
    "ng2-uploader": "1.5.5",
    "rxjs": "5.0.0-beta.12",
    "socket.io-client": "1.5.0",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.45",
    "@types/node": "0.0.2",
    "typescript": "2.0.6"
  },
  "cordovaPlugins": [
    "cordova-plugin-crosswalk-webview",
    "cordova-plugin-googleplus",
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ]
}
✗ ionic info

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.14
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.9.0
ios-sim version: 5.0.12
OS: macOS Sierra
Node Version: v7.2.0
Xcode version: Xcode 8.1 Build version 8B62
theromis commented 7 years ago

@jkuri hey, I know you the man, please help to fix the stuff.

jkuri commented 7 years ago

okay :) I'll check it out now

jkuri commented 7 years ago

@theromis can you check 1.6.1 and let me know please?

theromis commented 7 years ago

still the same

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'div'. ("
                <ion-item>
                    <div ngFileDrop
                         [ERROR ->][options]="profileOptions"
                         (onUpload)="handleUpload($event)"
               "): ProfilePage@165:25
jkuri commented 7 years ago

ng2-uploader.com.zip

here's the demo page, please check how its done here. to run this: npm install && npm run serve

theromis commented 7 years ago

just unpacked it and ran npm install npm run serve

and got same error

vendor.js:7698 Unhandled Promise rejection: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'div'. ("
               *ngIf="!response"
               ngFileDrop
               [ERROR ->][options]="options"
               (onUpload)="handleUpload($event)"
               [ngClass]="{'file"): AppDemoComponent@8:15
Can't bind to 'options' since it isn't a known property of 'input'. ("
                     class="hidden" 
                     ngFileSelect
                     [ERROR ->][options]="options" 
                     (onUpload)="handleUpload($event)">
              Browse
"): AppDemoComponent@18:21 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'div'. ("
               *ngIf="!response"
               ngFileDrop
               [ERROR ->][options]="options"
               (onUpload)="handleUpload($event)"
               [ngClass]="{'file"): AppDemoComponent@8:15
Can't bind to 'options' since it isn't a known property of 'input'. ("
                     class="hidden" 
                     ngFileSelect
                     [ERROR ->][options]="options" 
                     (onUpload)="handleUpload($event)">
              Browse
"): AppDemoComponent@18:21
    at TemplateParser.parse (http://localhost:4200/vendor.js:34730:19)
    at RuntimeCompiler._compileTemplate (http://localhost:4200/vendor.js:44520:51)
    at http://localhost:4200/vendor.js:44440:62
    at Set.forEach (native)
    at RuntimeCompiler._compileComponents (http://localhost:4200/vendor.js:44440:19)
    at createResult (http://localhost:4200/vendor.js:44336:19)
    at ZoneDelegate.invoke (http://localhost:4200/vendor.js:7542:26)
    at Zone.run (http://localhost:4200/vendor.js:7424:43)
    at http://localhost:4200/vendor.js:7812:57
    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.js:7575:35)consoleError @ vendor.js:7698
vendor.js:7700 Error: Uncaught (in promise): Error: Template parse errors:(…)
jkuri commented 7 years ago

Please fix you typescript version to exact 2.0.10

theromis commented 7 years ago

I will change dependency, but my current is 2.0.10

head /Users/vasilro/Downloads/ng2-uploader.com/node_modules/typescript/package.json
{
  "_args": [
    [
      {
        "raw": "typescript@^2.0.10",
        "scope": null,
        "escapedName": "typescript",
        "name": "typescript",
        "rawSpec": "^2.0.10",
        "spec": ">=2.0.10 <3.0.0",
jkuri commented 7 years ago

you need to set it without starting ^, so:

"typescript": "2.0.10"
theromis commented 7 years ago

this is exactly what I did, and reinstalling script right now

theromis commented 7 years ago

it works, thank you will try on my project now

jkuri commented 7 years ago

no problem, was having exact issue with typescript version whole day at work :(

theromis commented 7 years ago

but setting this on my project still giving same error

{
  "private": true,
  "scripts": {
    "ionic:build": "ionic-app-scripts build --dev",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "@types/jasmine": "^2.5.38",
    "@types/socket.io-client": "1.4.27",
    "angular2-jwt": "0.1.23",
    "angular2-moment": "^1.0.0-beta.rc.1",
    "angularfire2": "^2.0.0-beta.6",
    "ionic-angular": "2.0.0-rc.3",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "ng2-tag-input": "^0.4.4",
    "ng2-uploader": "1.6.1",
    "rxjs": "5.0.0-beta.12",
    "socket.io-client": "1.5.0",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.45",
    "@types/node": "0.0.2",
    "typescript": "2.0.10"
  },
  "cordovaPlugins": [
    "cordova-plugin-crosswalk-webview",
    "cordova-plugin-googleplus",
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ]
}
jkuri commented 7 years ago

what happens if you upgrade angular versions to 2.2.1?

theromis commented 7 years ago 
npm WARN ionic-angular@2.0.0-rc.3 requires a peer of @angular/common@2.1.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3 requires a peer of @angular/compiler@2.1.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3 requires a peer of @angular/compiler-cli@2.1.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3 requires a peer of @angular/core@2.1.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3 requires a peer of @angular/forms@2.1.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3 requires a peer of @angular/http@2.1.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3 requires a peer of @angular/platform-browser@2.1.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3 requires a peer of @angular/platform-browser-dynamic@2.1.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.3 requires a peer of @angular/platform-server@2.1.1 but none was installed.
jkuri commented 7 years ago

sorry but unfamiliar with ionic-angular though.

theromis commented 7 years ago

upcoming rc4 will switch to 2.2.1, unfortunately rc3 hardly dependant from 2.1.1

theromis commented 7 years ago

well, will wait for rc4, and sit on 1.5.5 until, this should happened next week

jkuri commented 7 years ago

okay, basically you are not missing much, I just added AoT compiler.

theromis commented 7 years ago

thanks, will write here about my upgrade attempts later

kolkov commented 7 years ago

Me too (( image

alan345 commented 7 years ago

Hello, Same issue here. What should we do ? I have "typescript": "2.0.10", and "@angular/common": "2.1.2", "@angular/compiler": "2.1.2", "@angular/core": "2.1.2", "@angular/forms": "2.1.2",

Thanks for your help

alan345 commented 7 years ago

I have updated angular "@angular/common": "2.2.1", "@angular/compiler": "2.2.1", "@angular/core": "2.2.1", "@angular/forms": "2.2.1", "@angular/http": "2.2.1",

but still the same issue with option

Thanks for your help !!

screen shot 2016-12-09 at 4 58 18 pm
scurk15 commented 7 years ago

I have the same problem since i updated to 1.6.1, but 1.5.3 worked fine. Ohh i forgot to mention that i am not using Ionic but plain Angular2.

ventr1x commented 7 years ago

You just gotta love this node/js ecosystem. It is clearly an issue with the current version of the plugin, I personally don't have the time to go through the source myself.

You posted a systemjs example in #146 and the only difference from my project is the version of ng2-uploader (1.5.5 instead of latest). 1.5.5 indeed seems to work, at least concerning this error.

vladisov commented 7 years ago

+1 same error

gnovotny commented 7 years ago

the pull request by parag-patwardhan works for me

theromis commented 7 years ago

@jkuri Could you merge https://github.com/jkuri/ng2-uploader/pull/154 ?

jkuri commented 7 years ago

done.