带有 Spring Boot 的 Angular CLI [英] Angular CLI with Spring Boot

问题描述

我有 2 个项目.我使用 Angular-cli 构建的 Angular2 应用程序和仅为 Angular2 应用程序提供服务的 Spring Boot 应用程序.我使用 ng build 构建了 Angular2 应用程序，它生成了一个 dist 文件夹.然后我将 dist 文件夹中的内容放在 src/main/resources/static 中的 Spring Boot 应用程序中.

I have 2 projects. An Angular2 app which I build with Angular-cli and a Spring Boot app which will only serve the Angular2 app. I build the Angular2 app with ng build which generates a dist folder. I then put the content of the dist folder in the Spring Boot app inside src/main/resources/static.

我的 Spring Boot 应用程序有两个文件.

My spring boot app has two files.

Spring 启动应用程序类:

The Spring boot application class :

@SpringBootApplication
public class SpringBoot extends SpringBootServletInitializer {

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(SpringBoot.class);
    }

    public static void main(String[] args) throws Exception {
        SpringApplication.run(SpringBoot.class, args);
    }
}

和 application.properties 文件:

And the application.properties file:

server.contextPath=/
server.port=80

它运行良好，但如果我转到一个 url 并点击刷新按钮，我会得到 Whitelabel Error Page.我知道这是因为当 URL 与资源文件不匹配时，它们不会为 index.html 提供服务.

It works well but if I go to an url and hit the refresh button, I get the Whitelabel Error Page. I know it's because the URLs are not serving the index.html when they don't match a resource file.

如果 url 与资源文件不匹配，我如何配置我的 Spring Boot 应用程序以提供 index.html 服务?

How can I configure my Spring Boot app to serve index.html if the url doesn't match a resource file?

推荐答案

您是对的，index.html 需要为 Spring 未知的端点提供服务.然后安排 Angular 应用管理未知路由.

You are correct that index.html needs to be served back for endpoints unknown to Spring. Then arrange for the Angular app to manage unknown routes.

我使用 WebMvcConfigurerAdapter 处理这种情况.还将静态内容文件类型放在此处.

I handle this situation with a WebMvcConfigurerAdapter. Also put static content file types in here.

添加一个 config 目录，并在其中添加一个带有以下内容的 Java 文件 WebMvcConfig(例如):

Add a config directory and in it add a Java file WebMvcConfig (for example) with this content:

package com.yourdomain.yourapp.config;

import org.springframework.boot.autoconfigure.web.ResourceProperties;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.io.Resource;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.resource.PathResourceResolver;

import java.io.IOException;
import javax.inject.Inject;

@Configuration
@EnableConfigurationProperties({ ResourceProperties.class })
public class WebMvcConfig extends WebMvcConfigurerAdapter {

  @Inject
  private ResourceProperties resourceProperties = new ResourceProperties();

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    Integer cachePeriod = resourceProperties.getCachePeriod();

    final String[] staticLocations = resourceProperties.getStaticLocations();
    final String[] indexLocations = new String[staticLocations.length];
    for (int i = 0; i < staticLocations.length; i++) {
      indexLocations[i] = staticLocations[i] + "index.html";
    }
    registry.addResourceHandler(
      "/**/*.css",
      "/**/*.html",
      "/**/*.js",
      "/**/*.json",
      "/**/*.bmp",
      "/**/*.jpeg",
      "/**/*.jpg",
      "/**/*.gif",
      "/**/*.ico",
      "/**/*.png",
      "/**/*.ttf",
      "/**/*.wav",
      "/**/*.mp3",
      "/**/*.eot",
      "/**/*.svg",
      "/**/*.woff",
      "/**/*.woff2",
      "/**/*.map"
    )
      .addResourceLocations(staticLocations)
      .setCachePeriod(cachePeriod);

    registry.addResourceHandler("/**")
      .addResourceLocations(indexLocations)
      .setCachePeriod(cachePeriod)
      .resourceChain(true)
      .addResolver(new PathResourceResolver() {
        @Override
        protected Resource getResource(String resourcePath, Resource location) throws IOException {
          return location.exists() && location.isReadable() ? location : null;
        }
      });
  }
}

我认为您还必须为组件扫描指定配置包.也许先不试一下，看看它是否有效.

I think you will also have to specify the config package for component scan. Maybe try without first and see if it works.

@SpringBootApplication
@ComponentScan( basePackages = { "com.yourdomain.yourapp.config" })
public class SpringBoot extends SpringBootServletInitializer {

  @Override
  protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
    return application.sources(SpringBoot.class);
  }

  public static void main(String[] args) throws Exception {
    SpringApplication.run(SpringBoot.class, args);
  }
}

如果您缺少依赖项.这是我在 build.gradle 中的内容:

In case your missing dependencies. This is what I have in my build.gradle:

dependencies {
  compile group: 'org.springframework.boot', name: 'spring-boot-starter-web'
  compile group: 'javax.inject', name: 'javax.inject', version: '1'

  optional group: 'org.springframework.boot', name: 'spring-boot-configuration-processor'

  providedRuntime group: 'org.springframework.boot', name: 'spring-boot-starter-tomcat'

  testCompile group: 'org.springframework.boot', name: 'spring-boot-starter-test'
}

希望这有帮助:-)

这篇关于带有 Spring Boot 的 Angular CLI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！