如何强制 Angular cli 从绝对位置而不是 base-href 提供捆绑文件

Posted

技术标签:

【中文标题】如何强制 Angular cli 从绝对位置而不是 base-href 提供捆绑文件【英文标题】:How to force Angular cli to serve the bundle files from an absolute location rather then base-href 【发布时间】:2017-09-30 04:12:58 【问题描述】:

我正在努力将使用 cli 构建的 Angular 4 项目部署到 Spring 引导服务器。

.angular-cli.json 中我添加了 outdir 属性,它指向 Spring webapp 文件夹中的自定义文件夹,可以直接在服务器 (webapp/main) 中访问。

我使用的 cli 构建命令是:

ng build --base-href /main/ -a main

这会在 webapp 中创建主文件夹,其中 index.html 包含以下脚本标签:

<base href="/main/">
...
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script></body>

这意味着这些文件将以 /main 前缀请求,例如 localhost:8080/main/inline.bundle.js

这对于基本应用程序来说很好,但是当路由添加到角度应用程序时会成为一个问题(在 Spring 中,我使用 /main 为所有路径提供 index.html,以允许角度路由正常工作,这会导致捆绑包的重定向循环,因为它们也以 /main 开头

如何强制生成的脚本标签使用自定义位置?或者至少指定绝对位置,而不是在基本 href 上中继(这样我可以将 outDir 属性更改为 main-应用程序,问题已解决)。

所需的解决方案是这样的:

<script type="text/javascript" src="/main-app/main.bundle.js"></script>

我想可能会添加一个将在 ng build 之后执行的脚本,该脚本将修改脚本标签,但这是一个肮脏的解决方案,也不适用于 ng build --watch,这对发展至关重要...

作为参考,这里是映射 /main 请求的 Spring 控制器函数:

@RequestMapping("main/**")
public String mainRoute(HttpServletRequest request) 
       return "/main/index.html";

谢谢!

【问题讨论】:

【参考方案1】:

这里是ng build 维基:https://github.com/angular/angular-cli/wiki/build

请使用--deploy-url="/main-app/" 选项。这将生成:

<script type="text/javascript" src="/main-app/inline.bundle.js"></script>
<script type="text/javascript" src="/main-app/polyfills.bundle.js"></script>
<script type="text/javascript" src="/main-app/scripts.bundle.js"></script>
<script type="text/javascript" src="/main-app/styles.bundle.js"></script>
<script type="text/javascript" src="/main-app/vendor.bundle.js"></script>
<script type="text/javascript" src="/main-app/main.bundle.js"></script>

【讨论】:

我刚刚在one of the closed issues 中找到了这个选项,经过测试,我可以正常工作了,谢谢! --deploy-url 值是否只影响 index.html 中的捆绑文件列表?【参考方案2】:

我遇到了类似的问题,我使用了ng build,它在输出路径中生成文件(index.html、main.js、polufills.js、styles.js 等)(在 angular.json 中设置了这个路径) - 资源/静态/。但是在 localhost:8080/ 上启动 tomcat 时我看不到任何 UI。我相信它无法加载任何静态文件,不确定我错过了什么或者我们如何才能使部署更容易。

我做了一个控制器来服务前端部分:

@GetMapping("/")
public String index() 
    return "forward:/index.html";

我的 index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello App</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

但是当tomcat 运行时仍然没有用户界面。即使我使用了ng build --deploy-url="/",它在 index.html 中创建的脚本为

<script type="text/javascript" src="/runtime.js"></script>
<script type="text/javascript" src="/polyfills.js"></script>
<script type="text/javascript" src="/styles.js"></script>
<script type="text/javascript" src="/vendor.js"></script>
<script type="text/javascript" src="/main.js"></script>

让它在http://localhost:8080/ 上显示任何 UI 内容仍然没有运气

【讨论】:

以上是关于如何强制 Angular cli 从绝对位置而不是 base-href 提供捆绑文件的主要内容,如果未能解决你的问题,请参考以下文章

angular-cli beta 14 - 如何导入环境?

Angular 10:VScode 在某些目录的绝对路径上出错,而​​不是其他目录

为啥 angular-cli 生成 ngOnInit 而无需输入函数结果?

Angular - 使用变换设置动画,但在动画完成时不应用绝对位置

如何更新 .json 文件而不在 Angular cli 中重建?

带有 Express js 的 Angular 2 cli