在TomCat上部署时，我的Angular + Spring应用程序路由不起作用 [英] My Angular + Spring Application routing does not work when deployed on TomCat

问题描述

我对棱角和弹簧非常陌生.我可能犯了一些愚蠢的错误. 我有Angular + Spring应用程序，它显示登录屏幕，然后显示菜单. 当未部署时(即当Angular和Spring并行运行时)，这可以完美地工作 但是，当我在tomcat上部署该应用程序时，它不会显示登录表单. 我按照以下步骤进行了部署-

I am very much new to angular and spring. I might have made some silly mistakes. I have Angular + Spring app which displays login screen and after that it shows menu. This works perfectly when not deployed (i.e. when Angular & Spring are running parallel) But when I deploy the app on tomcat, it does not show login form. I followed below steps for deployment -

1. ng build --base-href =./
2. 将所有文件从angular dist文件夹复制到spring静态文件夹
3. 在春季创建.war文件并将其部署在tomcat中

我的pom.xml

<groupId>com.techence</groupId>
        <artifactId>new</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <packaging>war</packaging>

        <name>LoginDemoBackend</name>
        <description>Demo project for Spring Boot</description>

        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.0.4.RELEASE</version>
            <relativePath/> <!-- lookup parent from repository -->
        </parent>

        <properties>
            <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
            <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
            <java.version>1.8</java.version>
        </properties>

        <dependencies>

        <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>

            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <scope>runtime</scope>
            </dependency>


            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-jdbc</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-configuration-processor</artifactId>
                <optional>true</optional>
            </dependency>

                <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-tomcat</artifactId>
                <version>1.5.7.RELEASE</version>
                <scope>provided</scope>
                </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>3.1.0</version>
        <scope>provided</scope>
    </dependency>

            <dependency>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.1.0</version>
                <type>maven-plugin</type>
            </dependency>
        </dependencies>

        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>


        <dependencyManagement>
            <dependencies>
                <dependency>
                    <groupId>javax.servlet</groupId>
                    <artifactId>servlet-api</artifactId>
                    <version>2.4</version>
                </dependency>
            </dependencies>
        </dependencyManagement>
    </project>

我的app.module.ts

My app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LoginFormComponent } from './login-form/login-form.component';
import { HttpModule } from '@angular/http';
import { FormsModule} from '@angular/forms';
import { LoginServiceService } from './login-service.service';
import { HttpClientModule } from '@angular/common/http';
import { MenubarComponent } from './menubar/menubar.component';
import { BranchCreationComponent } from './menubar/branch-creation/branch-
creation.component';
import { RouterModule,Routes } from '@angular/router';
import { LedgerCreationComponent } from './menubar/ledger-creation/ledger-creation.component';

import { LocationStrategy } from '@angular/common';

import { HashLocationStrategy } from '@angular/common';

import { ForgotPasswordComponent } from './forgot-password/forgot-
password.component';

const routes: Routes = [    
    { path: '', component : LoginFormComponent}, 

    { path: 'menubar', component: MenubarComponent }, 

    { path: 'branchCreation', component: BranchCreationComponent },

    { path: 'ledgerCreation', component: LedgerCreationComponent } 
];

@NgModule({
declarations: [

    AppComponent,

    LoginFormComponent,

    MenubarComponent,

    BranchCreationComponent,

    LedgerCreationComponent,

    ForgotPasswordComponent

  ],
  imports: [ 
    BrowserModule,

FormsModule,

HttpModule,

HttpClientModule,

RouterModule.forRoot(routes),

  ],


  providers: [
              LoginServiceService,
             { provide: LocationStrategy, useClass: HashLocationStrategy },
            ],
  bootstrap: [AppComponent]
})
export class AppModule { }

推荐答案

尝试将其添加到您的Spring Boot代码中:

Try to add this in your Spring Boot code:

@Bean
public ErrorViewResolver customErrorViewResolver() {
    final ModelAndView redirectToIndexHtml = new ModelAndView("forward:/index.html", Collections.emptyMap(), HttpStatus.OK);
    return (request, status, model) -> status == HttpStatus.NOT_FOUND ? redirectToIndexHtml : null;
}

它对我有效，甚至Angular路由也有效.我发现它

It works for me and even Angular routing is working. I found it here.

这篇关于在TomCat上部署时，我的Angular + Spring应用程序路由不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！