Hello, everyone:
I want to use the angular framework in the rendering thread of electron, but I don’t want to package the code with webpack, because the rendering thread of electron also supports commonJS syntax, so I want to only convert Typescript to commonJS without packaging, and then directly in require the corresponding file in index.html. The following is my implementation process
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 to compile these three filestsc ./main.ts ./app/app.component.ts ./app/app.module.tsThe corresponding js file is now generated, and the directory structure is as follows: 
index.htmlrequire('./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>Start electron program
So far the program looks normal and meets my purpose, but when I change the content in the input box, a problem occurs, the in the h1 tag below {{name}}The expression does not change with the value in the input box, which means that data binding has no effect.
Next, in order to explore the cause of the problem, I packaged the three js files generated by tsc before using webpack
webpack ./main.js main.out.jsReplace the require statement in index.html with require('./main.out'), and run the program again
Now modify the content in the input and the data binding will take effect! ! !
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Change
import 'zone.js'in main.ts toimport 'zone.js/dist/zone.js'The reason should be clear if you look at the package.json of zone.js
I’m not very familiar with electron, but I think your problem is about import.
First of all, the working principle of webpack is to package all js. For example, if you quote
@angular/coreinnode_modules, then webpack will know that it will find it in node_modules and package it into the specified folder (such as in your app folder), so it is normal to reference it after using webpack. That’s the problem. Will electron go tonode_modulesto find a path that does not begin with./?