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.

    <div class="choose_file">
         <span><ion-icon name="cloud-upload-outline"></ion-icon>Upload</span>
         <input name="Select File" type="file" (change)='uploadFile($event)'/>
    import { Component } from '@angular/core';
    import { AngularFireStorage } from '@angular/fire/storage';
      selector: 'app-tab1',
      templateUrl: '',
      styleUrls: ['']
    export class Tab1Page {
      constructor( private storage: AngularFireStorage) {}
        uploadFile(event) {
          const file =[0];
          var filePath = "test-image";
          const fileRef =;
          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";
      declarations: [AppComponent],
      entryComponents: [],
      imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, AngularFireModule.initializeApp(environment.firebaseConfig),
      providers: [
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },],
      bootstrap: [AppComponent]
    export class AppModule {}

Read more here:

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: