Сборка приложения Angular с загрузкой Spring

Question

Я хочу создать приложение Agular, но я не знаю, как создать структуру проекта.

Я нашел 2 способа создания приложения.Первый способ, который я выбрал, - это совместное создание загрузочного приложения Spring и приложения Angular.Вторым способом было построить отдельные проекты.С первым способом я могу легко получить доступ к статическим ресурсам, но я думаю, что это не очень хороший способ.Что касается второго способа, то это хорошо, потому что я могу использовать загрузочное приложение Spring для веб-клиентов и мобильных клиентов.

Нужны ли мне советы по созданию проектов, подобных Spring-agular?Основная проблема в том, как эффективно использовать статические ресурсы в угловом проекте?

Answer 1

У меня есть проект, который использует 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 (с пружиной, конечно).Так как angular 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, вы можете включить правило, чтобы сделать его для вас каждый раз, когда вы начинаете весну.Поместите его в 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 и микросервисов Spring.