带有 Spring Boot 的 Angular CLI

Question

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

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

Spring boot 应用类：

@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文件：

server.contextPath=/
server.port=80

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

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

Answer 1

您是正确的，index.html 需要返回给 Spring 未知的端点。然后安排 Angular 应用管理未知路由。

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

添加一个config 目录并在其中添加一个Java 文件WebMvcConfig（例如），其中包含以下内容：

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;
        }
      });
  }
}

我认为您还必须为组件扫描指定配置包。不妨先试试看是否可行。

@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 中的内容：

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'
}

希望这会有所帮助:-)

Answer 2

Here 你可以找到我的 Spring Boot 2 和 Angular 6 入门项目。

Spring Boot 应用使用SPRING INITIALIZR 创建，Angular 应用使用Angular CLI 创建。