模块在 angular 模块中没有导出成员错误

Question

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

upload.component.html 没有错误。

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

<button mat-raised-button (click)="openUploadDialog()">Upload</button>

upload.component.ts 2 个错误 - 导入上传和对话框组件

import { Component } from '@angular/core'
import { MatDialog } from '@angular/material'
import { DialogComponent } from './dialog/dialog.component'
import { UploadService } from './upload.service'

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css'],
})
class UploadComponent {
  constructor(public dialog: MatDialog, public uploadService: UploadService) {}

  public openUploadDialog() {
    let dialogRef = this.dialog.open(DialogComponent, {
      width: '50%',
      height: '50%',
    })
  }
}

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

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

app.module.ts导入上传组件出错

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

我的 DialogComponent、UploadService 和 UploadComponent 出现错误 "Module has no exported member"。

我省略了对话框组件的代码，因为它很长，我认为问题的原因和上传组件是一样的。

非常卡住 - 非常感谢帮助！

Answer 1

您的类应该使用 export 关键字导出。例如：

export class UploadComponent {
   ...
}

UploadService 也需要这样做。否则模块将无法导入。

Answer 2

确保名称匹配。

在您的 service.ts 文件中

export class XyzService {

应该与 services.module.ts 文件中的完全匹配

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

模块在 angular 模块中没有导出成员错误

Module has no exported member error in angular module

typescript

angular-module

angular