Hello semua:
Saya mahu menggunakan rangka kerja sudut dalam benang rendering elektron, tetapi saya tidak mahu membungkus kod dengan webpack, kerana benang rendering elektron juga menyokong sintaks commonJS, jadi saya hanya mahu menukar Typescript kepada commonJS tanpa pembungkusan , dan kemudian menggunakannya secara langsung dalam index. Berikut adalah proses pelaksanaan saya
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 { }utama.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 untuk menyusun ketiga-tiga fail initsc ./main.ts ./app/app.component.ts ./app/app.module.tsFail js yang sepadan kini dijana, dan struktur direktori adalah seperti berikut: 
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>Mulakan atur cara elektron
Setakat ini program ini kelihatan normal dan memenuhi tujuan saya, tetapi apabila saya menukar kandungan dalam kotak input, masalah berlaku h1标签里面的{{name}}Ungkapan berikut tidak berubah dengan nilai dalam kotak input, iaitu pengikatan data tidak mempunyai. kesan.
Seterusnya, untuk meneroka punca masalah, saya membungkus tiga tsc生成的3个js文件使用webpack fail yang dijana sebelum ini
webpack
webpack ./main.js main.out.jsindex.html中的require语句换成require('./main.out')Akan dan jalankan program semula
Sekarang ubah suai kandungan dalam input dan pengikatan data akan berkuat kuasa! ! !
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jika anda ingin menukar
import 'zone.js'改成import 'zone.js/dist/zone.js'dalam main.ts, anda harus tahu sebabnya dengan melihat package.json zone.js
Saya tidak begitu mahir dengan elektron, tetapi saya rasa masalah anda adalah mengenai import.
Pertama sekali, prinsip kerja webpack adalah untuk membungkus semua js Sebagai contoh, bolehkah anda mencarinya dengan memetik
node_modules里面的@angular/core, 那webpack知道会去node_modules里面去找到他并打包到指定的文件夹里面去(比如你的app文件夹里面),所以使用webpack后引用是正常的。 那问题就在这里了, electron对于非./开头的路径会去node_modules?