使用spring boot时如何通过在浏览器中点击URL来加载角度组件？

Posted 2023-02-27

【中文标题】使用spring boot时如何通过在浏览器中点击URL来加载角度组件？

【英文标题】：How to load angular component by hitting URL in browser while using spring boot?

【发布时间】：2019-03-24 04:49:14

【问题描述】：

我通过以下链接创建了 Angular 客户端和 Spring Boot 服务器应用程序。 https://vitalflux.com/spring-boot-angular-app-hello-world-one-deployable-war/ https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/

在我的 Angular 应用程序中，我定义了如下路线：

当我使用“ng serve”启动角度开发服务器并在浏览器中点击下面的 url 时，它工作正常。 http://localhost:4200/dashboard

但是，当我启动 spring boot 然后在浏览器中点击以下 URL 时，它不起作用并引发错误。 http://localhost:8080/dashboard

我的要求是，当我在浏览器中使用角度路由点击 URL 时，我应该能够加载特定的角度组件。 我的 Angular 组件不需要从后端的 REST API 获取任何数据，它是简单的 Angular 组件。

有人可以建议如何解决这个问题吗？

我是 Spring Boot 的新手，不知道如何使它与角度路线一起使用。我试图按照下面的链接进行操作，但事情对我来说不是很清楚。

Spring Boot Angular application route from spring controller to angular component(view)

Spring Boot with AngularJS html5Mode

Angular routing doesn't work after deploy into a Springboot Application

Springboot/Angular2 - How to handle HTML5 urls?

How to integrate an Angular 4 app with a Spring Boot stack?

https://blog.jdriven.com/2016/10/integrate-angular-spring-boot-gradle/#support-angular-html5-mode

Spring Boot-Angular - Entering Url in Address Bar results in 404

【问题讨论】：

***.com/questions/38516667/… 就像一个魅力。您可能需要分享一些代码。

谢谢！让我看看我哪里错了。

嗨，我将运行示例的所有基本信息添加到我的答案中，但为时已晚......

【参考方案1】：

为了防止 spring-boot 应用程序解析您的角度路由，您可以添加 ViewController 以将路由重定向到角度应用程序，如Springboot/Angular2 - How to handle HTML5 urls? 中所述。

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ViewController 

   @RequestMapping( "/dashboard" )
   public String index() 
       return "forward:/index.html";
   

Angular5 app.module.js

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  RouterModule, Routes  from '@angular/router';

import  AppComponent  from './app.component';
import  DashboardComponent  from './dashboard/dashboard.component';

const appRoutes: Routes = [
  path: 'dashboard',
  component: DashboardComponent
]

@NgModule(
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes,
       enableTracing: true ,
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

使用ng generate component Dashboard 创建的仪表板组件

根据pom.xml 中定义的资源插件的要求，Angular 应用程序必须位于 spring-boot 项目之外。

|_ 弹簧启动

|_ 角度应用程序

【讨论】：

不， 标签存在于我的 app.component.html 中。我需要通过点击浏览器中的 url 而不是点击某个链接来加载。

好吧，那是另一回事。

添加了防止 spring-boot 解决您的角度路线的方法。

您所说的“添加防止弹簧启动的方法”是什么意思？

我的回答来得太晚了，到时候你已经有了解决方案。这意味着在没有 ViewController 重定向的情况下，spring-boot 尝试解析“/dashboard” URL。

【参考方案2】：

据我了解您的问题只是创建名为的新文件 proxy.config.json 并将下面的代码粘贴到该文件中，然后放置文件 到 .angular-cli.json

  "/": 
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug"
  

在 app.component.ts 文件中的 ngOnInit() 代码下方

this.http.get('/dashboard',someRequestOption).subscribe(res =>
 ---------------
)

【讨论】：

如果仪表盘等很多组件需要在浏览器中点击url来加载，是否可行？

【参考方案3】：

我找到了答案。下面按预期工作。

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ViewController 

   @RequestMapping( "/dashboard", "/contacts" )   
   public String index() 
       return "forward:/index.html";