各位好：
我想在electron的渲染線程中使用angular框架，但是不想把程式碼使用webpack打包，因為electron的渲染線程中也同樣支援commonJS語法，所以我想只把Typescript轉換為commonJS不打包，然後直接在index.html中require對應的文件。下面是我的實作過程
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裡面的內容，資料綁定生效了！ ！ ！
欧阳克2017-06-14 10:55:29
把main.ts裡的import 'zone.js'改成import 'zone.js/dist/zone.js'
原因的話，你看看zone.js的package.json應該就清楚了
阿神2017-06-14 10:55:29
我對electron不太熟, 但你的問題我覺得應該是在import的問題。
首先webpack的工作原理就是把所有的js打包起來,比如你引用node_modules裡面的@angular/core, 那webpack知道會去node_modules裡面去找到他並打包到指定的文件夾裡面去(比如你的app資料夾裡面),所以使用webpack後引用是正常的。 那問題就在這裡了, electron對於非./開頭的路徑會去node_modules找到它嗎？
