Giter Club home page Giter Club logo

angular-electron's Introduction

Angular Electron

Electron Platform for Angular 2. Work in progress.

Testing the demo

Make sure to have NodeJS version 5.x.x installed.

Start off by running npm run setup. That command will install the dependencies and the required TypeScript typings (using the typings package).

Since the demo application is not apart of the plugin, angular2 and its peer dependencies also need to be installed manually via npm. Run the following command to install everything required for the demo: npm run setup-demo.

That command will install the following:

  • angular2
  • es6-promise
  • es6-shim
  • reflect-metadata
  • rxjs
  • zone.js

Then execute npm start to see the demo application in action!

angular-electron's People

Contributors

dsebastien avatar matsko avatar nathanwalker avatar robwormald avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-electron's Issues

npm start exception

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)

npm run typings install will not work without typings

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

Multiple Window Support

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

Running the demo fails on Windows

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 ]

View > Reload does not work

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.

Use case for angular-electron

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?

Electron and iframe

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

File 'typings/browser.d.ts' not found.

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.

Is this project active?

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?

Running the demo fails on Windows

@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

Angular (4+) Electron Seed

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.

A JavaScript error occurred in the main process

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)

Project Roadmap / Status

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?

Router integration...

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 :)

Cannot Install, Run

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.

  • I installed 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.
  • Running 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/

Http service throws error 'XMLHttpRequest is not defined'

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?

src/platform/electron.ts(1,24): error TS2307: Cannot find module 'angular2/core'.

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>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.