未捕获的错误：模板解析错误：“p-fileUpload”不是已知元素：答案

【问题标题】：Uncaught Error: Template parse errors: 'p-fileUpload' is not a known element:未捕获的错误：模板解析错误：“p-fileUpload”不是已知元素：
【发布时间】：2018-02-12 04:49:26
【问题描述】：

sell.component.html:

   <p-fileUpload #fileInput name="fileIcon"
              url="rest/batch/file/multimedia/"></p-fileUpload>

以上是文件上传标签，我试图用它来上传带有进度条的图像。

sell.component.ts:

import { ViewChild, Component, NgModule, VERSION, OnInit } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser'
import { Router } from '@angular/router';
import { MissionService } from '../app.service';
import { Configuration } from '../app.constants';
import { FormsModule } from '@angular/forms';
import { Http, Response, RequestOptions } from '@angular/http';
import { HttpClient,HttpErrorResponse,HttpHeaders,HttpRequest} from '@angular/common/http';
import { FormGroup , FormControl  } from '@angular/forms';
import { HttpParams } from '@angular/common/http/src/params';
import { Headers } from '@angular/http';
import { FileUploadModule, FileUpload } from 'primeng/components/fileupload/fileupload';

declare var $: any;
declare var google: any;

@Component({
  selector: 'app-sell',
  templateUrl: './sell.component.html',
  styleUrls: ['./sell.component.css']
})
export class SellComponent implements OnInit {}

以上是子组件的代码，我正在尝试使用文件上传模块。

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ViewChild, Component, NgModule, VERSION } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './app.routing';
import { Ng2CloudinaryModule } from 'ng2-cloudinary';
import { InfiniteScrollModule } from 'angular2-infinite-scroll';
import { LazyLoadImageModule } from 'ng2-lazyload-image';
import { FileUploadModule } from 'ng2-file-upload';
import { AppComponent } from './app.component';
import { Configuration } from './app.constants';
import { MissionService } from './app.service';

import { HeaderComponent } from './header/header.component';
  
import { SellComponent } from './sell/sell.component';
import { UiSwitchModule } from 'ngx-ui-switch';
import { HttpClientModule } from '@angular/common/http';
//import { CookieService } from 'ngx-cookie-service';
import { FileUpload } from 'primeng/primeng';


 
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    
    SellComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'website' }),
    InfiniteScrollModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    routing,
    Ng2CloudinaryModule,
    FileUploadModule,
    LazyLoadImageModule,
    UiSwitchModule,HttpClientModule
  ],
  providers: [
    AuthGuard,
    Configuration,
    MissionService,
    HomeService,   
    ItemService,
    RegisterService,
    LoginService,
    SettingsService,
    ChangePasswordService,
    MemberProfileService,  
    TermsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

上面的代码是主模块。即app.module.ts，我在那里添加了fileupload模块

我正在尝试通过选择、上传、取消按钮在我的表单中使用带有 primeNg 文件上传的图像上传。当我尝试在我的应用程序模块中使用标签时，它显示错误，因为“P-fileupload”不是元素

【问题讨论】：

您是否将模块导入并添加为依赖项？
是的。首先，我通过 npm 下载了 "primeng": "^5.2.0"。然后，从 'primeng/primeng' 导入 { FileUpload }； Fileupload 也被添加为“imports”中的依赖项
您可以添加更多代码或创建一个工作示例吗？
完全不明白我犯了什么错误。
嘿，sowmya，正如@Aravind 建议的那样，将您的代码放在Stackblitz，重现当前状态并分享，以便其他人可以调试您的代码

标签： angular primeng angular-forms

【解决方案1】：

将应用模块中的导入更改为：

从 'primeng/fileupload' 导入 { FileUploadModule }；

【讨论】：

【解决方案2】：

在您的 app.module.ts 中，您从未完全导入 PrimeNG 文件上传。注意 FileUploadModule 是如何来自 ng2-file-upload 而不是 PrimeNG。您在顶部导入了它，但您需要将 FileUpload 添加到导入中：[ ]。

【讨论】：