I am trying to recreate the spring-boot angularjs example application from here.
When I run the application using ./mnvw spring-boot:run the following error shows:
[ERROR] ERROR in src/app/app.component.html(6,18): : Property 'id' does not exist on type '{}'.
[ERROR] src/app/app.component.html(7,23): : Property 'content' does not exist on type '{}'.
My source code is the same as the link provided above but for clarity, the typescript file:
import { Component } from '@angular/core';
import {HttpClient} from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Demo';
data = {};
constructor(private http: HttpClient) {
http.get('resource').subscribe(data => this.data = data);
}
}
The html file:
<div style="text-align:center"class="container">
<h1>
Welcome {{title}}!
</h1>
<div class="container">
<p>Id: <span>{{data.id}}</span></p>
<p>Message: <span>{{data.content}}</span></p>
</div>
</div>
And the java controller:
@SpringBootApplication
@Controller
public class AngularApplication {
public static void main(String[] args) {
SpringApplication.run(AngularApplication.class, args);
}
@GetMapping("/resource")
@ResponseBody
public Map<String, Object> home() {
Map<String, Object> model = new HashMap<String, Object>();
model.put("id", UUID.randomUUID().toString());
model.put("content", "Hello World");
return model;
}
}
The app.module.ts file imports HttpClientModule. When I ng serve the application to localhost:4200 the site loads but without data.
The idea is to service the /resource request and return an object with the right keys for the client, but the keys do not exist and/or are not being recognized by the client.
How do I correctly pass the generated id and hello world content to the data object?
