Блог

Я создаю простую программу для загрузки изображений и файлов в firebase cloud. Я все еще новичок в веб-приложениях, поэтому я не понимаю, чем вызвана ошибка. При сохранении ошибок в коде нет. Однако, когда я его компилирую, страница не загружается и выдает мне одну ошибку в консоли:

core.js:24134 Ошибка Uncaught TypeError: не удается прочитать свойство ‘id’ undefined

в 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)

в модуле../src/main.ts (main.ts:11)

в webpack_require (bootstrap: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 {}