gpt4 book ai didi

javascript - 将 Angular 4 应用程序静态 Assets 转发到/PORT 路径而不是主域

转载 作者:太空宇宙 更新时间:2023-11-03 22:27:05 27 4
gpt4 key购买 nike

我们有一个Angular 4应用程序是 exposed从里面 Node + Express app,因此作为普通 Node 应用程序启动。有点像:node index.js

在本地计算机上完成时效果非常好。 Angular 应用程序由 /client 提供服务目录:

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

当这个项目部署到某个服务器时,express perfectly responsesclient/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. 转到应用程序目录 cd app
  3. 转到 Angular 2 应用目录 cd client
  4. 安装 Angular 2 依赖项 npm i
  5. 编译 Angular 2 项目 npm run tsc:w
  6. 返回应用目录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/

最佳答案

这是一个快速演示:

  1. git clone 这个使用 angular-cli 的示例存储库 https://github.com/sunilbandla/msal-angular-sample
  2. cd 进入文件夹。
  3. ng build --base-href/PORT/
  4. 全局安装 Node 模块 liter-server 并从项目根目录运行 lite-server 命令
  5. 打开下面的链接,您可以看到它与 url 中的路径配合得很好。
  6. http://localhost:3000/PORT/index.html

关于javascript - 将 Angular 4 应用程序静态 Assets 转发到/PORT 路径而不是主域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44528039/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com