search

arielfaur / ionic-audio

An audio player for Ionic 3 and Angular 4. Works with HTML 5 audio or native audio using Cordova Media plugin.
http://arielfaur.github.io/ionic-audio/2.0/index.html
MIT License
321 stars 163 forks source link

I have an error when it comes to template parsing errors. #200

Closed jayzyaj closed 6 years ago

jayzyaj commented 6 years ago

`RROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'track' since it isn't a known property of 'audio-track'.

  1. If 'audio-track' is an Angular component and it has 'track' input, then verify that it is part of this module.
  2. If 'audio-track' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" ][track]="track" (onFinish)="onTrackFinished($event)">
  4. If 'audio-track-play' is an Angular component and it has 'audioTrack' input, then verify that it is part of this module.
  5. If 'audio-track-play' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  6. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("umbnail item-left> 
            <audio-track-play dark [ERROR ->][audioTrack]="audio"><ion-spinner></ion-spinner></audio-track-play>  
      </ion-thumbnail>

    "): ng:///MessengerConvoPageModule/MessengerConvoPage.html@105:39 'audio-track-play' is not a known element:

  7. If 'audio-track-play' is an Angular component, then verify that it is part of this module.
  8. If 'audio-track-play' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] "): ng:///MessengerConvoPageModule/MessengerConvoPage.html@105:16 Can't bind to 'audioTrack' since it isn't a known property of 'audio-track-progress-bar'.
  9. If 'audio-track-progress-bar' is an Angular component and it has 'audioTrack' input, then verify that it is part of this module.
  10. If 'audio-track-progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  11. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("g> ⚬ {{audio.artist}} <audio-track-progress-bar dark duration progress [ERROR ->][audioTrack]="audio" [ngStyle]="{visibility: audio.completed > 0 ? 'visible' : 'hidden'}"></audio-tra"): ng:///MessengerConvoPageModule/MessengerConvoPage.html@109:65 'audio-track-progress-bar' is not a known element:

  12. If 'audio-track-progress-bar' is an Angular component, then verify that it is part of this module.
  13. If 'audio-track-progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

    {{audio.title}} ⚬ {{audio.artist}} [ERROR ->]<audio-track-progress-bar dark duration progress [audioTrack]="audio" [ngStyle]="{visibility: audio.c"): ng:///MessengerConvoPageModule/MessengerConvoPage.html@109:16 'audio-track' is not a known element:

  14. If 'audio-track' is an Angular component, then verify that it is part of this module.
  15. If 'audio-track' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" 
    <ion-list>
  [ERROR ->]<audio-track #audio *ngFor="let track of myTracks"  [track]="track" (onFinish)="onTrackFinished($even"): ng:///MessengerConvoPageModule/MessengerConvoPage.html@101:10

    Error: Template parse errors: Can't bind to 'track' since it isn't a known property of 'audio-track'.

  16. If 'audio-track' is an Angular component and it has 'track' input, then verify that it is part of this module.
  17. If 'audio-track' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  18. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" ][track]="track" (onFinish)="onTrackFinished($event)">
  19. If 'audio-track-play' is an Angular component and it has 'audioTrack' input, then verify that it is part of this module.
  20. If 'audio-track-play' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  21. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("umbnail item-left> 
            <audio-track-play dark [ERROR ->][audioTrack]="audio"><ion-spinner></ion-spinner></audio-track-play>  
      </ion-thumbnail>

    "): ng:///MessengerConvoPageModule/MessengerConvoPage.html@105:39 'audio-track-play' is not a known element:

  22. If 'audio-track-play' is an Angular component, then verify that it is part of this module.
  23. If 'audio-track-play' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] "): ng:///MessengerConvoPageModule/MessengerConvoPage.html@105:16 Can't bind to 'audioTrack' since it isn't a known property of 'audio-track-progress-bar'.
  24. If 'audio-track-progress-bar' is an Angular component and it has 'audioTrack' input, then verify that it is part of this module.
  25. If 'audio-track-progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  26. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("g> ⚬ {{audio.artist}} <audio-track-progress-bar dark duration progress [ERROR ->][audioTrack]="audio" [ngStyle]="{visibility: audio.completed > 0 ? 'visible' : 'hidden'}"></audio-tra"): ng:///MessengerConvoPageModule/MessengerConvoPage.html@109:65 'audio-track-progress-bar' is not a known element:

  27. If 'audio-track-progress-bar' is an Angular component, then verify that it is part of this module.
  28. If 'audio-track-progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

    {{audio.title}} ⚬ {{audio.artist}} [ERROR ->]<audio-track-progress-bar dark duration progress [audioTrack]="audio" [ngStyle]="{visibility: audio.c"): ng:///MessengerConvoPageModule/MessengerConvoPage.html@109:16 'audio-track' is not a known element:

  29. If 'audio-track' is an Angular component, then verify that it is part of this module.
  30. If 'audio-track' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" 
    <ion-list>
  [ERROR ->]<audio-track #audio *ngFor="let track of myTracks"  [track]="track" (onFinish)="onTrackFinished($even"): ng:///MessengerConvoPageModule/MessengerConvoPage.html@101:10

    at syntaxError (vendor.js:99265) at TemplateParser.parse (vendor.js:123448) at JitCompiler._parseTemplate (vendor.js:133401) at JitCompiler._compileTemplate (vendor.js:133376) at vendor.js:133277 at Set.forEach () at JitCompiler._compileComponents (vendor.js:133277) at vendor.js:133147 at Object.then (vendor.js:99254) at JitCompiler._compileModuleAndComponents (vendor.js:133146) at syntaxError (vendor.js:99265) at TemplateParser.parse (vendor.js:123448) at JitCompiler._parseTemplate (vendor.js:133401) at JitCompiler._compileTemplate (vendor.js:133376) at vendor.js:133277 at Set.forEach () at JitCompiler._compileComponents (vendor.js:133277) at vendor.js:133147 at Object.then (vendor.js:99254) at JitCompiler._compileModuleAndComponents (vendor.js:133146) at c (polyfills.js:3) at Object.reject (polyfills.js:3) at NavControllerBase._fireError (vendor.js:56216) at NavControllerBase._failed (vendor.js:56209) at vendor.js:56256 at t.invoke (polyfills.js:3) at Object.onInvoke (vendor.js:5123) at t.invoke (polyfills.js:3) at r.run (polyfills.js:3) at polyfills.js:3`

But I imported all the following as it follows.

import { IonicAudioModule, WebAudioProvider, CordovaMediaProvider, defaultAudioProviderFactory } from 'ionic-audio';

export function myCustomAudioProviderFactory() {
  return (window.hasOwnProperty('cordova')) ? new CordovaMediaProvider() : new WebAudioProvider();
}

imports: [
    BrowserAnimationsModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    HttpClientModule,
    IonicImageViewerModule,
    FormsModule,
    IonicAudioModule.forRoot(defaultAudioProviderFactory),
    NgxQRCodeModule
  ],

and in my html file.

` <audio-track #audio *ngFor="let track of myTracks" [track]="track" (onFinish)="onTrackFinished($event)">

{{audio.title}} ⚬ {{audio.artist}}

 
      </audio-track>
    </ion-list>`

`cli packages: (/usr/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 6.3.0 browser 5.0.3
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v6.12.2
npm               : 4.6.1 
OS                : Linux 4.13

Environment Variables:

ANDROID_HOME : /home/clifford/Android/Sdk

`