Electron使用Anguar编写渲染线程的问题

发布于 2022-09-05 01:29:51 字数 2890 浏览 14 评论 0

各位好:

我想在electron的渲染线程中使用angular框架,但是不想把代码使用webpack打包,因为electron的渲染线程中也同样支持commonJS语法,所以我想只把Typescript转化为commonJS不打包,然后直接在index.html中require相应的文件。下面是我的实现过程

首先我创建了3个ts文件

  1. app.component.ts

    import { Component } from '@angular/core'
    @Component({
      selector: 'my-app' ,
      template: '<input type="text" [(ngModel)]="name" /><h1>Hello {{name}}</h1>'
    })
    export class AppComponent { name = 'Aungtcs' }
  2. app.module.ts

    import { NgModule } from '@angular/core'
    import { FormsModule } from '@angular/forms'
    import { BrowserModule } from '@angular/platform-browser'
    import { AppComponent } from './app.component'
    @NgModule ({
      imports: [
        FormsModule ,
        BrowserModule
      ] ,
      declarations: [
        AppComponent
      ] ,
      bootstrap: [
        AppComponent
      ] ,
      exports: [
        AppComponent
      ]
    })
    export class AppModel {  }
  3. main.ts

    import 'core-js/es7'
    import 'zone.js'
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
    import { AppModel } from './app/app.module'
    platformBrowserDynamic().bootstrapModule(AppModel)

然后使用tsc编译这三个文件

tsc ./main.ts ./app/app.component.ts ./app/app.module.ts

现在生成了对应的js文件,目录结构如下:
clipboard.png

接着在index.htmlrequire('./main')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <my-app>ok...</my-app>
</body>
<script type="text/javascript">
  require('./main')
</script>
</html>

启动electron程序

clipboard.png

到目前为止程序看起来都是正常的,也符合我的目的,但是当我更改输入框里面的内容的时候,问题出现了,下面h1标签里面的{{name}}表达式并不随着输入框里面的值变化,就是说数据绑定没有效果。

接下来...

接下来为了探索问题原因,我把之前tsc生成的3个js文件使用webpack进行了打包

webpack ./main.js main.out.js

index.html中的require语句换成require('./main.out'),再次运行程序

clipboard.png

现在再修改input里面的内容,数据绑定生效了!!!

有谁知道原因么?知道的话请告诉我,万分感谢!!!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

愛上了 2022-09-12 01:29:51

把main.ts里的import 'zone.js'改成import 'zone.js/dist/zone.js'
原因的话,你看看zone.js的package.json应该就清楚了

桃酥萝莉 2022-09-12 01:29:51

我对electron不太熟, 但你的问题我觉得应该是在import的问题。

首先webpack的工作原理就是把所有的js打包起来,比如你引用node_modules里面的@angular/core, 那webpack知道会去node_modules里面去找到他并打包到指定的文件夹里面去(比如你的app文件夹里面),所以使用webpack后引用是正常的。 那问题就在这里了, electron对于非./开头的路径会去node_modules找到它吗?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文