各位好：

我想在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: '
   Hello {{name}}
   '
   })
   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文件，目录结构如下：

接着在index.html中require('./main')

  
  
  
  


  ok...

启动electron程序

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

接下来...

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

webpack ./main.js main.out.js

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

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

有谁知道原因么？知道的话请告诉我，万分感谢！！！