Как загрузить угловой компонент, нажав URL в браузере при использовании весенней загрузки?

Question

Я создал приложение для углового клиента и сервера весенней загрузки, перейдя по ссылкам ниже.https://vitalflux.com/spring-boot-angular-app-hello-world-one-deployable-war/ https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/

В моем угловом приложении я определил маршруты следующим образом:

Этоработает нормально, когда я запускаю угловой сервер разработки, используя "ng serve" и нажимаю ниже URL в браузере.http://localhost:4200/dashboard

Однако, когда я запускаю весеннюю загрузку, а затем нажимаю на URL-адрес ниже в браузере, он не работает и выдает ошибку.http://localhost:8080/dashboard

Мое требование заключается в том, чтобы при обращении к URL с угловым маршрутом в браузере я мог загружать определенный угловой компонент.Моему угловому компоненту не нужно получать какие-либо данные из API остальных из бэкэнда, и это простой угловой компонент.

Может кто-нибудь подсказать, как это исправить?

Я новичок в веснезагрузиться и не уверен, как заставить это работать с угловыми маршрутами.Я пытался перейти по ссылкам ниже, и вещи мне не очень понятны.

Пружинная загрузка Угловой путь применения от контроллера пружины к угловому компоненту (вид)

Пружинная загрузка с AngularJS html5Mode

Угловая маршрутизация не работает после развертывания в приложении Springboot

Springboot / Angular2 - Как обрабатывать URL-адреса HTML5?

Какинтегрировать приложение Angular 4 со стеком Spring Boot?

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

Spring Boot-Angular - при вводе URL-адреса в адресной строке получается 404

Answer 1

, как я понимаю ваш вопрос, просто создайте новый файл с именем 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 =>{
 ---------------
})

Answer 2

Я нашел ответ.Ниже работает как положено.

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

Answer 3

Чтобы приложение весенней загрузки не разрешало ваши угловые маршруты, вы можете добавить ViewController для перенаправления маршрутов в угловое приложение, как описано в Springboot / Angular2 - Как обрабатывать URL-адреса HTML5? .

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.

| _ spring-boot

| _ angular-app