How to load angular component by hitting URL in browser while using spring boot?

Question

I've created angular client and spring boot server app by following below links. https://vitalflux.com/spring-boot-angular-app-hello-world-one-deployable-war/ https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/

In my angular application, I've defined routes as below:

It works fine when I start angular development server using "ng serve" and hit below url in browser. http://localhost:4200/dashboard

However, when I start spring boot and then hit the below URL in browser, it does not work and throws error. http://localhost:8080/dashboard

My requirement is that when I hit the URL with angular route in browser, I should be able to load the specific angular component. My angular component doesn't need to get any data from rest API from backend and it is simple angular component.

Can someone please suggest how to fix this?

I'm new to spring boot and not sure how to make this working with angular routes. I've tried to follow below links and things are not very clear to me.

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

https://stackoverflow.com/questions/38516667/springboot-angular2-how-to-handle-html5-urls works like a charm. You may have to share some code. — chriopp, Oct 19 '18 at 11:30
Hi, I added all essential information for the running example to my answer, but too late ... — chriopp, Oct 19 '18 at 18:58

score 1 · Answer 1 · answered Oct 19 '18 at 17:10

I've found an answer. Below works as expected.

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

chriopp · Answer 2 · 2018-10-19T18:56:09.850

To prevent the spring-boot application from resolving your angular routes you can add a ViewController to redirect the routes to the angular application as explained in 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 { }

Dashboard component as created with ng generate component Dashboard

The angular application must be located besides the spring-boot project as requested by the resource plugin defined in the pom.xml.

|_ spring-boot

|_ angular-app

No, tag is present in my app.component.html. I need to load by hitting the url in browser and not by clicking on some link. — Jyoti Prasad Pal, Oct 19 '18 at 10:46
Added means to prevent spring-boot from resolving your angular routes. — chriopp, Oct 19 '18 at 11:07
My answer just came too late, you already had the solution by the time. It meant without the redirection by the ViewController spring-boot tried to resolve the ´/dashboard` URL. — chriopp, Oct 20 '18 at 15:11

kumar · Answer 3 · 2018-10-19T10:50:34.307

0

as i understand your question just create new file named proxy.config.json and paste below code in that file, place file next to .angular-cli.json

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

in app.component.ts file place below code in ngOnInit()

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

edited Oct 19 '18 at 10:50

answered Oct 19 '18 at 10:44

kumar

497
4
12

If there are many components such as dashboard which need to be loaded by hitting url in browser, will it work? – Jyoti Prasad Pal Oct 19 '18 at 17:08

How to load angular component by hitting URL in browser while using spring boot?

3 Answers3