问题描述
我想将Angular 2前端构建并部署到Tomcat应用程序服务器.首先，我完全按照以下介绍的步骤进行操作: https://angular.io/docs/ts/latest/guide/webpack.html .
I want to build and deploy my Angular 2 front end to a Tomcat application server. For getting started I've followed exactly the steps of the following introduction: https://angular.io/docs/ts/latest/guide/webpack.html.
因此，我具有以下项目结构(所有文件与上面的简介提到的内容完全相同):
So I have the following project structure (all files are exactly as in the introduction mentionend above):
angular2-webpack
---配置
------- helpers.js
------- karma.conf.js
------- karma-test-shim.js
------- webpack.common.js
------- webpack.dev.js
------- webpack.prod.js
------- webpack.test.js
--- dist
--- node_modules
---公共
------- css
-------------- styles.css
-------图像
-------------- angular.png
--- src
------- app
-------------- app.component.css
-------------- app.component.html
-------------- app.component.spec.ts
-------------- app.component.ts
-------------- app.module.ts
------- index.html
------- main.ts
------- polyfills.ts
------- vendor.ts
---类型
--- karma.conf.js
--- package.json
--- tsconfig.json
--- typings.json
--- webpack.config.js
angular2-webpack
---config
-------helpers.js
-------karma.conf.js
-------karma-test-shim.js
-------webpack.common.js
-------webpack.dev.js
-------webpack.prod.js
-------webpack.test.js
---dist
---node_modules
---public
-------css
--------------styles.css
-------images
--------------angular.png
---src
-------app
--------------app.component.css
--------------app.component.html
--------------app.component.spec.ts
--------------app.component.ts
--------------app.module.ts
-------index.html
-------main.ts
-------polyfills.ts
-------vendor.ts
---typings
---karma.conf.js
---package.json
---tsconfig.json
---typings.json
---webpack.config.js
npm start 分别在控制台或Webstorm上webpack-dev-server --inline --progress --port 3000，并且按预期工作
npm start respectively webpack-dev-server --inline --progress --port 3000 on the console or in Webstorm →works as expected
当我分别运行 npm build 时，它会正确构建应用程序，并且输出包文件将按预期方式物理放置在dist文件夹中.
When I run npm build respectively rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail it builds the app without errors and the output bundle files get physically placed in the dist folder as expected.
dist
---资产
------- angular.png
--- app.css
---app.css.map
--- app.js
---app.js.map
--- index.html
--- polyfills.js
---polyfills.js.map
--- vendor.js
---vendor.js.map
dist
---assets
-------angular.png
---app.css
---app.css.map
---app.js
---app.js.map
---index.html
---polyfills.js
---polyfills.js.map
---vendor.js
---vendor.js.map
接下来，我将dist文件夹的内容复制到Tomcat 9.0的webapps目录中.当我尝试访问已安装的应用程序时，出现.css-和.js文件的404错误(在所附图片中).它会尝试从错误的URL中获取文件，并且→"/obv/"丢失.
Next I copied the content of the dist folder to the webapps directory of a Tomcat 9.0. When I try to access the installed app I get an 404 error for the .css- and .js-files (which can be seen in the attached picture).It tries to get the files from the wrong URLs →"/obv/" is missing.
我真的被困在这里，我感到我已经尝试了有关该主题的所有内容.
I'm really stuck here and I have the feeling that I've tried already everything I could find in the Internet regarding this topic.
有人可以告诉我我做错了什么吗?预先谢谢你.
Could someone please tell me what I'm doing wrong? Thank you in advance.
推荐答案
问题与标记<base href="/" />有关.当使用诸如tomcat之类的网络服务器或尝试使用firefox index.html从文件系统直接加载应用程序时，这是错误的.必须将其更改为<base href="./" />.当应用程序仍然有问题时，请检查脚本文件的导入方式.我尝试将 angular2-webpack 与tomcat一起使用，并且还需要更改所有脚本标签，以免在src中使用前导斜杠属性.
The problem is related to the tag <base href="/" />. This is just wrong when using a webserver like tomcat or trying to load the app directly from filesystem with firefox index.html. This must be changed to <base href="./" />. When the app still has problems check how the script files are imported. I tried to use angular2-webpack with tomcat and also needed to change all script tags to not use a leading slash in there src attribute.
<script src="js/vendor.js" ></script>
对于webpack，其行为由属性output.publicPath控制.在 angular2文档和设置为
With webpack the behavior is controlled by the attribute output.publicPath. In the angular2 documentation and in the angular2-webpack this is set to
output.publicPath="/"
这会导致链接中的绝对路径.删除后，webpack将使用相对路径，脚本和图像的链接将起作用.
Which leads to absolute path in the links. When removed webpack will use relative paths and the links for scripts and images work.
这篇关于将带有Webpack的Angular 2 App部署到Tomcat-404错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！