Cloud Stack Ninja

I am making a simple program to upload images and files to firebase cloud. I am still somewhat a novice at web-apps, so I don't understand what the error is caused by. When I save, there are no errors in code. However when I compile it, the page doesn't load and it gives me one error in console:

core.js:24134 Uncaught TypeError: Cannot read property 'id' of undefined

at registerNgModuleType (core.js:24134)

at core.js:24145

at Array.forEach ()

at registerNgModuleType (core.js:24145)

at new NgModuleFactory$1 (core.js:24242)

at compileNgModuleFactory__POST_R3__ (core.js:27786)

at PlatformRef.bootstrapModule (core.js:28024)

at Module../src/main.ts (main.ts:11)

at webpack_require (bootstrap:84)

at Object.0 (main.ts:12)

I am not good at debugging this stuff, so all help is appreciated.


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



Read more here: https://stackoverflow.com/questions/64407076/uncaught-typeerror-cannot-read-property-id-of-undefined-when-making-a-program

Content Attribution

This content was originally published by CorneliusTheFirst at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: