404: Развернуть угловой проект на Tomcat?

Question

Я разработал проект на Angular и построил его с помощью команды ng build --base-href /myApp/. Затем я развернул его на своем Tomcat-сервере, после обновления страницы моего myApp я получаю 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. Это известная проблема, и вы можете найти дополнительную информацию по этой ссылке . Также я бы порекомендовал использовать urlrewrite и grunt для копирования необходимых файлов.

Сначала вам нужно создать папку с именем WEB-INf. Внутри этой папки вам нужно поместить библиотеку urlrewrite и файл urlrewrite.xml. Используя grunt, вы можете создать военный файл со всеми, включая угловую папку 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