我正在尝试将电子添加到现有的角度项目中。
我像新应用程序一样添加,我认为我配置正确,但是当我运行我的电子应用程序时,屏幕上没有显示任何内容。
这是main.js,我如何加载电子应用程序的index.html。
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('./src/index.html')
win.setMenu(null);
}
index.html=>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing</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>
app.component.html
<h1 class="app-root">Welcome to sub-app1!</h1>
<router-outlet></router-outlet>
这是app-router.component.ts
const routes: Routes = [
{
path: '',
redirectTo: 'test',
pathMatch: 'full'
},
{
path: 'test',
component: TestComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
我向 app.component.ts 的构造函数添加了一个控制台,但没有打印任何内容。
当我运行这个电子子应用程序时,屏幕上没有显示任何内容。看起来像索引和app.component.ts,而不是链接。
我缺少什么?
关注this存储库。它将帮助您设置开发环境和生产环境的角度。
尝试在索引中使用“./”。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing</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>
并在 package.json 中放入 "main":"main.js";
"name": "name",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build-electron": "ng build && electron .",
"electron": "electron ."