Nodejs应用与角度应用集成

Question

Nodejs应用程序使用Express (速成器)创建，并使用车把作为视图引擎。创建了几条路线并运行良好。在端口3000上运行的应用程序。

特快路线：

...
app.use('/', index);
app.use('/landing', landing);
app.use('/home', home);
app.use('/api', api);
...

有一个独立的管理面板应用程序构建在角上。

目前，在端口4200上运行的应用程序的角度，并使用API从NodeJs应用程序运行在端口3000。

角度应用路线

const routes : Routes = [
    { path: '', redirectTo: '/user', pathMatch: 'full' },
    {
        path: 'user',
        component : UserComponent,
        children : [
            { path:'', redirectTo: '/account', pathMatch: 'full' },
            { path: 'account', component: AccountComponent },
        ]
    },

]

NodeJs应用程序文件夹结构

api/
   api.js
bin/
   www
modules/
   mongoose.js
node_modules/
public/
   css/
   fonts/
   img/
   js/
   ngapp/ => Angular resources created with ng build
       inline.bundle.js
       main.bundle.js
       polyfills.bundle.js
       styles.bundle.js
       vendor.bundle.js
routes/
   home.js
   index.js
   landing.js
views/
  common/
       header.hbs
       footer.hbs
  layouts/
       master.hbs
  ngapp/
       index.html => Angular index.html file
  index.hbs
  landing.hbs
  home.hbs
app.js
package.json

我正在尝试的是：希望在同一个端口上运行NodeJs和角应用程序，即端口3000。

我所做的：运行ng构建并将index.html文件放置在nodejs文件夹结构的/view/ngapp/中。

在nodejs中创建了一个“用户”路由，并为该角度应用程序的index.html文件提供服务。(也许这不是个好办法)

app.get('/user', function (req, res, next) {
  res.sendFile(path.join(__dirname + '/views/ngapp/index.html'));
});

不知为何，它加载了，但遇到了一个错误：

​

我的问题是如何将角应用程序(可能在单独的路由上运行，但在同一个端口上)与NodeJs应用程序集成，NodeJs应用程序已经定义了一些路由，并使用视图引擎来呈现页面。

Answer 1

有两种可能的解决办法。

使用节点应用程序为静态前端文件提供服务。那么，您就不能真正使用ng serve (这可能是您在运行时所做的)。

您应该能够告诉Express从这样的角度构建目录中提供静态内容：

App.use(‘./express.static/dist’)；如果您有像这样的文件结构，并且使用Node运行serve.js，它就可以工作：

-node server
  -serve.js
-angular 
  -dist/*

您可以根据需要进行自定义，方法是将角生成文件夹配置到您需要的位置，或者使用Grunt/Gulp将文件移动到您喜欢的文件夹中。

使用具有不同端口的nodejs，并使用角的代理配置，使其具有实际的api端口为4200 (这在开发过程中可能是最好的)。

我认为这主要是开发过程中的一个问题，因为您很可能不会(也不应该)使用ng服务现场服务，所以选项2将是我最好的建议。

要配置代理，您可以在您的角应用程序根目录中创建一个名为proxy.config.json的文件，内容如下：

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

然后，当您运行ng服务时，您可以使用ng serve -代理-config proxy.config.json来运行它。