Fatal编程技术网
  • java/
  • Java 白色标签错误第404页弹簧启动角度5

Java 白色标签错误第404页弹簧启动角度5

java angular spring-mvc spring-boot

Java 白色标签错误第404页弹簧启动角度5,java,angular,spring-mvc,spring-boot,Java,Angular,Spring Mvc,Spring Boot,我正在开发一个web应用程序，后端是spring boot，前端是angular 5，运行在4200端口上。我在angular 5中有四个组件：登录、家庭应用程序、搜索。当我启动SpringBoot项目和angular项目时，我能够通过给出http://localhost:4200。因此，它正在导航到http://localhost:4200/login 但是当我刷新那个页面时，我得到下面这个错误。 这是我的密码： proxy.conf.json { "/": {

我正在开发一个web应用程序，后端是spring boot，前端是angular 5，运行在4200端口上。我在angular 5中有四个组件：登录、家庭应用程序、搜索。当我启动SpringBoot项目和angular项目时，我能够通过给出
http://localhost:4200
。因此，它正在导航到
http://localhost:4200/login

但是当我刷新那个页面时，我得到下面这个错误。

这是我的密码：

proxy.conf.json

    {
    "/": {
        "target": "http://localhost:8081",
        "secure": false
    }
}
package.json：

 {  "name": "cyber-security-vw",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.5",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}
Index.html

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CyberSecurityVw</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
弹簧靴主类

package com.vl.cybersecurity;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Configuration;

@Configuration
@EnableAutoConfiguration
@SpringBootApplication
public class CyberSecurityApplication {

    public static void main(String[] args) {
        SpringApplication.run(CyberSecurityApplication.class, args);
    }
}
其他套餐：

com.vl.cybersecurity.controller     
com.vl.cybersecurity.entity
com.vl.cybersecurity.service
com.vl.cybersecurity.dao
您需要将所有“notFound”请求重定向到“index.html”。看看这个话题来解决你的问题-

对不起，伙计们，我来不及回答这个问题了。在我当前使用（Angular 7+Spring boot）开发web应用程序的过程中，我在刷新页面时，以及在复制URL和粘贴到浏览器新选项卡的另一个场景中，也面临同样的问题（白标签错误）

原因： 我们必须理解为什么会发生这种情况，因为当您刷新或复制并粘贴URL时，浏览器实际上不知道在哪里导航请求的路由/路径，因为我们都知道我们的Angular应用程序已经部署，并且它正在tomcat等服务器上运行。。。 因此，服务器不知道从浏览器中导航特定路由请求的位置。因此，我们必须以某种方式告诉服务器

解决方案： 因此，我得到了一个对我来说很好的解决方案，在阅读了很多之后，我在我的控制器课程中添加了以下代码。（*pic1） 这实际上将来自浏览器的路由请求重定向到index.html，从这里开始，Angular本身将处理路由。因此不会出现更多的白标签错误

在构建Angular应用程序时，您还必须正确定义index.html的重定向路径，我们可能已经给出了输出目录文件夹路径 所有TS文件都转换为简单的JS文件。默认情况下，spring boot将查看静态文件夹。在我的情况下，您可以参考我在angular应用程序中的angular.json（*PIC 2）文件中给出的第16行（输出目录路径）。在构建angular应用程序时，静态文件夹将自动在resources文件夹下创建。在静态文件夹内，index.html文件将自动生成

希望这对你/某人有帮助。
谢谢各位。

我也面临同样的问题。 这是对我有效的解决方案

我在我的应用程序路由模块中启用了哈希（#）

如何启用

步骤1：打开app routing.module.ts 步骤2：在RouterModule.forRoot中添加路由时，可选参数useHash作为真值

 @NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule],
})
步骤3：保存文件。应该解决这个问题。您在url中注意到的唯一不同之处是端口号
http://localhost:4800/#/dashboard

还有一种方法可以做同样的事情，请检查

当您获得“白标错误页面”时，是否可以从应用程序中提供stacktrace？此错误由服务器端返回。您是否在spring boot项目中部署了
dist
文件夹？您是否尝试通过邮递员登录。是的，我在src/main/resources/static文件夹中部署了dist文件夹文件。来自postman，它正在与8080 port@hrdkisback一起工作。如果您已修复此错误，请提供解决方案。虽然这可能从理论上回答了问题，但请在此处包含答案的基本部分，并提供链接以供参考。我根据理解人员简要解释了一点。您能简要说明一下您的解释吗，我没有得到它@KarthikKarnan@ThakkarDarshan实际上我想说的是你需要转发所有请求（直接从浏览器而不是通过点击任何路由链接）一旦Angular应用程序成功构建，将在输出目录中生成index.html。我希望您了解一些内容。如果不了解，请随时询问。 
com.vl.cybersecurity.controller     
com.vl.cybersecurity.entity
com.vl.cybersecurity.service
com.vl.cybersecurity.dao

 @NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule],
})