问题描述
我使用了 electron-forge webpack-typescript 模板来生成电子项目。
默认情况下，它会按照 index.html 中的 entryPoints 中的配置加载 package.json
...
"plugins": [
[
"@electron-forge/plugin-webpack",{
"mainConfig": "./webpack.main.config.js","renderer": {
"config": "./webpack.renderer.config.js","entryPoints": [
{
"name": "main_window","html": "./src/index.html",// <-- HERE
"js": "./src/renderer.ts",}
]
}
}
]
]
...
我想加载 angular url http://localhost:4200 作为入口点。
当我更改为 "html": "http://localhost:4200", 时，它不起作用。
我试图从 package.json 中删除该行并在 index.ts 中硬编码了网址
...
// and load the index.html of the app.
// mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
mainWindow.loadURL("http://localhost:4200");
...
这也不起作用。如何将条目设置为 url 而不是静态 HTML 文件？
解决方法
只需通过重定向将入口点设为空白 html
<html><head>
<meta http-equiv="refresh" content="2;url=http://example.com" />
<title>Page Moved</title>
</head><body>
<a href="http://www.example.com">continue</a></body>
</html>
这样做的好处是，您甚至可以添加小的 javascript 来首先检查目标是否可用，可选择显示错误消息等，如果由于某种原因目标端口对应用程序等不可用，或者在应用程序之前显示简单的 splahh打开
,简短的回答是，electron-forge webpack 模板需要一个 js,ts,html 文件，如项目设置 documentation 中所述，因此您不能将服务器 URL 设置为那里的渲染器。
但是你可以做的是从你的 Electron 主进程加载你的 Angular webapp。实际上，正如我在 electron-angular-quick-start 上所做的那样，您只需检查您的配置 dev or prod for example 并选择要加载的资源 localhost:4200/index.html。
private loadRenderer(): void {
if (process.env.X_NODE_ENV === "development") {
// Dev mode,take advantage of the live reload by loading local URL
this.window.loadURL(`http://localhost:4200`);
} else {
// Else mode,we simply load angular bundle
const indexPath = url.format({
pathname: path.join(__dirname,`../renderer/angular_window/index.html`),protocol: "file:",slashes: true,});
this.window.loadURL(indexPath);
}
}
如果您仍然对使用 Electron 和 Angular 构建应用程序感兴趣，我建议您查看一下 starter 的工作原理。也可以在 Github 上发布任何问题或提交问题。