search

Home  >  Q&A  >  body text

Problem with using Anguar to write rendering thread in Electron

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

First I created 3 ts files

  1. 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' }

  2. 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 {  }

  3. 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)

Then use tsc to compile these three files

tsc ./main.ts ./app/app.component.ts ./app/app.module.ts

The corresponding js file is now generated, and the directory structure is as follows:

Then in 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...

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.js

Replace 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! ! !

Does anyone know the reason? If you know, please tell me, thank you very much! ! !

某草草某草草2720 days ago799

reply all(2)I'll reply

  • 欧阳克

    欧阳克2017-06-14 10:55:29

    Change import 'zone.js' in main.ts to import 'zone.js/dist/zone.js'
    The reason should be clear if you look at the package.json of zone.js

    reply
    0
  • 阿神

    阿神2017-06-14 10:55:29

    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/core in node_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 to node_modules to find a path that does not begin with ./?

    reply
    0
  • Cancelreply