Question

我们在Angular 4 +内部有一个exposed应用Node Express app，因此作为普通节点应用启动。有点像：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可以使用以下规则执行反向代理：

appUrl/port之类的任何请求都应在内部路由到localhost:port
在https://angular4AppDomain.com服务器上，Angular4AndNodeApp应用已在PORT 8080启动（参考部署流程第7点）
因此，对https://angular4AppDomain.com/8080/的请求在内部 PORT FORWARDED 到https://localhost:8080/

调试信息：

当我们点击https://angular4AppDomain.com/8080/时，它会点击节点服务器并返回client/index.html文件 - 200确定
client/index.html档案有<script>＆amp; <link>标记错误地发送到https://angular4AppDomain.com/而非https://angular4AppDomain.com/8080/ - 404未找到

Deployment process:

使用git pull
转到应用目录cd app
转到Angular 2应用目录cd client
安装Angular 2依赖项npm i
编译Angular 2项目npm run tsc:w
返回应用目录cd ..
运行命令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 s。

~~可能会发生这种情况可能是因为应用程序未正确编译。~~

我们如何确保所有这些静态资产都有<script>＆amp;错误地点击https://angular4AppDomain.com/的<link>代码，而是点击https://angular4AppDomain.com/8080/？

Answer 1

这是一个快速演示：

git clone此示例回购使用angular-cli https://github.com/sunilbandla/msal-angular-sample
cd进入文件夹。
ng build --base-href /PORT/
全局安装节点模块liter-server并从项目的根目录运行lite-server命令
打开以下链接，您可以看到它与网址中的路径一起正常工作。
http://localhost:3000/PORT/index.html

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

1 个答案: