如何开始与nw.js angular2 [英] How to get started with angular2 in nw.js
问题描述
我如何获得角2工作的'Hello World下nw.js？
How can I get a working 'hello world' for angular 2 under nw.js?
我顺利拿到了使用本指南工作角2应用程序：
I successfully got a working angular 2 app using this guide:
https://angular.io/docs/js/latest/quickstart.html
和使用这一个工作nw.js应用程序：
and a working nw.js app using this one:
<一个href=\"https://egghead.io/lessons/javascript-your-first-nw-js-desktop-application-in-less-than-5-minutes\" rel=\"nofollow\">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>
应用程序/ boot.js ：
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platform.browser.bootstrap(app.AppComponent);
});
})(window.app || (window.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 ）：
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
然后运行在 NW应用：
nw .
如果我更换一个简单的纯HTML的'Hello World中的index.html，我看到NW罚款显示屏。然而，随着角度的index.html 2，我看到从我的浏览器应用中的载入中...的消息，这从我发起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)
我在Linux上。
I'm on Linux.
推荐答案
它看起来像没有被加载您的角度JavaScript文件。这就是为什么NG是不确定的，我相信。
It looks like your angular JavaScript file is not being loaded. That is why ng is undefined I believe.
要实现发展目的的工具栏将下面的属性您的package.json文件中设置。
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.
![在这里输入的形象描述](\"http://i.stack.imgur.com/9jJBY.png\")
您单击网络选项卡后按F5刷新页面，这样你可以看到哪些文件具有和没装。
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.
这篇关于如何开始与nw.js angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
