如何在Angular组件中访问Electron API并解决CSP安全警告问题

1. 修复Content Security Policy（CSP）安全警告 #

你收到的警告是因为渲染进程没有配置合法的CSP规则，直接在Angular项目的src/index.html的<head>标签中添加如下meta标签即可：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; media-src 'self' blob: data:;">

• 开发环境下如果用Angular JIT编译模式，需要临时给script-src加'unsafe-eval'，生产构建AOT模式可以移除，不会触发警告
• 这里额外加了media-src blob: data: 适配本地视频播放的需求

2. 修正Preload.js实现（关键错误修复） #

你当前的preload代码存在核心问题：dialog、fs都是Electron主进程模块，不能直接在preload（渲染进程上下文）中调用，必须通过IPC和主进程通信完成操作，修改后的preload.js如下：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld("electronAPI", {
  // 改成返回Promise和你定义的TS接口匹配
  loadLocalFile: (filePath) => {
    return ipcRenderer.invoke('load-local-file', filePath);
  }
});

同时你需要在Electron主进程代码中添加对应IPC监听，处理文件读取逻辑：

const { ipcMain, dialog } = require('electron');
const fs = require('fs/promises');

ipcMain.handle('load-local-file', async (event, filePath) => {
  if (!filePath) {
    // 没有传路径就弹出选择框
    const { filePaths } = await dialog.showOpenDialog({
      properties: ['openFile'],
      filters: [{ name: '视频文件', extensions: ['mp4', 'avi', 'mov'] }]
    });
    filePath = filePaths?.[0];
  }
  if (!filePath) {
    throw new Error('未选择有效文件');
  }
  // 视频文件不要用utf-8读取，直接返回Buffer供渲染层播放
  return fs.readFile(filePath);
});

3. Angular端Electron服务封装 #

首先生成专用的Electron服务，避免直接在组件中调用window对象，同时兼容非Electron环境不会报错：

第一步：生成服务 #

执行Angular CLI命令生成服务：

ng generate service services/electron

第二步：编写服务代码（src/app/services/electron.service.ts） #

import { Injectable } from '@angular/core';

export interface IElectronAPI {
  loadLocalFile: (path?: string) => Promise<Buffer>;
}

declare global {
  interface Window {
    electronAPI: IElectronAPI;
  }
}

@Injectable({ providedIn: 'root' })
export class ElectronService {
  private readonly isElectron: boolean;

  constructor() {
    // 判断当前是否运行在Electron环境中
    this.isElectron = window && window.electronAPI !== undefined;
  }

  /**
   * 加载本地视频文件
   * @param filePath 可选文件路径，不传则弹出选择框
   */
  async loadLocalFile(filePath?: string): Promise<Blob | null> {
    if (!this.isElectron) {
      console.warn('非Electron环境无法调用该API');
      return null;
    }
    const buffer = await window.electronAPI.loadLocalFile(filePath);
    // 将Buffer转成Blob供视频组件播放
    return new Blob([buffer], { type: 'video/mp4' });
  }
}

4. 组件中调用示例 #

你可以直接在任意组件中注入该服务调用API，不需要额外配置：

import { Component } from '@angular/core';
import { ElectronService } from './services/electron.service';

@Component({
  selector: 'app-root',
  template: `<video #videoPlayer controls *ngIf="videoUrl"></video>`
})
export class AppComponent {
  videoUrl?: string;

  constructor(private electronService: ElectronService) {}

  async playLocalVideo() {
    const videoBlob = await this.electronService.loadLocalFile('/path/to/my/video');
    if (videoBlob) {
      // 生成 blob URL 给video标签播放
      this.videoUrl = URL.createObjectURL(videoBlob);
    }
  }
}

该实现不会出现导入项被移除的报错，所有类型校验完整，同时兼容浏览器开发和Electron生产环境。

内容的提问来源于stack exchange，提问作者GyroGoober