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

Question

我已经建立了一个使用Typescript的Node.js应用程序。这个应用程序预计要部署在Heroku上。这个Node.js应用程序是作为一个Restful API来处理身份验证、注册和请求等事情。

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

我在Github上看到了一个问题，推荐使用ng init，但现在这个选项已经不再可用了。ng new会创建一个全新的项目目录，而不是添加依赖项和文件。

这里有另外一个问题，发帖者把自己的答案标记为正确答案，基本上是说“使用Meteor”。

编辑： 当我在本地工作时，我知道如何在Node.js应用程序里同时提供一个Angular 2+应用程序，只需构建并服务于index.ts文件即可。但是，我该如何让Angular开发文件与Node.js文件在git中共存，以便我可以将它们一起编译和部署？

- xerotolerant

---

你的问题似乎不太有意义。AngularJS是一个客户端应用程序，而Node.js是一个服务器端应用程序。虽然你可以将这两个项目混合在一起以便于开发，但它们在功能或依赖方面没有任何关联；也就是说，任何应用程序都可以使用你的Node应用程序提供的Restful API，无论它是如何开发或发布的。 - Claies

作为一个旁注，你在这里提到了一个问题，其中OP问了一个关于框架的问题，然后“正确地”回答了他的问题，说“使用不同的框架”。这似乎是对QA系统的滥用，应该报告。 - Claies

不，他们确实没有；Angular-cli是一个用于轻松创建Angular应用程序的工具，它不是必需组件。但是，就Angular和node.js“共存”的问题而言，你的问题真的不太清楚；如果你想在node服务器中托管angular应用程序，那么你需要做的就是将angular应用程序发布到node服务器树中的一个文件夹中，并在node中创建一个单一路由到应用程序的入口点（通常是index.html）。 - Claies

例如，https://dev59.com/l6Hia4cB1Zd3GeqPXK6n#43961152 - Claies

我正在使用Heroku进行部署，该平台使用Git进行部署。考虑到这种部署方式，我不太清楚如何将Angular应用程序“发布到Node服务器树”上。我甚至不能完全确定这是否可行。在本地工作时，我理解您的意思，只需构建并提供文件即可。但是，我该如何让Angular开发文件与Node.js文件在Git中共存，以便我可以将它们一起编译和部署？ - xerotolerant

Answer 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"

我的应用程序分别建立了两个文件夹来存放不同语言版本的内容，当用户打开应用时，会自动根据语言偏好重定向至对应的文件夹。

- user4676340