龙空技术网

如何在Angular中使用cli集成NW.js,生成桌面应用

Foundo 72

前言:

眼前姐妹们对“js移动窗口实现”大约比较珍视,姐妹们都需要剖析一些“js移动窗口实现”的相关资讯。那么小编在网上搜集了一些关于“js移动窗口实现””的相关资讯,希望姐妹们能喜欢,兄弟们快快来了解一下吧!

如何在Angular中使用cli集成NW.js

简介以网络最流行的技术编写原生应用程序的新方法基于HTML5, CSS3, JS and WebGL而编写完全支持nodejs所有api及第三方模块可以使用DOM直接调用nodejs模块容易打包和分发支持运行环境包括32位和64位的Window、Linux和Mac OS

进入Angular工程目录按照循序执行如下操作

添加NW.js

其中需要添加concurrently用于执行多个命令

npm install --save-dev nw@sdk concurrently
修改scripts部分

打开package.json,添加如下配置,保留原来start,添加nw命名空间

"start:nw": "concurrently \"ng serve --port=4200\" \"nw .\""
添加运行环境配置

打开package.json,添加如下配置

"main": "","node-remote": "","window": { "width": 960, "height": 600, "min_width": 700, "min_height": 500, "icon": "your-app-logo.png"},
Angular与Nodejs冲突

Angular在加载时添加了一个global对象。由于Node.js使用global对象的方式与浏览器使用窗口对象的方式类似,因此nw.js将其公开以便于访问。我们需要将Node.js的global对象移动到其他地方,这样Angular可以自私地使用该名称空间。

修改index.html,在<head></head>中添加这段脚本

<script> window.nw_global = window.global; window.global = undefined;</script>
NW.js全局声明

如果在Angular项目中需要调用NW.js操作需要声明NW.js存在,修改src/polyfill.ts。

declare global { interface Window { nw: any; }}

标签: #js移动窗口实现