Angular 模块在角度模块中没有导出成员错误

Angular 模块在角度模块中没有导出成员错误,angular,typescript,angular-module,Angular,Typescript,Angular Module,我想创建一个功能模块来处理前端的上传 upload.component.html 没有错误 <input type="file" #file style="display: none" (change)="onFilesAdded()" multiple /> <button mat-raised-button (click)="openUploadDialog()">Upload</button> upload.module.ts 3

我想创建一个功能模块来处理前端的上传

upload.component.html 没有错误

<input
  type="file"
  #file
  style="display: none"
  (change)="onFilesAdded()"
  multiple
/>

<button mat-raised-button (click)="openUploadDialog()">Upload</button>
upload.module.ts 3错误,导入DialogComponent、上载服务和上载组件

import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { UploadComponent } from './upload.component'
import {
  MatButtonModule,
  MatDialogModule,
  MatListModule,
  MatProgressBarModule,
} from '@angular/material'
import { DialogComponent } from './dialog/dialog.component'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { FlexLayoutModule } from '@angular/flex-layout'
import { UploadService } from './upload.service'
import { HttpClientModule } from '@angular/common/http'
import { from } from 'rxjs';

@NgModule({
  imports: [
    CommonModule,
    MatButtonModule,
    MatDialogModule,
    MatListModule,
    FlexLayoutModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatProgressBarModule,
  ],
  declarations: [UploadComponent, DialogComponent],
  exports: [UploadComponent],
  entryComponents: [DialogComponent], // Add the DialogComponent as entry component
  providers: [UploadService],
})
export class UploadModule {}  
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';
import { NavbarService } from './navbar/navbar.service';
import { UploadComponent } from './upload/upload.component';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    WelcomeComponent,
    PagenotfoundComponent,
    UploadComponent

  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [NavbarService],
  bootstrap: [AppComponent]
})
export class AppModule { }
upload.service.ts没有错误

import { Injectable } from '@angular/core'
import {
  HttpClient,
  HttpRequest,
  HttpEventType,
  HttpResponse,
} from '@angular/common/http'
import { Subject } from 'rxjs/Subject'
import { Observable } from 'rxjs/Observable'

const url = 'http://localhost:8000/upload'

@Injectable()
class UploadService {
  constructor(private http: HttpClient) {}

  public upload(files: Set<File>):
  { [key: string]: { progress: Observable<number> } } {

  // this will be the our resulting map
  const status: { [key: string]: { progress: Observable<number> } } = {};

  files.forEach(file => {
    // create a new multipart-form for every file
    const formData: FormData = new FormData();
    formData.append('file', file, file.name);

    // create a http-post request and pass the form
    // tell it to report the upload progress
    const req = new HttpRequest('POST', url, formData, {
      reportProgress: true
    });

    // create a new progress-subject for every file
    const progress = new Subject<number>();

    // send the http-request and subscribe for progress-updates
    this.http.request(req).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {

        // calculate the progress percentage
        const percentDone = Math.round(100 * event.loaded / event.total);

        // pass the percentage into the progress-stream
        progress.next(percentDone);
      } else if (event instanceof HttpResponse) {

        // Close the progress-stream if we get an answer form the API
        // The upload is complete
        progress.complete();
      }
    });

    // Save every progress-observable in a map of all observables
    status[file.name] = {
      progress: progress.asObservable()
    };
  });

  // return the map of progress.observables
  return status;
}}
我的DialogComponent、UploadService和UploadComponent出现错误“模块没有导出成员”

我省略了对话框组件的代码,因为它很长,我认为问题的原因是这个,上传组件也是一样的

非常卡住-非常感谢您的帮助

应该使用
export
关键字导出类。例如:

export class UploadComponent {
   ...
}

对于
上传服务
也需要这样做。否则模块将无法导入它。

请确保名称匹配

在您的service.ts文件中

export class XyzService {
应该与services.module.ts文件中的内容完全匹配

import { XyzService } from './yourservicename.service'
@NgModule({
    imports: [
        
    ],
    declarations: [],
    providers: [
     XyzService
        ]
import { XyzService } from './yourservicename.service'
@NgModule({
    imports: [
        
    ],
    declarations: [],
    providers: [
     XyzService
        ]