Question

如何在nw.js下获得角度为2的工作'hello world'？

我使用本指南成功获得了一个有效的角度2应用程序：

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'替换index.html，我会看到这个显示在nw中。但是，使用angular 2 index.html，我在浏览器中看到了来自我的应用程序的“正在加载...”消息，这是我在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上。

Answer 1

看起来您的角度JavaScript文件未加载。这就是我相信ng未定义的原因。

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

 "toolbar": true,

请查看以下屏幕截图，以便开始进行故障排除。

单击网络选项卡后，按F5刷新页面，以便您可以查看哪些文件已加载但尚未加载。

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

1 个答案: