使用Electron-Forge+Angular2模板时，独立HTML组件模板编译失败

嘿，我之前也踩过类似的坑！那个Couldn't set selectedTextBackgroundColor from default ()其实是Electron的一个无关痛痒的警告，真正导致Electron跑不起来的问题，大概率是Angular的模板路径配置或者Electron的打包逻辑没跟上，咱们一步步来搞定：

1. 先把模板路径的坑填上 #

首先确认你的app.component.html确实和app.component.ts在同一个目录里，然后把templateUrl的相对路径改成项目根目录出发的绝对路径——因为Electron加载本地文件时，相对路径的解析逻辑和浏览器不一样，很容易跑偏：

// app.component.ts 里的组件配置
@Component({
  selector: 'app-root',
  // 换成你实际的绝对路径，比如你的app目录在src下就这么写
  templateUrl: '/src/app/app.component.html'
})

2. 确保Angular打包时带上模板文件 #

Electron-Forge默认的打包逻辑可能没把你的独立HTML模板纳入打包范围，得去angular.json里配置一下：
找到projects -> 你的项目名称 -> architect -> build -> options -> assets，把模板所在的目录加进去，确保构建时模板文件会被复制到dist目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/app/*.html" // 新增这行，让Angular打包时带上所有app目录下的HTML模板
]

3. 检查Electron主进程的加载路径 #

打开主进程的main.js（或者main.ts），确认loadFile指向的是Angular编译后的index.html，路径一定要对应上：

// main.js 里的窗口加载代码
mainWindow.loadFile('dist/你的项目名/index.html');
// 比如你的项目叫my-electron-angular，那就是dist/my-electron-angular/index.html

4. 清缓存重新构建，解决玄学问题 #

有时候旧缓存会搞出奇怪的bug，执行下面的命令彻底清理后重新来：

# 清除Angular的构建缓存
ng clean
# 重新构建Angular项目
ng build
# 启动Electron
electron-forge start

对了，那个selectedTextBackgroundColor的警告是老版本Electron的一个小bug，如果你嫌看着烦，把Electron升级到稳定版就能解决，但它本身不会导致Electron无法运行，所以重点还是放在前面的路径和配置上。

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