Question

我想构建一个Agular应用程序，但是我不知道如何构建项目结构。

我发现了两种构建应用程序的方法。我选择的第一种方法是将Spring Boot应用程序和Angular应用程序一起构建。第二种方法是建立单独的项目。通过第一种方法，我可以轻松访问静态资源，但是我认为这不是一个好方法。通过第二种方法，这很好，因为我可以将Spring Boot应用程序用于Web和移动客户端。

我需要有关如何构建类似于Spring的项目的建议吗？基本问题是如何在角度项目中有效利用静态资源？

Answer 1

我有一个项目，该项目使用Spring Boot作为后端，并且在前端使用了角形。对我们来说，最好使用弹簧靴来提供角度。但是您可以用另一种方式来做。

简而言之，spring boot充当API来执行CRUD，身份验证和我们需要的其他任务。要在春季提供角度服务，您需要使用ng build --prod构建项目，并在春季将此处生成的所有文件复制到静态文件夹。尽管如此，您仍需要调整路由并创建代理（我将显示给它）。

要调整路线，您可以包括以下配置：

@Configuration
public class AngularConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

      registry.addResourceHandler("/**/*")
        .addResourceLocations("classpath:/static/")
        .resourceChain(true)
        .addResolver(new PathResourceResolver() {
            @Override
            protected Resource getResource(String resourcePath,
                Resource location) throws IOException {
                Resource requestedResource = location.createRelative(resourcePath);
                return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
                : new ClassPathResource("/static/index.html");
            }
        });

    }
}

在开发阶段，构建角度非常无聊。因此，非常需要使用ng serve（当然会自动启动）。由于角度cli在localhost:4200上起作用，而在localhost:8080上起作用，因此您必须在以下地址之间建立代理：

1）在项目根目录中，您必须包含一个名为proxy.conf.json的文件，其中包含：

{
    "/api": {
        "target": "http://localhost:8080",
        "secure": false
    }
}

2）接下来，在文件package.json中，将"start": "ng serve"替换为"start": "ng serve --proxy-config proxy.conf.json"

您去了！应该可以。

最后，复制和粘贴构建非常无聊。因此，如果您使用的是Maven，则可以包含一条规则，以便在每次启动Spring时都可以使用。将其放入您的pom.xml：

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                      <execution>
                          <id>copy-resources</id>
                          <phase>validate</phase>
                          <goals><goal>copy-resources</goal></goals>
                          <configuration>
                              <outputDirectory>${basedir}/src/main/resources/static/</outputDirectory >
                              <resources>
                                  <resource>
                                      <directory>${basedir}/../frontend/dist</directory >
                                  </resource>
                              </resources>
                          </configuration>
                      </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

当然，您应该根据自己的项目设置路径。

TL; DR：您可以在开发阶段使用项目，并在春季将构建内容包括在内以进行生产。

如果您还有其他疑问，请告诉我！祝你好运。

Answer 2

我的个人建议；

JHipster是一个开发平台，用于生成，开发和部署Spring Boot + Angular / React Web应用程序和Spring微服务。

使用Spring Boot构建Angular应用程序

2 个答案: