Index.html 未链接到电子角度中的 app.component

问题描述 投票:0回答:2

我正在尝试将电子添加到现有的角度项目中。

我像新应用程序一样添加,我认为我配置正确,但是当我运行我的电子应用程序时,屏幕上没有显示任何内容。

这是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,而不是链接。

我缺少什么?

angular electron angular10
2个回答
0
投票

关注this存储库。它将帮助您设置开发环境和生产环境的角度。


0
投票

尝试在索引中使用“./”。

<!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 ."
© www.soinside.com 2019 - 2024. All rights reserved.