Electron使用Anguar编写渲染线程的问题
各位好:
我想在electron的渲染线程中使用angular框架,但是不想把代码使用webpack打包,因为electron的渲染线程中也同样支持commonJS语法,所以我想只把Typescript转化为commonJS不打包,然后直接在index.html中require相应的文件。下面是我的实现过程
首先我创建了3个ts文件
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' }
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 { }
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
文件,目录结构如下:
接着在index.html
中require('./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程序
到目前为止程序看起来都是正常的,也符合我的目的,但是当我更改输入框里面的内容的时候,问题出现了,下面h1
标签里面的{{name}}
表达式并不随着输入框里面的值变化,就是说数据绑定没有效果。
接下来...
接下来为了探索问题原因,我把之前tsc
生成的3个js
文件使用webpack
进行了打包
webpack ./main.js main.out.js
将index.html
中的require
语句换成require('./main.out')
,再次运行程序
现在再修改input里面的内容,数据绑定生效了!!!
有谁知道原因么?知道的话请告诉我,万分感谢!!!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
把main.ts里的
import 'zone.js'
改成import 'zone.js/dist/zone.js'
原因的话,你看看zone.js的package.json应该就清楚了
我对electron不太熟, 但你的问题我觉得应该是在import的问题。
首先webpack的工作原理就是把所有的js打包起来,比如你引用
node_modules
里面的@angular/core
, 那webpack知道会去node_modules里面去找到他并打包到指定的文件夹里面去(比如你的app文件夹里面),所以使用webpack后引用是正常的。 那问题就在这里了, electron对于非./
开头的路径会去node_modules
找到它吗?