如何将 Angular 2 与 NetBeans 一起使用？

Posted 2023-03-07

【中文标题】如何将 Angular 2 与 NetBeans 一起使用？

【英文标题】：How can I use Angular 2 with NetBeans?

【发布时间】：2016-12-24 12:07:13

【问题描述】：

我已经尝试了所有可以找到的教程来尝试使用 Angular 2 在 NetBeans 上制作 html/JS 项目，但没有一个成功。也许是我的 npm 出了问题（例如，搜索不起作用）。

使用npm install创建的node_modules文件夹在NetBeans上是灰色的，并且在某些文件中有一些错误（我不知道这是否正常）。我尝试从node_modules 文件夹导入的任何.js 都会出现错误Failed to load resource: net::ERR_EMPTY_RESPONSE / Uncaught ReferenceError: System is not defined。

有人知道我做错了什么吗？或者有谁知道任何有代码下载的教程，这样我就可以与我正在做的事情进行比较，看看什么是正确的？我找到的每个教程都没有任何代码可以下载，只是页面中的一些代码用于解释。 抱歉，如果这不是一个好问题，但我从昨天开始就一直在尝试完成这项工作，但没有成功，我完全不知道。

【参考方案1】：

首先我建议升级到最新版本的 NodeJS 和 NPM，以尽量减少 node_modules 文件夹中的错误

从 https://github.com/Everlaw/nbts/releases 安装 Everlaw 的 Typescript 插件。如果您使用的是 Netbeans 8.1，我认为您可以直接从插件安装程序安装它。我使用的是 NetBeans 8.2，手动安装插件没有问题。

然后在 NetBeans 上转到 Tools -> Options -> HTML/JS -> Node.js 并编写正确的 Node 和 NPM 路径和源，我建议检查三个检查 -该面板中的框。

如需快速入门，请尝试 angular.io 页面中的 QuickStart 演示，无需对 package.json 进行任何更改。 第一次尝试调试 Angular 2 应用程序时，我将 index.html 文件直接放在 project 文件夹 中，以便不对 进行任何更改index.html 脚本源 也不会更改项目文件结构，但您需要更改项目的一些属性：

在项目窗口中右键单击项目并选择

属性

。 在源中使用浏览按钮更改

站点根文件夹

并选择项目文件夹（您可以忽略出现的警告）。 在运行中选择

运行方式：Web 应用程序

。 我建议选择

浏览器：带有 NetBeans 连接器的 Chrome

使用浏览按钮转到项目文件夹并选择

index.html

作为您的

启动文件

。 选择

Web 服务器：嵌入式轻量级

。 最后在

Web Root

中写入 /Your_Project_Folder

从 NetBeans 运行 npm install

单击运行按钮，您的 Web 应用程序必须在 chrome 中打开，如果您编辑 html 或 typescript 文件并保存它们，您可以在浏览器中实时看到更改，而无需重新调试您的应用程序，并且可以使用浏览器 DOM窗口来探索从 Angular 2 创建的元素。

您仍然会在文件中看到一些错误，因为 NetBeans 与 HTML Angularized 语法不完全兼容。但它运行完美。

您也可以直接从 Netbeans 运行 启动脚本，以使用 lite-Server 运行您的项目。

Screenshot NetBeans - Angular 2

【讨论】：

但是没有对 HTML 文件的角度语法支持，正如您在附件中看到的那样，<my-app> 被突出显示为错误。我的问题是有任何插件可以支持 HTML 文件中的角度语法吗？

【参考方案2】：

我建议你安装 angular cli：npm install -g angular-cli@webpack

有关此工具的更多信息，请查看此处：https://cli.angular.io/

然后用ng new <app-name>创建一个新的Angular2应用

这将在当前文件夹中创建一个完整且正常工作的 Angular2 应用程序。

cd <app-name> 并使用ng serve 启动应用程序。

在浏览器中localhost:4200 上检查您新创建的应用程序。

如果可行，您可以尝试开始使用您的 NetBeans！ :)

【讨论】：

我刚刚使用此命令ng new my-app 使用 cli 快速入门指南安装了 Angular 2，但现在我在 Windows 上找不到源文件夹，你能告诉我它的位置吗？

取决于您执行该命令的位置。默认文件夹，如果您启动命令行是您的用户目录。

感谢您的回复，我正在桌面上的一个文件夹中执行该命令，但它会在users/muhammad/ 中创建项目我现在才知道。

刚刚对您的答案投了赞成票，因为您确信它是正确的。 :)