Hallo zusammen:
Ich möchte das Angular-Framework im Rendering-Thread von Electron verwenden, möchte den Code jedoch nicht mit Webpack verpacken, da der Rendering-Thread von Electron auch die CommonJS-Syntax unterstützt. Daher möchte ich Typescript nur ohne Verpackung in CommonJS konvertieren Für die direkte Verwendung im Index ist die entsprechende Datei im HTML-Format erforderlich. Das Folgende ist mein Implementierungsprozess
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, um diese drei Dateien zu kompilierentsc ./main.ts ./app/app.component.ts ./app/app.module.tsDie entsprechende js-Datei wird nun generiert und die Verzeichnisstruktur ist wie folgt: 
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>Starten Sie das Elektronenprogramm
Bisher sieht das Programm normal aus und erfüllt meinen Zweck, aber wenn ich den Inhalt im Eingabefeld ändere, tritt ein Problem auf. Der folgende h1标签里面的{{name}}Ausdruck ändert sich nicht mit dem Wert im Eingabefeld, d. h. es gibt keine Datenbindung Wirkung.
Als nächstes habe ich, um die Ursache des Problems zu untersuchen, die drei tsc生成的3个js文件使用webpack zuvor generierten Dateien
webpackgepackt
webpack ./main.js main.out.jsindex.html中的require语句换成require('./main.out')Will und führt das Programm erneut aus
Ändern Sie nun den Inhalt der Eingabe und die Datenbindung wird wirksam! ! !
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
把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找到它吗？