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

Module has no exported member error in angular module

提问by JohnD91

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

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

upload.component.htmlNo errors.

upload.component.html没有错误。

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

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

upload.component.ts2 errors - importing the upload and dialog components

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

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.ts3 errors, importing the DialogComponent, upload service, and upload component

upload.module.ts3个错误，导入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.tsno errors

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.tserror importing upload component

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

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

我的 DialogComponent、UploadService 和 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!

非常卡 - 非常感谢帮助！

采纳答案by Nicholas K

Your classes should be exportedusing the exportkeyword. For eg:

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

export class UploadComponent {
   ...
}

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

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