问题
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.
回答1:
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.
来源：https://stackoverflow.com/questions/34833992/how-to-get-started-with-angular2-in-nw-js