Argthtjtr

I plan to set up a Spring-Angular application. I started right away with an Hello World-example to test out how to set up the environment. What I ended up doing:

Creating a Spring-Project and creating an Angular-application within this application. Now I can access Spring-REST-Controllers via the HttpClient Angular Module. (Code example see below).

The advantage: I can use mvn package to pack the Angular- and Spring-parts into one jar and simply deploy it on my tomcat. Sadly, when I run ng serve only the frontend is executed and I cannot access the data in my backend. Is there a way to set up my environment so that I can have the advantage of a one-project-solution and still use ng serve to test it out?

What I tried:

Pack the jar and execute it via terminal (java -jar %jar-file%) and using localhost:8080/hello as a path for my HttpClient instead of a simple /hello. That did not work out sadly.

The code I got so far:

app.component.ts

import { Component, OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http';



@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  title = 'HelloWorld';

  message: string;



  constructor(private http : HttpClient) {}



  ngOnInit() : void {

    //this is where I tried to use localhost:8080/hello instead

    this.http.get('/hello').subscribe( data => {

      console.log('DATA', data);

      this.message = data['message'];

    });

  }

}

Rest-Controller:

package com.example.helloWorld.controller;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.RestController;





@RestController

public class HelloWorldController {



    @GetMapping("/hello")

    public String sayHello() {

        return "{"message": "Hello, World!"}";

    }



}

pom.xml

http://maven.apache.org/xsd/maven-4.0.0.xsd">
4.0.0

<groupId>com.example</groupId>

<artifactId>helloWorld</artifactId>

<version>0.0.1-SNAPSHOT</version>

<packaging>jar</packaging>



<name>helloWorld</name>

<description>Demo project for Spring Boot</description>



<parent>

    <groupId>org.springframework.boot</groupId>

    <artifactId>spring-boot-starter-parent</artifactId>

    <version>2.1.0.RELEASE</version>

    <relativePath/> <!-- lookup parent from repository -->

</parent>



<properties>

    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

    <java.version>1.8</java.version>

</properties>



<dependencies>



    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-test</artifactId>

        <scope>test</scope>

    </dependency>

    <dependency>

        <groupId>org.springframework.restdocs</groupId>

        <artifactId>spring-restdocs-mockmvc</artifactId>

        <scope>test</scope>

    </dependency>

 <dependency>

  <groupId>org.springframework.boot</groupId>

  <artifactId>spring-boot-autoconfigure</artifactId>

  <version>2.1.0.RELEASE</version>

  <type>jar</type>

 </dependency>

 <dependency>

  <groupId>org.springframework.boot</groupId>

  <artifactId>spring-boot-starter-web</artifactId>

 </dependency>

</dependencies>



<build>

    <plugins>

                    <plugin>

                        <groupId>org.codehaus.mojo</groupId>

                        <artifactId>exec-maven-plugin</artifactId>

                        <executions>

                            <execution>

                                <phase>validate</phase>

                                <goals>

                                    <goal>exec</goal>

                                </goals>

                            </execution>

                        </executions>

                        <configuration>

                            <executable>ng</executable>

                            <workingDirectory>src/main/ui</workingDirectory>

                            <arguments>

                                <argument>build</argument>

                            </arguments>

                        </configuration>

                    </plugin>

        <plugin>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-maven-plugin</artifactId>

        </plugin>

    </plugins>

</build>

To do like this

this.http.get('/hello').subscribe( data => {

      console.log('DATA', data);

      this.message = data['message'];

    });

You need to do some proxy configurations.
Create one proxy-config.json file inside your project in the same directory where package.json is there.

{

    "/": {

        "target": "http://localhost:8080",

        "secure": false

    }

}

and in package.json inside scripts update "start" command with "start": "ng serve --proxy-config proxy-config.json",
After that try npm start command to run your project.