模块在角度模块中没有导出成员错误 [英] Module has no exported member error in angular module

问题描述

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

I wanted to create a feature module which will handle the front end for an upload.

upload.component.html没有错误.

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

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

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

upload.component.ts 2 errors - importing the upload and dialog components

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、上传服务、上传组件

upload.module.ts 3 errors, importing the DialogComponent, upload service, and upload component

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 出现错误模块没有导出成员".

I've got the error "Module has no exported member" for my DialogComponent, UploadService, and UploadComponent.

我已将对话框组件的代码省略了，因为它很长，我认为问题的原因和上传组件是相同的.

I've left the code for the dialog component out because it's very long and I presume the cause of the problem for that and the upload component will be the same.

非常困难 - 非常感谢帮助！

Very stuck - help much appreciated!

推荐答案

您的类应该使用 export 关键字导出.例如:

Your classes should be exported using the export keyword. For eg:

export class UploadComponent {
   ...
}

这也需要为 UploadService 完成.否则模块将无法导入.

This needs to be done for the UploadService as well. The module will not be able to import it otherwise.

这篇关于模块在角度模块中没有导出成员错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！