angular / angular-electron Goto Github PK
View Code? Open in Web Editor NEWAngular2 + Electron
Angular2 + Electron
In the interim period of this repository getting additional activity/resources, I have developed a solution of Electron with Angular (4+).
https://github.com/sean-perkins/angular-electron-seed
It's nothing significantly intricate at the moment, but it does allow you live serve your changes and see them in the Electron app. The live-reload is hacky at the moment, but something is always better than nothing.
This uses the stock CLI's build process for compiling Angular and then injects Electron's necessities into the build directory.
I've installed it using:
git clone ......
then cd to the folder and run "npm install"
Finally tried: "npm start"
And I get this error:
error TS6053: File 'typings/browser.d.ts' not found.
How can I fix that?
@angular2/[email protected] clean C:\users\ibrah\projects\angular-electron
rm -rf dist
'rm' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "clean"
npm ERR! node v4.2.4
npm ERR! npm v2.14.12
npm ERR! code ELIFECYCLE
npm ERR! @angular2/[email protected] clean: rm -rf dist
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @angular2/[email protected] clean script 'rm -rf dist'.
npm ERR! This is most likely a problem with the @angular2/electron package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! rm -rf dist
npm ERR! You can get their info via:
npm ERR! npm owner ls @angular2/electron
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\users\ibrah\projects\angular-electron\npm-debug.log
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v4.2.4
npm ERR! npm v2.14.12
npm ERR! code ELIFECYCLE
npm ERR! @angular2/[email protected] build: npm run clean && tsc
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @angular2/[email protected] build script 'npm run clean && tsc'.
npm ERR! This is most likely a problem with the @angular2/electron package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run clean && tsc
npm ERR! You can get their info via:
npm ERR! npm owner ls @angular2/electron
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\users\ibrah\projects\angular-electron\npm-debug.log
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "demo"
npm ERR! node v4.2.4
npm ERR! npm v2.14.12
npm ERR! code ELIFECYCLE
npm ERR! @angular2/[email protected] demo: npm run build && npm run build_demo && electron ./demo
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @angular2/[email protected] demo script 'npm run build && npm run build_demo && electron ./demo'.
npm ERR! This is most likely a problem with the @angular2/electron package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build && npm run build_demo && electron ./demo
npm ERR! You can get their info via:
npm ERR! npm owner ls @angular2/electron
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\users\ibrah\projects\angular-electron\npm-debug.log
PS C:\users\ibrah\projects\angular-electron> npm run demo
npm setup
will fail without typings
package.
$ npm run setup
> @angular2/[email protected] setup /Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master
> npm install --no-optional && npm run typings-install
npm WARN @angular2/[email protected] requires a peer of [email protected] but none was installed.
> @angular2/[email protected] typings-install /Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master
> typings install
sh: typings: command not found
npm ERR! Darwin 15.4.0
npm ERR! argv "/usr/local/Cellar/node/5.10.0/bin/node" "/usr/local/bin/npm" "run" "typings-install"
npm ERR! node v5.10.0
npm ERR! npm v3.8.3
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! @angular2/[email protected] typings-install: `typings install`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @angular2/[email protected] typings-install script 'typings install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the @angular2/electron package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs @angular2/electron
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls @angular2/electron
npm ERR! There is likely additional logging output above.
Installing typing with npm install typings --global
fixes the problem
$ npm run setup
> @angular2/[email protected] setup /Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master
> npm install --no-optional && npm run typings-install
npm WARN @angular2/[email protected] requires a peer of [email protected] but none was installed.
> @angular2/[email protected] typings-install /Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master
> typings install
├── es6-shim (ambient)
├── github-electron (ambient)
└── node (ambient)
Probably it should be a dependency or explained in README
Looks like there hasn't been much progress here since Angular2 moved from Beta to RC.
npm start failed with the logs below:
C:\Users\kursa\Desktop\angular-electron>npm start
@angular2/[email protected] start C:\Users\kursa\Desktop\angular-electron
npm run demo@angular2/[email protected] demo C:\Users\kursa\Desktop\angular-electron
npm run build && npm run build_demo && electron ./demo@angular2/[email protected] build C:\Users\kursa\Desktop\angular-electron
npm run clean && tsc@angular2/[email protected] clean C:\Users\kursa\Desktop\angular-electron
rimraf dist
src/platform/electron.ts(1,24): error TS2307: Cannot find module 'angular2/core'.
src/platform/electron_app.ts(1,27): error TS2307: Cannot find module 'electron'.
src/platform/electron_app.ts(4,43): error TS2307: Cannot find module 'angular2/src/facade/lang'.
src/platform/electron_app.ts(5,32): error TS2307: Cannot find module 'angular2/src/platform/server/parse5_adapter'.
src/platform/electron_app.ts(6,73): error TS2307: Cannot find module 'angular2/core'.
src/platform/electron_app.ts(7,26): error TS2307: Cannot find module 'angular2/src/web_workers/shared/message_bus'.
src/platform/electron_app.ts(8,34): error TS2307: Cannot find module 'angular2/compiler'.
src/platform/electron_app.ts(17,20): error TS2503: Cannot find namespace 'Electron'.
src/platform/electron_app.ts(28,14): error TS2304: Cannot find name 'Promise'.
src/platform/electron_app.ts(35,14): error TS2304: Cannot find name 'Promise'.
src/platform/electron_app.ts(45,36): error TS2304: Cannot find name 'process'.
src/platform/electron_app_common.ts(1,19): error TS2307: Cannot find module 'angular2/src/compiler/xhr'.
src/platform/electron_app_common.ts(2,32): error TS2307: Cannot find module 'angular2/src/web_workers/worker/xhr_impl'.
src/platform/electron_app_common.ts(3,37): error TS2307: Cannot find module 'angular2/src/web_workers/worker/renderer'.
src/platform/electron_app_common.ts(4,50): error TS2307: Cannot find module 'angular2/src/facade/lang'.
src/platform/electron_app_common.ts(5,28): error TS2307: Cannot find module 'angular2/src/core/render/api'.
src/platform/electron_app_common.ts(12,8): error TS2307: Cannot find module 'angular2/core'.
src/platform/electron_app_common.ts(13,63): error TS2307: Cannot find module 'angular2/common'.
src/platform/electron_app_common.ts(17,8): error TS2307: Cannot find module 'angular2/src/web_workers/shared/client_message_broker'.
src/platform/electron_app_common.ts(21,8): error TS2307: Cannot find module 'angular2/src/web_workers/shared/service_message_broker'.
src/platform/electron_app_common.ts(22,26): error TS2307: Cannot find module 'angular2/src/web_workers/shared/serializer'.
src/platform/electron_app_common.ts(23,29): error TS2307: Cannot find module 'angular2/src/web_workers/shared/api'.
src/platform/electron_app_common.ts(24,24): error TS2307: Cannot find module 'angular2/src/core/di'.
src/platform/electron_app_common.ts(25,27): error TS2307: Cannot find module 'angular2/src/web_workers/shared/render_store'.
src/platform/electron_message_bus.ts(1,27): error TS2307: Cannot find module 'electron'.
src/platform/electron_message_bus.ts(6,8): error TS2307: Cannot find module 'angular2/src/web_workers/shared/message_bus'.
src/platform/electron_message_bus.ts(7,48): error TS2307: Cannot find module 'angular2/core'.
src/platform/electron_message_bus.ts(42,22): error TS2304: Cannot find name 'Map'.
src/platform/electron_message_bus.ts(43,11): error TS2304: Cannot find name 'Map'.
src/platform/electron_message_bus.ts(94,22): error TS2304: Cannot find name 'Map'.
src/platform/electron_message_bus.ts(95,11): error TS2304: Cannot find name 'Map'.
src/platform/electron_renderer.ts(1,27): error TS2307: Cannot find module 'electron'.
src/platform/electron_renderer.ts(3,26): error TS2307: Cannot find module 'angular2/src/web_workers/shared/message_bus'.
src/platform/electron_renderer.ts(4,50): error TS2307: Cannot find module 'angular2/core'.
src/platform/electron_renderer.ts(5,46): error TS2307: Cannot find module 'angular2/src/core/di'.
src/platform/electron_renderer.ts(6,36): error TS2307: Cannot find module 'angular2/src/web_workers/ui/renderer'.
src/platform/electron_renderer.ts(7,35): error TS2307: Cannot find module 'angular2/src/web_workers/ui/xhr_impl'.
src/platform/electron_renderer.ts(15,29): error TS2307: Cannot find module 'angular2/src/facade/exceptions'.
src/platform/electron_renderer.ts(16,26): error TS2307: Cannot find module 'angular2/src/facade/lang'.
src/platform/electron_renderer_common.ts(1,35): error TS2307: Cannot find module 'angular2/src/facade/lang'.
src/platform/electron_renderer_common.ts(2,26): error TS2307: Cannot find module 'angular2/src/web_workers/shared/message_bus'.
src/platform/electron_renderer_common.ts(17,8): error TS2307: Cannot find module 'angular2/core'.
src/platform/electron_renderer_common.ts(18,51): error TS2307: Cannot find module 'angular2/platform/common_dom'.
src/platform/electron_renderer_common.ts(19,56): error TS2307: Cannot find module 'angular2/src/core/di'.
src/platform/electron_renderer_common.ts(21,19): error TS2307: Cannot find module 'angular2/src/platform/dom/dom_adapter'.
src/platform/electron_renderer_common.ts(22,31): error TS2307: Cannot find module 'angular2/src/platform/dom/events/dom_events'.
src/platform/electron_renderer_common.ts(23,31): error TS2307: Cannot find module 'angular2/src/platform/dom/events/key_events'.
src/platform/electron_renderer_common.ts(24,36): error TS2307: Cannot find module 'angular2/src/platform/dom/events/hammer_gestures'.
src/platform/electron_renderer_common.ts(25,24): error TS2307: Cannot find module 'angular2/src/platform/dom/dom_tokens'.
src/platform/electron_renderer_common.ts(26,49): error TS2307: Cannot find module 'angular2/src/platform/dom/dom_renderer'.
src/platform/electron_renderer_common.ts(27,35): error TS2307: Cannot find module 'angular2/src/platform/dom/shared_styles_host'.
src/platform/electron_renderer_common.ts(28,32): error TS2307: Cannot find module 'angular2/src/platform/dom/shared_styles_host'.
src/platform/electron_renderer_common.ts(29,30): error TS2307: Cannot find module 'angular2/src/animate/browser_details'.
src/platform/electron_renderer_common.ts(30,32): error TS2307: Cannot find module 'angular2/src/animate/animation_builder'.
src/platform/electron_renderer_common.ts(31,19): error TS2307: Cannot find module 'angular2/compiler'.
src/platform/electron_renderer_common.ts(32,23): error TS2307: Cannot find module 'angular2/src/platform/browser/xhr_impl'.
src/platform/electron_renderer_common.ts(33,27): error TS2307: Cannot find module 'angular2/src/core/testability/testability'.
src/platform/electron_renderer_common.ts(34,37): error TS2307: Cannot find module 'angular2/src/platform/browser/testability'.
src/platform/electron_renderer_common.ts(35,33): error TS2307: Cannot find module 'angular2/src/platform/browser/browser_adapter'.
src/platform/electron_renderer_common.ts(36,23): error TS2307: Cannot find module 'angular2/src/core/profile/wtf_init'.
src/platform/electron_renderer_common.ts(37,36): error TS2307: Cannot find module 'angular2/src/web_workers/ui/renderer'.
src/platform/electron_renderer_common.ts(38,35): error TS2307: Cannot find module 'angular2/src/web_workers/ui/xhr_impl'.
src/platform/electron_renderer_common.ts(39,39): error TS2307: Cannot find module 'angular2/src/router/location/browser_platform_location'.
src/platform/electron_renderer_common.ts(43,8): error TS2307: Cannot find module 'angular2/src/web_workers/shared/service_message_broker'.
src/platform/electron_renderer_common.ts(47,8): error TS2307: Cannot find module 'angular2/src/web_workers/shared/client_message_broker'.
src/platform/electron_renderer_common.ts(48,26): error TS2307: Cannot find module 'angular2/src/web_workers/shared/serializer'.
src/platform/electron_renderer_common.ts(49,29): error TS2307: Cannot find module 'angular2/src/web_workers/shared/api'.
src/platform/electron_renderer_common.ts(50,27): error TS2307: Cannot find module 'angular2/src/web_workers/shared/render_store'.
src/platform/electron_renderer_common.ts(52,27): error TS2307: Cannot find module 'electron'.
src/main.ts(2,15): error TS2307: Cannot find module 'angular2/common'.
src/main.ts(3,15): error TS2307: Cannot find module 'angular2/core'.
src/main.ts(4,15): error TS2307: Cannot find module 'angular2/platform/worker_app'.
src/main.ts(5,27): error TS2307: Cannot find module 'angular2/compiler'.
src/main.ts(6,15): error TS2307: Cannot find module 'angular2/instrumentation'.
src/renderer.ts(2,15): error TS2307: Cannot find module 'angular2/core'.
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v6.5.0
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! @angular2/[email protected] build: npm run clean && tsc
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @angular2/[email protected] build script 'npm run clean && tsc'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the @angular2/electron package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run clean && tsc
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs @angular2/electron
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls @angular2/electron
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\kursa\Desktop\angular-electron\npm-debug.log
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "demo"
npm ERR! node v6.5.0
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! @angular2/[email protected] demo: npm run build && npm run build_demo && electron ./demo
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @angular2/[email protected] demo script 'npm run build && npm run build_demo && electron ./demo'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the @angular2/electron package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build && npm run build_demo && electron ./demo
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs @angular2/electron
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls @angular2/electron
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\kursa\Desktop\angular-electron\npm-debug.log
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.5.0
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! @angular2/[email protected] start: npm run demo
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @angular2/[email protected] start script 'npm run demo'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the @angular2/electron package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run demo
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs @angular2/electron
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls @angular2/electron
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\kursa\Desktop\angular-electron\npm-debug.log
C:\Users\kursa\Desktop\angular-electron>
View > Reload make the view go blank.
In the network tab of the dev tools, I can see the requests going out when the refresh command is executed, but no response comes back.
After that it's also impossible to close the application (the process must be killed).
No error is visible in the dev tools's console.
Hitting reload again has no effect anymore.
Hi, could you shortly explain what the usecase for angular-electron is, what benefit does someone has when using this project instead plain angular in electron?
ERROR in app\app.module.ts(30,28):
Error during template compile of 'AppModule' Function calls are not supported in decorators but 'RegisterTranslatorModule' was called. any help
I cloned and ran the command and installed a few things and then hit typings install. Afterwards typings is not a recognized as an internal or external command
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Users\\Usuario\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle @angular2/[email protected]~prestart: @angular2/[email protected]
6 silly lifecycle @angular2/[email protected]~prestart: no script for prestart, continuing
7 info lifecycle @angular2/[email protected]~start: @angular2/[email protected]
8 verbose lifecycle @angular2/[email protected]~start: unsafe-perm in lifecycle true
9 verbose lifecycle @angular2/[email protected]~start: PATH: C:\Users\Usuario\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;C:\Users\Usuario\Desktop\angular-electron\node_modules\.bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\dotnet\;C:\Program Files\Git\cmd;C:\Program Files (x86)\PuTTY\;C:\Program Files\nodejs\;C:\Users\Usuario\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\Usuario\AppData\Roaming\npm
10 verbose lifecycle @angular2/[email protected]~start: CWD: C:\Users\Usuario\Desktop\angular-electron
11 silly lifecycle @angular2/[email protected]~start: Args: [ '/d /s /c', 'npm run demo' ]
12 silly lifecycle @angular2/[email protected]~start: Returned: code: 2 signal: null
13 info lifecycle @angular2/[email protected]~start: Failed to exec start script
14 verbose stack Error: @angular2/[email protected] start: `npm run demo`
14 verbose stack Exit status 2
14 verbose stack at EventEmitter.<anonymous> (C:\Users\Usuario\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:279:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess.<anonymous> (C:\Users\Usuario\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:877:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid @angular2/[email protected]
16 verbose cwd C:\Users\Usuario\Desktop\angular-electron
17 error Windows_NT 10.0.14393
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Usuario\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
19 error node v6.10.0
20 error npm v4.3.0
21 error code ELIFECYCLE
22 error errno 2
23 error @angular2/[email protected] start: `npm run demo`
23 error Exit status 2
24 error Failed at the @angular2/[email protected] start script 'npm run demo'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the @angular2/electron package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error npm run demo
24 error You can get information on how to open an issue for this project with:
24 error npm bugs @angular2/electron
24 error Or if that isn't available, you can get their info via:
24 error npm owner ls @angular2/electron
24 error There is likely additional logging output above.
25 verbose exit [ 2, true ]
I've followed your instructions on the README but have not been able to get the demo to run.
I believe that you may have some modules installed globally that you have not mentioned.
typings
globally, but your package.json
scripts build
and build_demo
requires tsc
to be installed.electron ./demo
fails via the demo
script as well as via command line.node_modules/electron-prebuilt/dist/Electron.app/Contents/MacOS/Electron ./demo
fails with Error: Cannot find module '/Users/leifwells/electron/angular-electron-master/demo'
(which makes no sense because that is the correct path)When possible, help me assist you. I'd like to see this project be successful.
Thanks/
All other steps finished fine.
$ npm start
> @angular2/[email protected] start /Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master
> npm run demo
> @angular2/[email protected] demo /Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master
> npm run build && npm run build_demo && electron ./demo
> @angular2/[email protected] build /Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master
> npm run clean && tsc
> @angular2/[email protected] clean /Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master
> rimraf dist
> @angular2/[email protected] build_demo /Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master
> tsc typings/browser.d.ts demo/main.ts demo/app_ui.ts --module commonjs -t es5 --experimentalDecorators --emitDecoratorMetadata
App threw an error when running TypeError: Cannot read property 'prototype' of undefined
at patchXHR (/Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master/node_modules/zone.js/dist/zone.js:112:63)
at Object.<anonymous> (/Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master/node_modules/zone.js/dist/zone.js:80:2)
at Object.Zone.Zone.zoneSpec._properties (/Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master/node_modules/zone.js/dist/zone.js:181:31)
at __webpack_require__ (/Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master/node_modules/zone.js/dist/zone.js:20:30)
at /Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master/node_modules/zone.js/dist/zone.js:40:18
at Object.<anonymous> (/Users/alexei.chekulaev/Dropbox/Work/nw/angular-electron-master/node_modules/zone.js/dist/zone.js:43:10)
at Module._compile (module.js:416:34)
at Object.Module._extensions..js (module.js:425:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
log below:
E:\angular-electron>npm run setup-demo
> @angular2/[email protected] setup-demo E:\angular-electron
> npm install --no-optional [email protected] es6-promise@^3.1.2 es6-shim@0
.35.0 [email protected] [email protected] zone.js@^0.6.6
@angular2/[email protected] E:\angular-electron
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]
E:\angular-electron>npm run start
> @angular2/[email protected] start E:\angular-electron
> npm run demo
> @angular2/[email protected] demo E:\angular-electron
> npm run build && npm run build_demo && electron ./demo
> @angular2/[email protected] build E:\angular-electron
> npm run clean && tsc
> @angular2/[email protected] clean E:\angular-electron
> rimraf dist
error TS6053: File 'typings/browser.d.ts' not found.
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\long\\AppData\\R
oaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.3.1
npm ERR! npm v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! @angular2/[email protected] build: `npm run clean && tsc`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @angular2/[email protected] build script 'npm run clean && t
sc'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the @angular2/electron pa
ckage,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run clean && tsc
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs @angular2/electron
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls @angular2/electron
npm ERR! There is likely additional logging output above.
the error Prompt browser.d.ts not found, how do i solve this problem.
I am trying to build an app that hits a particular server and displays the data. When injecting and using the Http service I get an error a mile long. The gist of it is:
EXCEPTION: Error during instantiation of App!.
ORIGINAL EXCEPTION: ReferenceError: XMLHttpRequest is not defined
ORIGINAL STACKTRACE:
ReferenceError: XMLHttpRequest is not defined
at BrowserXhr.build (/Users/mckeowr/Documents/git/angular-electron/node_modules/angular2/src/http/backends/browser_xhr.js:19:60)
at Observable._subscribe (/Users/mckeowr/Documents/git/angular-electron/node_modules/angular2/src/http/backends/xhr_backend.js:32:35)
at Observable.subscribe (/Users/mckeowr/Documents/git/angular-electron/node_modules/rxjs/Observable.js:58:33)
at new App (/Users/mckeowr/Documents/git/angular-electron/demo/component.js:17:14)
at /Users/mckeowr/Documents/git/angular-electron/node_modules/angular2/src/core/reflection/reflection_capabilities.js:13:47
at Injector._instantiate (/Users/mckeowr/Documents/git/angular-electron/node_modules/angular2/src/core/di/injector.js:777:27)
at Injector._instantiateProvider (/Users/mckeowr/Documents/git/angular-electron/node_modules/angular2/src/core/di/injector.js:715:25)
at Injector._new (/Users/mckeowr/Documents/git/angular-electron/node_modules/angular2/src/core/di/injector.js:704:21)
at InjectorInlineStrategy.instantiateProvider (/Users/mckeowr/Documents/git/angular-electron/node_modules/angular2/src/core/di/injector.js:204:30)
at ElementDirectiveInlineStrategy.init (/Users/mckeowr/Documents/git/angular-electron/node_modules/angular2/src/core/linker/element.js:558:24)
I started from the demo code and just changed the "component.ts" file as shown here:
import {Component, ElementRef, Inject, Injectable} from 'angular2/core';
import {HTTP_PROVIDERS, Http} from 'angular2/http';
@Component({
selector: 'app',
template: `<div><h1>Hello World</h1></div>`,
providers: [
HTTP_PROVIDERS
]
})
@Injectable()
export class App {
constructor(private Http:Http){
this.Http.get('http://localhost:3000')
.subscribe((response) => {
alert(response);
});
}
}
It seems that maybe the code is running in the main process and not the renderer process which results in a problem with browser_xhr?
Currently the path to the html file is hardcoded into platform/electron_app.html
. Can this be extracted to let users take care of their own window opening logic? Are apps with multiple windows supported? (With a shared app scope so that changes are reflected across the entire app.)
I've been exploring getting the Router
working here.
Modifying main.ts
as follows:
import {bootstrap} from '../dist/main';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {App} from './component';
bootstrap(App, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
component
changes:
@Component({
selector: 'home',
template: '<div>HOME</div>'
})
class HomeComponent {}
@Component({
selector: 'app',
template: `<div>Hello from {{name}}</div><router-outlet></router-outlet>`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ path: '/', component: HomeComponent, as: 'Home' }
])
export class App {
name: string;
constructor(){
this.name = 'Angular2 Electron!';
setTimeout(() => {
this.name = 'Angular2 Electron!!!';
},1000);
}
}
Results in this error:
EXCEPTION: No provider for Router! (RouterOutlet -> Router)
EXCEPTION: Error: Uncaught (in promise): No provider for Router! (RouterOutlet -> Router)
It gets closer by modifying electron_app.ts
as follows:
export const ELECTRON_APP_APPLICATION: Array<any /*Type | Provider | any[]*/> = [
ELECTRON_APP_APPLICATION_COMMON,
COMPILER_PROVIDERS,
new Provider(MessageBus, { useFactory: createMessageBus, deps: [NgZone] }),
BrowserPlatformLocation,
MessageBasedPlatformLocation,
new Provider(APP_INITIALIZER, { useFactory: initRouterListeners, multi: true, deps:[Injector] })
];
function initRouterListeners(injector: Injector): () => void {
return () => {
let zone = injector.get(NgZone);
zone.run(() => injector.get(MessageBasedPlatformLocation).start());
};
}
This results in this error:
Error during instantiation of BrowserPlatformLocation! (MessageBasedPlatformLocation -> BrowserPlatformLocation).
In the spirit of exploration and attempting to dig deeper, I mocked BrowserPlatformLocation
like so:
class BrowserPlatformLocationMock extends PlatformLocation {
private _location: any;
private _history: any;
constructor() {
super();
this._init();
}
_init() {
this._location = {
pathname: '',
search: '',
hash: ''
}
this._history = {
forward: () => {},
back: () => {},
pushState: (state: any, title: any, url: any) => {},
replaceState: (state: any, title: any, url: any) => {}
}
}
get location(): any { return this._location; }
getBaseHrefFromDOM(): string { return ''; }
onPopState(fn: UrlChangeListener): void {}
onHashChange(fn: UrlChangeListener): void {}
get pathname(): string { return this._location.pathname; }
get search(): string { return this._location.search; }
get hash(): string { return this._location.hash; }
set pathname(newPath: string) { this._location.pathname = newPath; }
pushState(state: any, title: string, url: string): void {}
replaceState(state: any, title: string, url: string): void {}
forward(): void { this._history.forward(); }
back(): void { this._history.back(); }
}
// then substitute the mock in the providers:
new Provider(BrowserPlatformLocation, { useClass: BrowserPlatformLocationMock })
That results in this:
Error during instantiation of PlatformLocation! (RouterOutlet -> Router -> Location -> LocationStrategy -> PlatformLocation).
Curious if anything jumps out to anyone here that may get the Router
working with this?
This experimentation (hacking) is continuing here:
https://github.com/NathanWalker/angular2-seed-advanced/tree/4-electron-support
Specifics related to above:
https://github.com/NathanWalker/angular2-seed-advanced/blob/4-electron-support/src/frameworks/desktop.framework/electron/platform/electron_app.ts#L92
Hoping in the future, Router
support will be possible here and this implementation could be wrapped up and provided as an npm module. In meantime, there is always manual exploration :)
I want to learn about Electron. Previously I'm an Angular developer. Now I want to use Angular and Electron and I found this. Is this project is alive and active?
Mine is a question more then an issue.
If I’ve 2 angular app and the second one is loaded with an iframe by the first one is electron still a tool that I can use? Or in this case it will fail?
Thanks
When I want to run the demo (arch linux):
gives me this error:
Uncaught Exception:
TypeError: Cannot read property 'prototype' of undefined
at patchXHR (/run/media/habib/New Volume/projects/electron/angular-electron/node_modules/zone.js/dist/zone.js:113:63)
at Object. (/run/media/habib/New Volume/projects/electron/angular-electron/node_modules/zone.js/dist/zone.js:81:2)
at Object.Zone.Zone.zoneSpec._properties (/run/media/habib/New Volume/projects/electron/angular-electron/node_modules/zone.js/dist/zone.js:144:31)
at webpack_require (/run/media/habib/New Volume/projects/electron/angular-electron/node_modules/zone.js/dist/zone.js:20:30)
at /run/media/habib/New Volume/projects/electron/angular-electron/node_modules/zone.js/dist/zone.js:40:18
at Object. (/run/media/habib/New Volume/projects/electron/angular-electron/node_modules/zone.js/dist/zone.js:43:10)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
I just found this and it looks very cool to integrate electron deeper into angular.
I'd like to know if this project will be continued or if I should just use angular as is with electron?
If users opt into using the split-render usage implemented here, then zones and change detection are handled automatically. For users who may want to use Electron without the worker-style case, we should provide a simple wrapper around Electron Services that makes them zone aware.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.