Question

我已经在Angular中开发了一个Project，并使用命令ng build --base-href /myApp/进行了构建。然后，在刷新myApp页面后，将其部署到了Tomcat服务器上，但未找到404。我知道服务器不知道客户端路由，因此我必须告诉他，他必须返回“ 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文件，包括angular 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

404：在Tomcat上部署Angular项目？

1 个答案: