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

Question

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

1. ng build --base-href=./
2. 将所有文件从 Angular dist 文件夹复制到 spring static 文件夹
3. 在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 { }

Answer 1

尝试将其添加到您的 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 .