当前位置: 首页 > 知识库问答 >
问题:

如何强制Angular cli从绝对位置服务捆绑文件,而不是基href

濮赤岩
2023-03-14

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

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

我使用的cli build命令是:

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

它在webapp中创建主文件夹,并带有索引。包含以下脚本标记的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。捆js

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

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

理想的解决方案如下:

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

我想也许添加一个脚本,将在ng构建后执行,这将修改脚本标记,但这是一个肮脏的解决方案,也不会与ng构建--watch一起工作,这对开发至关重要...

以下是映射/main请求的Spring controller函数,仅供参考:

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

谢谢

共有2个答案

蒋航
2023-03-14

我遇到了一个类似的问题,我使用了ng build,它在输出路径中生成文件(index.html、main.js、polufills.js、styles.js等)(已经在angular.json中设置了这个路径)——resource/static/。但在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=“/”它还是在索引中创建了脚本。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/上显示任何用户界面内容

璩俊雅
2023-03-14

以下是ng buildwiki:https://github.com/angular/angular-cli/wiki/build

请使用--部署-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>
 类似资料:
  • 我的经理交给我一个PHP代码点火器项目,我在PHP方面没有可靠的经验。我正在尝试下载一个新创建的。来自服务器的csv文件。但是当我下载它时,它没有该文件的内容,而是显示我的文件的标题条带。html页面,我在那里做整个编码。 我正在尝试使用强制下载技术,互联网上到处都提到过。

  • 问题内容: 和CSS 和有什么不一样?那你什么时候应该使用呢? 问题答案: CSS绝对定位 绝对定位是最容易理解的。您从CSS 属性开始: 这告诉浏览器应将要定位的所有内容从文档的正常流程中删除,并将其放置在页面上的确切位置。它不会影响HTML中它之前或之后的元素在网页上的放置方式,但是除非您重写它,否则 它将 取决于其父级的位置。 如果你想一个元素从文档窗口的顶部10个像素的位置,你会使用偏移与

  • 问题内容: 我有3个要素。 第一个更大(包装)并具有 第2个相对于第1个相对位置绝对定位(并包含在第1个中) 第3个包含在第2个中,并且也具有绝对定位。 为什么第3个位置相对于第2个绝对位置(这也是第1个位置的绝对位置)而不是相对位置的第一个位置? 因为3rd 是绝对定位到2nd的绝对定位。 问题答案: 因为就像重置孩子的相对位置一样。 这是无法解决的-如果您希望第三个相对于第一个绝对定位,则必须

  • 问题内容: 因此,现在我正在使用一个原型,其中我们将webpack(用于构建.tsx文件和复制.html文件)与webpack-dev- server之间的组合用于开发服务。您可以假设我们也将React和ReactDOM用作两个库依赖项。我们当前的构建输出是以下结构: 这会将所有模块(包括库相关性放入大捆绑文件中)放置。我希望最终结果如下所示: 我在index.html和.tsx文件的import

  • 在下面的onclick事件中,我点击API获取文件路径,然后将该文件路径传递给download方法---- 下载方法为:- 上面的代码我得到错误,因为不创建元素。请帮忙解决这个问题。

  • 我的测试程序从以下URL运行HTTP服务器:HTTP://www.herongyang.com/jdk/https-httpsechoer-better-https-server.html 请帮助如何使java只接受TLS1.2连接。