个人中心
gpt4 book ai didi

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

转载 作者：太空狗 更新时间：2023-10-29 19:35:49 24 4
gpt4 key购买 nike

我怎样才能在 nw.js 下为 angular 2 获得一个有效的“hello world”？

我使用本指南成功获得了一个可用的 angular 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 = {}));

为了安装我运行的 Node 和依赖项(我以 Node 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 .

如果我将 index.html 替换为简单的纯 HTML“hello world”，我会在 nw 中看到该显示正常。但是，使用 Angular 2 index.html，我在浏览器中看到了来 self 的应用程序的“正在加载...”消息，并且在我启动 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 上。

最佳答案

看起来您的 angular JavaScript 文件没有被加载。这就是我相信 ng 未定义的原因。

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

 "toolbar": true,

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

enter image description here

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

关于javascript - 如何在 nw.js 中开始使用 angular2，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34833992/

24 4 0
文章推荐： python - 使用 Python 从目录中读取所有 csv 文件
文章推荐： python - 需要一个类似字节的对象，而不是 'str' JSON 文件作为 STR 打开
文章推荐： angular - Json编辑器想要 Angular 2
文章推荐： python - 使用OpenCV+Python-2.7的全身检测与跟踪
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com