How to get started with angular2 in nw.js

Question

How can I get a working 'hello world' for angular 2 under nw.js?

I successfully got a working angular 2 app using this guide:

https://angular.io/docs/js/latest/quickstart.html

and a working nw.js app using this one:

https://egghead.io/lessons/javascript-your-first-nw-js-desktop-application-in-less-than-5-minutes

Combining the two I get this:

package.json:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": ""
}

index.html:

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="env/lib/node_modules/angular2-quickstart/node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="env/lib/node_modules/angular2-quickstart/node_modules/rxjs/bundles/Rx.umd.js"></script>
    <script src="env/lib/node_modules/angular2-quickstart/node_modules/angular2/bundles/angular2-all.umd.js"></script>

    <!-- 2. Load our 'modules' -->
    <script src='app/app.component.js'></script>
    <script src='app/boot.js'></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

app/boot.js:

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platform.browser.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));

app/app.component.js:

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

To install node and dependencies I ran (I ended up with node 5.4.1; nodeenv is https://pypi.python.org/pypi/nodeenv/0.13.6):

nodeenv --prebuilt env
source env/bin/activate
npm install -g nw
npm install -g

Then to run the app under nw:

nw .

If I replace the index.html with a simple plain HTML 'hello world', I see that display in nw fine. However, with the angular 2 index.html, I see the "Loading..." message from my app in the browser, and this on the terminal from which I launched nw:

[22627:0117/010210:ERROR:browser_main_loop.cc(170)] Running without the SUID sandbox! See https://code.google.com/p/chromium/wiki/LinuxSUIDSandboxDevelopment for more information on developing with the sandbox on.
ATTENTION: default value of option force_s3tc_enable overridden by environment.
[22627:0117/010210:ERROR:nw_shell.cc(336)] TypeError: Cannot read property 'prototype' of undefined
    at Object.apply (file:///home/me/dev/angular2-quickstart/env/lib/node_modules/angular2-quickstart/node_modules/angular2/bundles/angular2-polyfills.js:941:35)
    at Object.apply (file:///home/me/dev/angular2-quickstart/env/lib/node_modules/angular2-quickstart/node_modules/angular2/bundles/angular2-polyfills.js:835:22)
    at Object.apply (file:///home/me/dev/angular2-quickstart/env/lib/node_modules/angular2-quickstart/node_modules/angular2/bundles/angular2-polyfills.js:301:27)
    at Object.<anonymous> (file:///home/me/dev/angular2-quickstart/env/lib/node_modules/angular2-quickstart/node_modules/angular2/bundles/angular2-polyfills.js:38:14)
    at Object.1.../core (file:///home/me/dev/angular2-quickstart/env/lib/node_modules/angular2-quickstart/node_modules/angular2/bundles/angular2-polyfills.js:40:4)
    at s (file:///home/me/dev/angular2-quickstart/env/lib/node_modules/angular2-quickstart/node_modules/angular2/bundles/angular2-polyfills.js:19:254)
    at e (file:///home/me/dev/angular2-quickstart/env/lib/node_modules/angular2-quickstart/node_modules/angular2/bundles/angular2-polyfills.js:19:425)
    at file:///home/me/dev/angular2-quickstart/env/lib/node_modules/angular2-quickstart/node_modules/angular2/bundles/angular2-polyfills.js:19:443
[22627:0117/010210:INFO:CONSOLE(941)] "Uncaught TypeError: Cannot read property 'prototype' of undefined", source: file:///home/me/dev/angular2-quickstart/env/lib/node_modules/angular2-quickstart/node_modules/angular2/bundles/angular2-polyfills.js (941)
[22627:0117/010211:ERROR:nw_shell.cc(336)] reflect-metadata shim is required when using class decorators
[22627:0117/010211:INFO:CONSOLE(2398)] "Uncaught reflect-metadata shim is required when using class decorators", source: file:///home/me/dev/angular2-quickstart/env/lib/node_modules/angular2-quickstart/node_modules/angular2/bundles/angular2-all.umd.js (2398)
[22627:0117/010211:ERROR:nw_shell.cc(336)] ReferenceError: ng is not defined
    at window.app.window.app (file:///home/me/dev/angular2-quickstart/app/app.component.js:3:5)
    at file:///home/me/dev/angular2-quickstart/app/app.component.js:10:3
[22627:0117/010211:INFO:CONSOLE(3)] "Uncaught ReferenceError: ng is not defined", source: file:///home/me/dev/angular2-quickstart/app/app.component.js (3)
[22627:0117/010211:ERROR:nw_shell.cc(336)] ReferenceError: ng is not defined
    at HTMLDocument.<anonymous> (file:///home/me/dev/angular2-quickstart/app/boot.js:3:5)
[22627:0117/010211:INFO:CONSOLE(3)] "Uncaught ReferenceError: ng is not defined", source: file:///home/me/dev/angular2-quickstart/app/boot.js (3)
[22656:0117/010213:WARNING:channel.cc(553)] Failed to send message to remove remote endpoint (local ID 2147483649, remote ID 3)
[22656:0100/000000:WARNING:channel.cc(553)] Failed to send message to remove remote endpoint (local ID 1, remote ID 1)

I'm on Linux.

Is angular loaded when you look at the net tab in the developer console? — Larry Lane, Jan 17 '16 at 01:32
@LarryLane how would I know? Type ng at the console? I get an Uncaught ReferenceError: ng is not defined — Croad Langshan, Jan 17 '16 at 01:39

Larry Lane · Answer 1 · 2016-01-17T02:09:38.377

0

It looks like your angular JavaScript file is not being loaded. That is why ng is undefined I believe.

To enable the toolbar for development purposes place the following property setting in your package.json file.

 "toolbar": true,

Take a look at the following screenshot so you can begin troubleshooting.

After you click on the network tab hit F5 to refresh the page so that you can see which files have and have not loaded.

edited Jan 17 '16 at 02:09

answered Jan 17 '16 at 01:50

Larry Lane

2,103
1
10
18

Though I don't see any network traffic logged there re angular JS files, I don't think it's possible that that's because they are not being loaded. That's because on the console, it prints the lines of certain angular JS files at which it hit a problem (see my original question). How can it hit a problem at a specific line of a file it did not load? The same is true of the two .js files in my project. – Croad Langshan Jan 17 '16 at 02:00
What do you mean you don't see any network traffic logged? You should see your javascript files loaded under the network tab. – Larry Lane Jan 17 '16 at 02:04
I mean that I don't see any files loaded under the network tab. – Croad Langshan Jan 17 '16 at 02:05
I am sorry I forgot to tell you to hit f5 after you click on the network tab. Then you will see which files have and have not been loaded. – Larry Lane Jan 17 '16 at 02:08
Oh, right, thanks. I see all the following loaded: index.html, angular2-polyfills.js, Rx.umd.js, angular2-all.umd.js, app.component.js, and boot.js – Croad Langshan Jan 17 '16 at 02:37
I don't know what the correct order is :-( They are loaded in the order I listed them in my comment above, though. – Croad Langshan Jan 17 '16 at 02:43
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100873/discussion-between-larry-lane-and-croad-langshan). – Larry Lane Jan 17 '16 at 02:44

How to get started with angular2 in nw.js

1 Answers1

Linked