问关于angular-cli electron打包客户端出现的问题求解？

提问于 2019-07-09 18:48:08

回答 1关注 0查看 1K

今天在angular-cli项目里添加了electron模块，在网上找了一些方法，编写的package.json和main.js如下

package.json:

{
  "name": "net-work-analysis",
  "version": "1.0.0",
	"license": "MIT",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "elec": "ng build && electron .",
    "elec-aot": "ng build --prod && electron ."
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.0.3",
    "@angular/common": "~8.0.3",
    "@angular/compiler": "~8.0.3",
    "@angular/core": "~8.0.3",
    "@angular/forms": "~8.0.3",
    "@angular/platform-browser": "~8.0.3",
    "@angular/platform-browser-dynamic": "~8.0.3",
    "@angular/router": "~8.0.3",
    "@ng-bootstrap/ng-bootstrap": "^5.0.0-rc.1",
    "@nguniversal/express-engine": "^8.1.1",
    "bootstrap": "^4.3.1",
    "echarts": "^4.2.1",
    "nan": "^2.14.0",
    "ngx-bootstrap": "^5.0.0",
    "ngx-echarts": "^4.2.1",
    "rxjs": "~6.4.0",
    "sqlite": "^3.0.3",
    "sqlite3": "^4.0.9",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.6",
    "@angular/cli": "~8.0.6",
    "@angular/compiler-cli": "~8.0.3",
    "@angular/language-service": "~8.0.3",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "electron": "5.0.6",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

main.js:

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

let win;

function createWindow () {
	/* 创建浏览器窗口 */
	win = new BrowserWindow({width:1336,height:768});
	
	/* 加载应用的index.html */
	win.loadURL(url.format({
		pathname:path.join(__dirname,'/dist/NetWork-Analysis/index.html'),
		protocol:'file',
		slashes:true
	}));
	/* win.loadURL('http://localhost:4200'); */
	
	/* 打开开发者工具 */
	win.webContents.openDevTools();
	
	/* 当window关闭，触发事件 */
	win.on('close',() => {
		/* 取消引用的window对象，当应用为对窗口时，通常会把window放到数组里，与此同时，删除的应该是相应的元素节点*/
		 win = null;
	});
}

/* Electron 会在初始化后准备，创建窗口时调用ready，部分API会在调用ready后执行 */
app.on('ready',createWindow);

/* 当全部窗口关闭时退出(仅限windows系统) */
app.on('window-all-close',() => {
	/* 在macOS系统，除非用户使用 Cmd+Q 确定退出，否则绝大部分应用及其菜单栏会保持激活状态 */
	if(process.platform !== 'darwin'){
		app.quit();
	}
})

app.on('activate',() => {
	/* 在macOS系统，当单击dock图标并没有其他窗口打开时，通常会在应用程序中重新创建一个窗口 */
	if (win === null) {
		createWindow();
	}
})

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NetWorkAnalysis</title>
  <base href="./">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
	<app-root></app-root>
</body>
</html>

可是编译完成后，就报说加载模块脚本失败，意思就是违反了html规范，怎么解决呢？