晚上好,

Create Project
使用angular-cli开始新项目ng new electron-ng2-cli --style=scss

安装Electron 和electron-builder

Edit package.json
Make the following additions...
"main": "main.js"

"build":
{
  "appId": "com.electrontest.testapp",
  "mac": {
    "category": "your.app.category.type"
  }
}

并将以下内容添加到scripts...

"pack": "build --dir",
"dist": "build",
"electron": "electron main.js",
"postinstall": "install-app-deps"

Create main.js
我刚刚复制了electron quick start的代码.我所做的唯一更改是将位置index.html设置为/dist/index.html

Amend base
index.html中,将<base="/">改为<base="./">

Pack code
ng build.这将所有打包的代码放入/dist

Test Run
npm run electron.这个很好用.一个Electron 应用程序启动了,我看到里面运行着有棱角的东西.

Create App For Distribution
运行npm run pack创建打包应用程序.包装似乎还行——我收到了一个关于丢失图标的警告,以及一个关于我的代码未签名的警告,但我猜它们不应该是致命的


So, can anyone explain what is different between the packaged app that fails and the one that runs ok when I use npm run electron?

我能做些什么来解决这个问题并让应用程序正常运行?

谢谢你坚持到最后.这比我想要的要长,但我希望我已经解释清楚了.如果你能提供帮助或给出任何建议,那将是很棒的-许多好的共鸣会在你的总体方向上被认为是:)

干杯

推荐答案

这需要很多try 和错误,但我做到了这一点.这里有很多我不完全理解的地方,很多可能是毫无意义的或不好的练习,可能会在下一步失败,但如果你和我一样,只是想克服第一个困难,那么也许我发现了一些东西可以帮助你.

我在electron-builder生成的app.asar文件中找到了问题.它没有包含dist文件夹中的Bundle 代码,而是包含了所有项目代码(*.ts *.scss等).问题只是打包功能打包了错误的东西
把正确的源代码放到最终的应用程序中的步骤很简单,但我的天哪,他们并没有半途而废!从我在第一个问题中停下来的地方开始,我做了以下几点...

Remember that my project structure is the default one set up by angular-cli

Electron specific files
我把main.js改成了src,并把它的名字改成了electron-main.js,只是为了不让它和main.ts混淆.我还把它引用的路径改回了/index.html
接下来,我还在src中创建了一个新的应用程序级别package.json,并为其提供了以下内容:

 {
  "name": "application-name",
  "description": "CLI app",
  "author": "Me me me",
  "version": "0.0.1",
  "main": "electron-main.js"
}

angular-cli.json
我把outDir改为build纯粹是因为Electron 似乎默认输出为dist,我想在这个阶段进行一些分离.然后我把package.jsonelectron-main.js加到assets数组中.

Main package.json
我移除了"main":"main.js",因为这里显然不再需要它.在scripts中,我将test命令更改为electron build,将其指向绑定代码所在的build文件夹
最后,我转到build字段,添加了以下内容:

"directories": {
  "buildResources": "build",
  "app": "build"
}

现在看来很明显.这只是告诉编译器在哪里查找将构成最终应用程序的assets资源 .它默认为工作目录,这是我的问题.

使用这个设置,我现在可以运行ng build将我的项目与electron-main.jspackage.json一起打包到build文件夹中
完成后,我可以运行npm run electron快速启动测试应用程序,或运行npm run pack构建可以从Finder启动的应用程序.

砰的一声.任务完成了.十分钟后我会带着另一个烦人的问题回来.这些天我真的很喜欢这位开发人员:)

Angular相关问答推荐

Angular中的Bootstrap carousel动态属性

我们应该在Angular 从14升级到15的过程中也升级茉莉花和业力相关的依赖吗?

未触发HTTP拦截器

首期日历发行

Angular 如何渲染ngFor?

具有多个输入的Angular struct 指令在第一次加载构件时没有值

我应该对我想要在我的Angular 17+组件中显示的任何变量使用信号吗?

如何在AngularJs中剪断细绳

如何让 ag-Grid 事件读取私有方法?

Angular 路由中的模块构建失败

如何在 Angular 中创建通用的可重用组件

将环境变量传递给Angular 库

Angular 5 国际化

Angular Material 模态对话框周围的空白

Angular 2 中的 $implicit 是什么?

@angular/platform-b​​rowser 与 @angular/platform-b​​rowser-dynamic

*ngIf 带有多个异步管道变量

交替行 colored颜色 angular material表

如何在 Angular 2 中跟踪路由?

Angular CLI 为已经存在的组件创建 .spec 文件