java – 我的Angular Spring应用程序路由在TomCat上部署时不起作用

我非常喜欢棱角分明和弹簧.我可能犯了一些愚蠢的错误.
我有Angular Spring应用程序,它显示登录屏幕,然后显示菜单.
未部署时(即当Angular& Spring并行运行时),这种方法非常有效
但是当我在tomcat上部署应用程序时,它不会显示登录表单.
我按照以下步骤进行部署 –

> ng build –base-href =./
>将angular dist文件夹中的所有文件复制到spring静态文件夹
>在spring中创建.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

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代码中添加：

@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路由工作.我发现它here.