Bonjour à tous :
Je souhaite utiliser le framework angulaire dans le fil de rendu d'Electron, mais je ne veux pas empaqueter le code avec webpack, car le fil de rendu d'Electron prend également en charge la syntaxe commonJS, je souhaite donc convertir uniquement Typescript en commonJS sans packaging , puis utilisez-le directement dans index et nécessitez le fichier correspondant en html. Voici mon processus de mise en œuvre
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 pour compiler ces trois fichierstsc ./main.ts ./app/app.component.ts ./app/app.module.tsLe fichier js correspondant est maintenant généré, et la structure des répertoires est la suivante : 
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>Démarrez le programme électronique
Jusqu'à présent, le programme semble normal et répond à mon objectif, mais lorsque je modifie le contenu dans la zone de saisie, un problème se produit. L'expression h1标签里面的{{name}} suivante ne change pas avec la valeur dans la zone de saisie, c'est-à-dire que la liaison de données n'a pas. effet.
Ensuite, afin d'explorer la cause du problème, j'ai empaqueté les trois tsc生成的3个js文件使用webpack fichiers générés auparavant
webpack
webpack ./main.js main.out.jsindex.html中的require语句换成require('./main.out')Will et exécutez à nouveau le programme
Modifiez maintenant le contenu de l'entrée et la liaison de données prendra effet ! ! !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Si vous souhaitez changer
import 'zone.js'改成import 'zone.js/dist/zone.js'dans main.ts, vous devriez connaître la raison en regardant le package.json de zone.js
Je ne connais pas très bien l'électron, mais je pense que votre problème concerne l'importation.
Tout d'abord, le principe de fonctionnement de webpack est de conditionner tous les js. Par exemple, pouvez-vous le trouver en citant
node_modules里面的@angular/core, 那webpack知道会去node_modules里面去找到他并打包到指定的文件夹里面去(比如你的app文件夹里面),所以使用webpack后引用是正常的。 那问题就在这里了, electron对于非./开头的路径会去node_modules?