Electron에서 렌더링 스레드를 작성하기 위해 Anguar를 사용할 때 발생하는 문제

Question

안녕하세요 여러분:

electron의 렌더링 스레드에서 Angle 프레임워크를 사용하고 싶지만 웹팩으로 코드를 패키징하고 싶지 않습니다. 전자의 렌더링 스레드도 commonJS 구문도 지원하기 때문에 패키징 없이 Typescript만 commonJS로 변환하고 싶습니다. , index.html에서 직접 사용하려면 해당 파일이 필요합니다. 다음은 나의 구현 과정입니다

먼저 ts 파일 3개를 만들었어요

1. app.comComponent.ts

   으아악

2. app.module.ts

   으아악

3. main.ts

   으아악

그런 다음 tsc를 사용하여 이 세 파일을 컴파일하세요

으아악

이제 해당 js 파일이 생성되었으며 디렉터리 구조는 다음과 같습니다.

다음은 index.html中require('./main')

으아악

전자 프로그램 시작

지금까지는 프로그램이 정상적으로 보이고 목적에 부합하지만 입력 상자의 내용을 변경하면 다음 h1标签里面的{{name}}식이 입력 상자의 값으로 변경되지 않습니다. 즉, 데이터 바인딩이 없습니다. 효과.

다음...

다음으로 문제의 원인을 탐색하기 위해 webpacktsc生成的3个js文件使用webpack을 사용하여 이전에 생성된

파일 3개를

패키징했습니다. 으아악 index.html中的require语句换成require('./main.out')Will

그리고 프로그램을 다시 실행

이제 입력 내용을 수정하면 데이터 바인딩이 적용됩니다! ! !

이유 아시는 분 계신가요? 아시는분 알려주시면 정말 감사하겠습니다! ! ! 🎜

Answer 1

main.ts에서 import 'zone.js'改成import 'zone.js/dist/zone.js'
를 변경하고 싶다면 zone.js의 package.json을 보면 그 이유를 알 수 있습니다

Answer 2

저는 전자에 대해 잘 모르지만 수입에 관한 문제인 것 같아요.

먼저 webpack의 작동 원리는 모든 js를 패키징하는 것입니다. 예를 들어 node_modules里面的@angular/core, 那webpack知道会去node_modules里面去找到他并打包到指定的文件夹里面去(比如你的app文件夹里面),所以使用webpack后引用是正常的。 那问题就在这里了, electron对于非./开头的路径会去node_modules를 인용하면 찾을 수 있나요?