带有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

它很好用，但是如果我进入一个网址并点击刷新按钮，我会得到Whitelabel Error Page.我知道这是因为URL与资源文件不匹配时，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?

推荐答案

您正确的说，需要为Spring未知的端点提供index.html的服务.然后安排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'
}

希望这会有所帮助:-)

Hope this helps :-)

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