如何在nw.js中使用angular2开始

我怎么能得到一个工作'你好世界'angular2下nw.js?

我成功地得到了一个使用本指南的工作angular2应用程序:

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

和一个工作nw.js应用程序使用这一个:

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

结合两个我得到这个:

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 = {})); 

为了安装节点和依赖关系,我运行了(我结束了节点5.4.1; nodeenv是https://pypi.python.org/pypi/nodeenv/0.13.6 ):

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

然后在nw下运行应用程序:

 nw . 

如果我用一个简单的HTML“hello world”来replaceindex.html,我会看到在nw中显示的很好。 然而,使用angular 2 index.html,我在浏览器中看到来自我的应用程序的“加载…”消息,而在我启动的terminal上看到这个消息:

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

我在Linux上。

它看起来像你的angular度JavaScript文件没有被加载。 这就是为什么吴不明确我相信。

要启用工具栏进行开发,请在package.json文件中放置以下属性设置。

  "toolbar": true, 

看看下面的截图,以便你可以开始排除故障。

在这里输入图像描述

点击networking标签点击F5刷新页面,以便您可以看到哪些文件已经加载。