Uncaught TypeError：制作程序将图像上传到firebase时，无法读取未定义的属性“ id”

编程问答 2022-08-10

问题描述

我正在制作一个简单的程序，将图像和文件上传到Firebase云。我仍然是Web应用程序的新手，所以我不明白错误是由什么引起的。保存时，代码中没有错误。但是，当我编译它时，页面无法加载，并且在控制台中给了我一个错误：

core.js：24134未捕获的TypeError：无法读取未定义的属性'id'

在registerNgModuleType（core.js：24134）

在core.js：24145

在Array.forEach（）

在registerNgModuleType（core.js：24145）

在新的NgModuleFactory $ 1（core.js：24242）

在compileNgModuleFactory__POST_R3__（core.js：27786）

在PlatformRef.bootstrapModule（core.js：28024）

在Module ../ src / main.ts（main.ts：11）

位于 webpack_require （引导程序：84）

在Object.0（main.ts：12）

我不擅长调试这些东西，因此感谢所有帮助。


    //HTML: 
    
    <div class="choose_file">
         <span><ion-icon name="cloud-upload-outline"></ion-icon>Upload</span>
         <input name="Select File" type="file" (change)='uploadFile($event)'/>
    </div>
    
    //Typescript:
    
    import { Component } from '@angular/core';
    import { AngularFireStorage } from '@angular/fire/storage';
    
    @Component({
      selector: 'app-tab1',templateUrl: 'tab1.page.html',styleUrls: ['tab1.page.scss']
    })
    export class Tab1Page {
    
      constructor( private storage: AngularFireStorage) {}
    
        uploadFile(event) {
          const file = event.target.files[0];
          var filePath = "test-image";
    
          const fileRef = this.storage.ref(filePath);
          var task = fileRef.put(file);
        }
      }
    
    //App Routing Module TS:
    
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { environment } from 'src/environments/environment';
    import { RouteReuseStrategy } from '@angular/router';
    
    import { IonicModule,IonicRouteStrategy } from '@ionic/angular';
    import { SplashScreen } from '@ionic-native/splash-screen/ngx';
    import { StatusBar } from '@ionic-native/status-bar/ngx';
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    
    import { AngularFireModule } from '@angular/fire';
    import { AngularFireAuthModule } from '@angular/fire/auth';
    import { AngularFirestoreModule } from '@angular/fire/firestore';
    import { AngularFireStorage } from '@angular/fire/storage';
    import {HttpClientModule} from "@angular/common/http";
    
    @NgModule({
      declarations: [AppComponent],entryComponents: [],imports: [BrowserModule,IonicModule.forRoot(),AppRoutingModule,AngularFireModule.initializeApp(environment.firebaseConfig),AngularFireAuthModule,AngularFirestoreModule,HttpClientModule,AngularFireStorage
      ],providers: [
        StatusBar,SplashScreen,{ provide: RouteReuseStrategy,useClass: IonicRouteStrategy },],bootstrap: [AppComponent]
    })
    export class AppModule {}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularfire2firebasefirebaseionic-frameworktypescripttypescript