PrimeNgを使ってangular2からPHPサーバーに画像をアップロードするには？

Question

私app.component.ts https://www.primefaces.org/primeng/#/fileupload から私が実行したとき、それは

: 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

を示すコード

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'; 
} 

---

私app.module.tsコード

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 { } 

---

コードあなたもあなたのモジュールを更新する必要があります：

import {FileUploadModule} from 'primeng/primeng'; 

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