如何将 Angular 4 添加到现有的 node.js 应用程序

Posted 2023-03-07

【中文标题】如何将 Angular 4 添加到现有的 node.js 应用程序

【英文标题】：How to add angular 4 to existing node.js application

【发布时间】：2017-12-14 23:52:04

【问题描述】：

我有一个 node.js 应用程序设置为使用 typescript。 该应用程序应该部署在heroku上。 node.js 应用程序设置为用于身份验证、注册和请求等操作的 restful api。

我想知道我需要添加哪些依赖项才能开始在同一个项目中构建 Angular 4 应用程序。

我在 github 上看到一个问题，建议使用 ng init，但这不再是一个选项。 ng new 创建一个全新的项目目录，而不是添加依赖项和文件。

这里还有一个问题，OP 将他自己的答案标记为正确，基本上说“使用流星”。

编辑： 我了解如何在本地工作时从 node.js 应用程序中同时提供 Angular 2+ 应用程序，只需构建并提供 index.ts 文件。但是我怎样才能让 Angular 开发文件与 git 中的 node.js 文件共存，以便我可以编译它们并将它们一起部署？

【问题讨论】：

你的意思是，你的restful api现在在服务器上，你想为它构建一个角度应用程序吗？是这样吗？你不能为angular4创建一个新项目吗？我的意思是你不能将 ng 应用程序和节点服务器分开。

您的问题似乎没有多大意义。 Angular js 是一个客户端应用程序，而 Node.js 是一个服务器端应用程序。虽然您可以将项目混合在一起以便于开发，但它们在功能或依赖关系方面彼此无关；即任何应用程序都可以使用您的节点应用程序提供的 Restful API，无论它是如何开发或发布的。

该 api 现在在服务器上，是的，它将被多个应用程序、移动和 Web 使用。

作为旁注，您在此处提到一个问题，OP 询问有关框架的问题，然后“正确”回答他的问题，说“使用不同的框架”。这似乎是对 QA 系统的滥用，应该报告。

@Claies，我这里没有足够的空间来解释 angularjs 和 angular 2+ 之间的区别。在 angular 2+ 中，他们“黑盒化”了 angular-cli 后面的大部分应用程序设置。这对于从头开始创建应用程序非常有用，但并不是真正让它们共存。

【参考方案1】：

我有同样的情况，我在 heroku 上有一个解析服务器，想用 Angular 将它分组。

在我的 server.js 文件中：

app.use(express.static(__dirname + '/dist'));

（你只需要快递）

我也是用国际化的，所以做的很快（前期，请不要评判）：

app.get('/', function(req, res) 
  let userLanguage = req.headers["accept-language"];
  let langs = ['fr', 'en'];
  let preferred = userLanguage.substr(0, 2).toLowerCase();
  console.log('User\'s preferred language is ' + preferred.toUpperCase());
  if (langs.indexOf(preferred) >= 0)  res.redirect(preferred);  else  res.redirect('/en'); 
);

我的 NG 命令：

"postinstall": "npm run build-i18n",
"i18n": "ng xi18n --output-path src/i18n --out-file messages.xlf",
"build-i18n:fr": "ng build --output-path=dist/fr --aot --prod --bh /fr/ --i18n-file=src/i18n/messages.fr.xlf --i18n-format=xlf --locale=fr",
"build-i18n:en": "ng build --output-path=dist/en --aot --prod --bh /en/ --i18n-file=src/i18n/messages.en.xlf --i18n-format=xlf --locale=en",
"build-i18n": "npm run build-i18n:en && npm run build-i18n:fr"

我的应用程序构建在 2 个文件夹中，用于实际的 2 种语言，当用户访问该应用程序时，他会被重定向到其中任何一种语言。