将Angular 4 app静态资产转发到/ PORT路径而不是主域

问题描述 投票：2回答：1

我们有一个Angular 4应用程序，它是来自exposed + Node应用程序内部的Express，因此它是作为普通节点应用程序启动的。有点像：node index.js

这在本地机器上完成时效果很好。角度应用程序从/client目录提供：

app.use(express.static(__dirname + "/client"));

当这个项目部署到某个服务器时，express perfectly responses与client/index.html文件：

<html>
<head>
    <title>Angular 4 app</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="public/styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err) {
            console.error(err);
        });
    </script>
</head>
<!-- 3. Display the application -->

<body>
    <my-app>
        <h1>Loading...</h1>
    </my-app>
    <script type="text/javascript" src="public/jquery.connectingLine.js"></script>
</body>
</html>

该应用程序的模板取自here基于these tutorials。

转发端口：

nginx可以使用以下规则执行反向代理：

调试信息：

Deployment process:

  1. 应用程序使用git pull加载到服务器上
  2. 转到app目录cd app
  3. 转到Angular 2应用程序目录cd client
  4. 安装Angular 2依赖项npm i
  5. 编译Angular 2项目npm run tsc:w
  6. 回到app目录cd ..
  7. 运行命令PORT=8080 pm2 start index.js --name=Angular4AndNodeApp

正如所建议的那样，<base href="/"> is set和我们正在访问virtual path。然而，我们没有击中http://example.com/someapp/index.html，而是击中了http://example.com/PORT/index.html。

在这个项目中，所有Angular 4组件都是404。

这可能会发生，可能是因为应用程序没有正确编译。

我们如何确保所有这些静态资产都有<script>和<link>标签错误地击中https://angular4AppDomain.com/，而是打到https://angular4AppDomain.com/8080/？

javascript node.js angular express pm2
1个回答
0
投票

这是一个快速演示：

  1. git clone这个样本回购使用angular-cli https://github.com/sunilbandla/msal-angular-sample
  2. cd进入文件夹。
  3. ng build --base-href /PORT/
  4. 全局安装节点模块liter-server并从项目的根目录运行lite-server命令
  5. 打开下面的链接，你可以看到它与网址中的路径一起工作正常。
  6. http://localhost:3000/PORT/index.html
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.