Question

我正在尝试为我的Angular应用程序使用命令npm run build:ssr进行构建。应用程序构建成功完成，但是在运行命令npm run serve:ssr时出现此错误-

ReferenceError: IDBIndex is not defined

PS：根据我的发现，问题在于我使用的Firebase软件包。我将所有内容包装在支票if (isPlatformBrowser(this.platform)) {}下，但仍然出现错误。

可能是这一行导入

import { openDb, deleteDb } from 'idb';

正在引起问题，任何人都可以帮忙。我需要动态导入idb吗？

PPS：我已经检查了this的答案，但对我不起作用

Answer 1

不确定这是否对您有帮助，但我会尝试一下

import { Component, OnInit } from '@angular/core';
import { openDb } from 'idb';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  public user: IUser;
  private dbInstance;
  /**
   * idb.open(name, version, upgradeCallback)
   * To ensure database integrity, object stores can only be created and removed in the callback function in idb.open.
   * The callback receives an instance of UpgradeDB, a special object in the IDB Promised library that is used to create object stores
   */
  ngOnInit(): void {
    if (!('indexedDB' in window)) {
      console.log('This browser doesn\'t support IndexedDB');
      return;
    }

    this.dbInstance = openDb('demo-indexdb', 1, (upgradeDb) => {
      console.log('making a new object store');

      if (!upgradeDb.objectStoreNames.contains('people')) {
        upgradeDb.createObjectStore('people', {keyPath: 'id', autoIncrement: true});
      }
    });
  }

  saveData() {
    this.dbInstance.then((db) => {
      const tx = db.transaction('people', 'readwrite');
      const store = tx.objectStore('people');
      const user: IUser = {
        name: 'Admin',
        email: 'admin@gmail.com',
        description: 'admin of HR department',
        created: new Date()
      };
      store.add(user);
      return tx.complete;
    }).then(() => {
      console.log('added item to the store');
    });
  }

  async getData() {
    const db = await this.dbInstance;
    return db.transaction('people').objectStore('people').get(1).then(val => this.user = val);
  }

  async updateData(key: any) {
    const db = await this.dbInstance;
    const tx = db.transaction('people', 'readwrite');
    const user = {
      id: key,
      name: 'Admin1',
      email: 'admin1@gmail.com',
      description: 'admin1 of HR department',
      created: new Date().getTime()
    };
    tx.objectStore('people').put(user);
    return tx.complete;
  }

  getAll() {
    this.dbInstance.then((db) => {
      const tx = db.transaction('people', 'readonly');
      const store = tx.objectStore('people');
      return store.getAll();
    }).then((items) => {
      console.log('Items by name:', items);
    });
  }

  async delete(key: any) {
    const db = await this.dbInstance;
    const tx = db.transaction('people', 'readwrite');
    tx.objectStore('people').delete(key);
    return tx.complete;
  }
}

ReferenceError：未定义IDBIndex Angular SSR

1 个答案: