我无法将 Angular 应用程序加载为 Electron 应用程序

Question

Angular 是开发 Electron 应用程序的推荐方法（其次是 VUE），这意味着将 Angular 应用程序加载为 Electron 没有什么异常，当然需要使用另一个 tsconfig.electron.json，并正确设置“main”入口点在package.json中
所以，我与 Electron 相关的 package.json 是

{
 "main":  "./out-tsc/electron-main/electron-main.js",
 "name": "angular-electron1",
 "scripts": {
   "build:angular": "ng build",
   "build:electron-main": "tsc -p tsconfig.electron.json",
   "build:all": "ng build && tsc -p tsconfig.electron.json",
   "electron:start": "npm run build:angular && npm run build:electron-main && npx cross-env NODE_ENV=development electron .",
   "ng": "ng",
   "start": "ng serve",
   "build": "ng build",
   "watch": "ng build --watch --configuration development",
   "test": "ng test"
 },

我的 tsconfig.electron.json 是

 {
   "extends": "./tsconfig.json", 
   "compilerOptions": {
   "module": "CommonJS", 
   "outDir": "./out-tsc/electron-main" 
 },
"include": ["src/electron/preload.ts", "src/electron-main.ts"],
"exclude": ["src/angular-main.ts", "src/**/*.spec.ts", "src/app/**/*.ts"]
}

我还向 angular.json 添加了一个属性

"options": {
   "baseHref": "/" ,

Angular 代码使用我的配置生成了文件夹 E:\Angular\AngularElectron1\AngularElectron1\dist ngular-electron1 rower 的结果，并且工作绝对完美。 Angular 应用程序看起来像文件

  favicon.ico
  index.html
  main-KPJ5OKOH.js
  polyfills-FFHMD2TL.js
  styles-5INURTSO.css

我还添加了 html 最低安全性

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

现在我想以 Electron 的形式启动这个 Angular 应用程序，这没什么不寻常的，不是吗？只是开发 Electron 应用程序的唯一推荐方法。在这种情况下，我想开始绝对基本的代码，即使没有 preload.js。所以，我只使用了这个 Electron starter src lectron-main.ts

 import { app, BrowserWindow } from 'electron';
 import * as path from 'path';
 let win: BrowserWindow | null;
 const createWindow = () => {
     win = new BrowserWindow({
         width: 800,
         height: 600,
         webPreferences: {
             nodeIntegration: true,
             contextIsolation: false, 
         },
     });
     const indexPath = path.resolve(process.cwd(), 'dist', 'angular-electron1', 'browser', 'index.html');
     win.loadFile(indexPath);
     win.on('closed', () => {
         win = null;
     });
 };
 app.on('ready', createWindow);
 app.on('window-all-closed', () => {
     if (process.platform !== 'darwin') app.quit();
 });
 app.on('activate', () => {
     if (BrowserWindow.getAllWindows().length === 0) createWindow();
 });

没什么问题，我只是想将我的 Angular 应用程序作为 Electron 窗口启动，不是吗？但我得到了绝对意想不到的结果，电子应用程序不明白我的应用程序的根在哪里

 GET file:///E:/styles-5INURTSO.css net::ERR_FILE_NOT_FOUND 
 GET file:///E:/polyfills-FFHMD2TL.js net::ERR_FILE_NOT_FOUND 
 GET file:///E:/main-KPJ5OKOH.js net::ERR_FILE_NOT_FOUND

当然，我的应用程序的根目录是 Angular root E:\Angular\AngularElectron1\AngularElectron1\dist ngular-Electron1 Rowser，为什么 Electron 认为我的应用程序的根目录是磁盘 E:\

Answer 1

GET file:///E:/main-KPJ5OKOH.js net:ERR_FILE_NOT_FOUND

这种错误通常发生在你的index.html使用脚本、样式等的绝对路径时，比如

/main-KPJ5OKOH.js

。 Electron 将在系统（或驱动器）根目录中查找该文件。当你在index.html中有

<base href="/">

时，也会出现同样的问题，它似乎是由Angular默认插入的。

你可以做的就是在你的index.html中或通过构建标志将基本URL设置为

.

或

./

之类的东西：

ng build --base-href .

另请参阅：

• Electron 中可以使用绝对路径吗？
• 使用 Electron 时应该如何配置 Angular 2 的基本 href？