404：在 Tomcat 上部署 Angular 项目？

Question

我在 Angular 中开发了一个项目，并使用命令 ng build --base-href /myApp/ 构建了它。然后我将它部署在我的 Tomcat 服务器上，刷新 myApp 的页面后，我得到 404 not found。我知道服务器不知道客户端路由，所以我必须告诉他他必须回到“index.html”。

这就是我这样配置“tomcat/conf/web.xml”的原因：

<error-page> 
    <error-code>404</error-code>
    <location>/myApp/index.html</location>
</error-page>

但问题仍然存在。

你知道如何解决这个问题吗？

Answer 1

您需要重新路由到 index.html。这是一个已知问题，您可以在此link 中找到更多信息。另外我建议使用urlrewrite 和grunt 来复制所需的文件。

首先您需要创建一个名为 WEB-INf 的文件夹。在该文件夹中，您需要放置 urlrewrite 库和 urlrewrite.xml 文件。使用 grunt 你可以创建一个包含所有内容的 war 文件，包括使用命令的角度 dist 文件夹。

这是 urlrewrite.xml 文件的示例：

<urlrewrite>

<rule match-type="wildcard">
    <from>
        /home //example route, all www.yourapp.com/home would redirect to home using the index.html
    </from>
    <to last="true">
        index.html
    </to>
</rule>
<rule match-type="wildcard">
    <from>
        /otherroute  //same but with other route and no using * wont work
    </from>
    <to last="true">
        index.html
    </to>
</rule>

这是 gruntfile.js 的一个示例：

module.exports = function(grunt) {

grunt.loadNpmTasks('grunt-war');

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    war: {
        target: {
            options: {
                war_dist_folder: 'dist', //war creation destination
                war_name: 'warname',
                webxml_display_name: 'YourAppsname',
                webxml_webapp_version: 'YoursAppversionnumber',
                webxml_webapp_extras: [
                    "<filter>\n<filter-name>UrlRewriteFilter</filter-name>\n<filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>\n</filter>\n<filter-mapping>\n<filter-name>UrlRewriteFilter</filter-name>\n<url-pattern>/*</url-pattern>\n<dispatcher>REQUEST</dispatcher>\n<dispatcher>FORWARD</dispatcher>\n</filter-mapping>"
                ],
            },
            files: [{
                    expand: true,
                    cwd: 'dist',
                    src: ['**'],
                    dest: ''
                },
                {
                    expand: true,
                    cwd: 'src/assets/deployment', //folder where the lib folder and urlrewrite.xml file are in your project
                    src: ['**'],
                    dest: 'WEB-INF'
                }
            ]
        }
    }
});

grunt.registerTask('default', ['war']);};

这是运行命令：

ng build --prod --base-href=/yourapphref/ && grunt