Question

我在example.com上托管了一个Angular 6应用程序（使用例如5000端口提供dist文件夹），并在其6000端口上提供了HTML，CSS，JS文件并在example.com上托管了一个登陆页面文件夹/欢迎

有什么办法可以合并这两个文件，例如example.com使用登陆页面静态文件夹，example.com/#/*（Angular应用在路由中使用哈希）使用dist文件夹吗？

由于CSS冲突和其他问题，我不想将着陆页合并到Angular应用程序的组件中。

我需要在不先加载Angular应用程序且不更改Angular应用程序的任何URL /路由逻辑的情况下加载目标网页。

我尝试过的解决方案：

以下代码有效，但先加载有角度的应用程序，然后加载登录页面。我想要的是着陆页需要首先加载。

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

app.get('/',(req,res)=> {
  res.redirect('https://example.com/welcome');
})

我试图将Angular应用程序的home组件重定向到/ welcome，但这也需要在着陆页之前先加载Angular应用程序。

关于Express / Nginx的任何解决方案？

Answer 1

我会尝试将角度文件和登录页面文件分别放在静态目录的不同目录中。

app.js ：

// serve static files
app.use(express.static(path.join(__dirname, 'public')));

// serve angular app
app.get('*', (req, res, next) => {
  // Landing page exception
  if (req.originalUrl === '/welcome') {
    return next();
  }

  res.sendFile(path.resolve('public/dist/index.html'));
});

// serve landing page
app.get('/welcome', (req, res) => {
  res.sendFile(path.resolve('public/welcome/index.html'));
});

角路由器：

if (!window.location.hash && window.location.pathname === '/') {
  // redirect the request to GET /welcome
}

public / welcome / index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Landing Page</title>
</head>
<body>

</body>
<!--static files can be accessed at public/welcome/-->
<script type="text/javascript" src="welcome/test.js"></script>
</html>

Answer 2

此答案部分解决了问题。我尝试根据@mas给出的想法来实施解决方案，并且该方法有效。以下是我更改的内容：

server.js：

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

现在在<app-root>之前（最好在body内容之前）在Angular应用的根index.html中添加脚本：

angular的index.html：

<script>
   if (!window.location.hash && window.location.pathname === '/') {
     // redirect the request to GET /welcome
     window.location.href = "https://example.com/welcome";
   }
</script>

当浏览器在解析HTML时遇到脚本标签时，它将停止解析并移交给运行脚本的Java解释器。在脚本执行完成之前，解析器不会继续。因此，angular的index.html将用户重定向到登录页面，然后再将其加载到用户的浏览器中。

此实现通过以下方式部分解决了该问题：

加载静态目标网页，而不先加载Angular应用。
角度应用的网址/路由不变

它不能解决希望将登录页面加载到相同URL（即https://example.com）上的问题，并且仍将用户重定向到其他路径：https://example.com/welcome

现在，如果用户点击该域，它将立即加载静态目标网页。

在Angular 6应用程序中使用静态HTML登陆页面模板

2 个答案: