Base solution for your next web application
Open Closed

Error when use p-fileUpload component to my angular page #5449


User avatar
0
kwanp created

Hi i get confuse with p-fileUpload component that provide on the sample, i try to use in phonebook page to allow user to upload file but i receive the error message show:

promise): Error: Template parse errors: Can't bind to 'url' since it isn't a known property of 'p-fileUpload'.

  1. If 'p-fileUpload' is an Angular component and it has 'url' input, then verify that it is part of this module.
  2. If 'p-fileUpload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the <a href="mailto:'@NgModule.schemas">'@NgModule.schemas</a>' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the <a href="mailto:'@NgModule.schemas">'@NgModule.schemas</a>' of this component. (" name="DefaultFileUploadFileInput[]" [ERROR ->][url]="uploadUrl" accept="image/*" "): ng:///MainModule/CreatePersonModalComponent.html@34:40 'p-fileUpload' is not a known element:
  4. If 'p-fileUpload' is an Angular component, then verify that it is part of this module.
  5. If 'p-fileUpload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the <a href="mailto:'@NgModule.schemas">'@NgModule.schemas</a>' of this component to suppress this message. ("leUploadFileInput" class="control-label">Default file uploader</label> [ERROR ->]<p-fileUpload multiple="multiple" > id="DefaultFileUploadFileI"): ng:///MainModule/CreatePersonModalComponent.html@31:28 Error: Template parse errors: Can't bind to 'url' since it isn't a known property of 'p-fileUpload'.
  6. If 'p-fileUpload' is an Angular component and it has 'url' input, then verify that it is part of this module.
  7. If 'p-fileUpload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the <a href="mailto:'@NgModule.schemas">'@NgModule.schemas</a>' of this component to suppress this message.
  8. To allow any property add 'NO_ERRORS_SCHEMA' to the <a href="mailto:'@NgModule.schemas">'@NgModule.schemas</a>' of this component. (" name="DefaultFileUploadFileInput[]" [ERROR ->][url]="uploadUrl" accept="image/*" "): ng:///MainModule/CreatePersonModalComponent.html@34:40 'p-fileUpload' is not a known element:
  9. If 'p-fileUpload' is an Angular component, then verify that it is part of this module.
  10. If 'p-fileUpload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the <a href="mailto:'@NgModule.schemas">'@NgModule.schemas</a>' of this component to suppress this message. ("leUploadFileInput" class="control-label">Default file uploader</label> [ERROR ->]<p-fileUpload multiple="multiple" > id="DefaultFileUploadFileI"): ng:///MainModule/CreatePersonModalComponent.html@31:28 at syntaxError (compiler.js:215) at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696) at compiler.js:22639 at Set.forEach (<anonymous>) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639) at compiler.js:22549 at Object.then (compiler.js:206) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548) at syntaxError (compiler.js:215) at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696) at compiler.js:22639 at Set.forEach (<anonymous>) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639) at compiler.js:22549 at Object.then (compiler.js:206) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3662) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595)

i think i check all imports on the demo-ui-file-upload.component.ts what else i have to imports to my page to work

Thank you


1 Answer(s)
  • User Avatar
    0
    alper created
    Support Team

    Did you add FileUploadModule to your *.module.ts?

    import { FileUploadModule as PrimeNgFileUploadModule } from 'primeng/primeng';