通过 HTTP 客户端调用的动态内容未加载

Question

我正在尝试从 here 重新创建 spring-boot angularjs 示例应用程序。

当我使用 ./mnvw spring-boot:run 运行应用程序时，显示以下错误：

[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 '{}'.

我的源代码与上面提供的链接相同，但为清楚起见，打字稿文件：

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);
  }
}

html文件：

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

还有 java 控制器：

@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;
    }
}

app.module.ts 文件导入 HttpClientModule。当我将应用程序提供给 localhost:4200 时，站点会加载但没有数据。

这个想法是为 /resource 请求提供服务，并为客户端返回一个带有正确键的对象，但键不存在和/或客户端无法识别。

如何正确地将生成的 id 和 hello world 内容传递给数据对象？

Answer 1

导致问题的 package.json 存在细微差别。提供的链接中的一个使用“build”：“ng build”，而从 CLI 生成的默认链接使用“build”：“ng build --prod”。更改此设置后，示例正在运行。