How to upload image to php server from angular2 using PrimeNg?

Question

my app.component.ts code

import { Http, Response } from '@angular/http';
//import the do function to be used with the http library.
import "rxjs/add/operator/do";
import {FileUploadModule} from 'primeng/primeng';
//import the map function to be used with the http library
import "rxjs/add/operator/map";
import {AccordionModule} from 'primeng/primeng';      
import {MenuItem} from 'primeng/primeng';            //api
@Component({
  selector: 'my-app',
  template:  '<p-fileUpload name="myfile[]" url="./upload.php"> </p-fileUpload>'  ,
})
export class AppComponent   {
 name = 'Angular';
}

---

my app.module.ts code

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http' import { AppComponent } from './app.component'; import { FormSubmitionComponent } from "./components/form.component"; import {FormsModule} from "@angular/forms" import {AccordionModule} from 'primeng/primeng'; import {MenuItem,FileUploadModule} from 'primeng/primeng'; @NgModule({<br> imports: [ BrowserModule,FormsModule ,HttpModule,FileUploadModule], declarations: [ AppComponent ,FormSubmitionComponent], bootstrap: [ AppComponent ] }) export class AppModule { } 

---

code from https://www.primefaces.org/primeng/#/fileupload when i run it showing

 : XHR error (404 Not Found) loading http://localhost:3006/primeng/primeng <br> Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3006/primeng/primeng Error: XHR error (404 Not Found) loading http://localhost:3006/primeng/primeng at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3006/node_modules/zone.js/dist/zone.js:1056:39) at ZoneDelegate.invokeTask (http://localhost:3006/node_modules/zone.js/dist/zone.js:424:31) at Zone.runTask (http://localhost:3006/node_modules/zone.js/dist/zone.js:191:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3006/node_modules/zone.js/dist/zone.js:486:38) Error loading http://localhost:3006/primeng/primeng as "primeng/primeng" from http://localhost:3006/app/app.module.js at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3006/node_modules/zone.js/dist/zone.js:1056:39) at ZoneDelegate.invokeTask (http://localhost:3006/node_modules/zone.js/dist/zone.js:424:31) at Zone.runTask (http://localhost:3006/node_modules/zone.js/dist/zone.js:191:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3006/node_modules/zone.js/dist/zone.js:486:38) Error loading http://localhost:3006/primeng/primeng as "primeng/primeng" from http://localhost:3006/app/app.module.js 

Answer 1

You need to update your module too :

import {FileUploadModule} from 'primeng/primeng';

@Module({
    // ...
    imports: [FileUploadModule]
})