angular - Angular 6 + Spring Boot。地址栏中没有 index.html 的应用程序外观错误
问题描述
请告诉我为什么会出现以下问题： 组装应用程序后，此窗口会出现在浏览器中。
如果您在地址栏中添加，应用程序将正确加载index.html但是当您尝试刷新页面时，会转到 Whitelabel 错误页面。我不知道展示什么更好，除了angular.jsonand的内容tconfig.json（如果您需要展示其他内容 - 请告诉我）。谢谢大家。
角.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"asterisk-prime-ui": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "../../../../asterisk-prime/src/main/resources/static/asterisk-prime-ui",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
},
{
"glob": "favicon.ico",
"input": "src",
"output": "/"
}
],
"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
},
{
"input": "src/styles/global.scss"
}
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "asterisk-prime-ui:build"
},
"configurations": {
"production": {
"browserTarget": "asterisk-prime-ui:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "asterisk-prime-ui:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
},
{
"input": "src/styles/global.scss"
}
],
"scripts": [],
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
},
{
"glob": "favicon.ico",
"input": "src",
"output": "/"
}
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"asterisk-prime-ui-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "asterisk-prime-ui:serve"
},
"configurations": {
"production": {
"devServerTarget": "asterisk-prime-ui:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "asterisk-prime-ui",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "/",
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es6",
"es7",
"dom"
],
"typeRoots": [
"node_modules/@types"
]
},
"exclude": [
"../../node_modules"
]
}
另外，如果你添加到地址栏.../index.html，那么工作时会出现错误
core.js.pre-build-optimizer.js:1673 ERROR Error: Uncaught (in promise): Error: Loading chunk modules-devices-devices-module-ngfactory failed.
(error: http://localhost:8080/asterisk_prime/modules-devices-devices-module-ngfactory.js)
Error: Loading chunk modules-devices-devices-module-ngfactory failed.
(error: http://localhost:8080/asterisk_prime/modules-devices-devices-module-ngfactory.js)
at HTMLScriptElement.onScriptComplete (bootstrap:134)
at HTMLScriptElement.wrapFn (zone.js.pre-build-optimizer.js:1332)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js.pre-build-optimizer.js:423)
at Object.onInvokeTask (core.js.pre-build-optimizer.js:3815)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js.pre-build-optimizer.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js.pre-build-optimizer.js:195)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js.pre-build-optimizer.js:498)
at invokeTask (zone.js.pre-build-optimizer.js:1744)
at HTMLScriptElement.globalZoneAwareCallback (zone.js.pre-build-optimizer.js:1770)
at resolvePromise (zone.js.pre-build-optimizer.js:831)
at resolvePromise (zone.js.pre-build-optimizer.js:788)
at zone.js.pre-build-optimizer.js:892
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js.pre-build-optimizer.js:423)
at Object.onInvokeTask (core.js.pre-build-optimizer.js:3815)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js.pre-build-optimizer.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js.pre-build-optimizer.js:195)
at drainMicroTaskQueue (zone.js.pre-build-optimizer.js:601)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js.pre-build-optimizer.js:502)
at invokeTask (zone.js.pre-build-optimizer.js:1744)
更新
补充说明：Angular-application 以组装形式用作 Spring Boot 后端的静态资源。应用程序本身被收集在一个战争文件中并部署到服务器上。
解决方案
该决定要求后端（Spring Boot）和前端（Angular 6）都进行更改。
1.后端
在 Spring Boot 部分，所有更改都是为了调整 WebMvc 设置。特别是，更改了ViewResolver：
@Bean
public ViewResolver internalResourceViewResolver()
{
InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
viewResolver.setViewClass(InternalResourceView.class);
return viewResolver;
}
index.html并且还在映射时添加了一个“翻转” /（事实证明，这以它自己的方式，是使用单页应用程序（使用 Angular、React 或类似的）时的标准机制：
@Override
public void addViewControllers(ViewControllerRegistry registry)
{
registry.addViewController("/").setViewName("index.html");
}
最终配置视图：
@Configuration
@EnableWebMvc
@ComponentScan(basePackages = {"com.prime.asterisk.web.controller"})
public class WebMvcConfig implements WebMvcConfigurer
{
@Value("#{'${web.mvc.crossOrigins}'.split(',')}")
private String[] crossOrigins;
private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
"classpath:/META-INF/resources/",
"classpath:/resources/",
"classpath:/static/",
"classpath:/public/",
"classpath:/static/asterisk-prime-ui/"
};
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry)
{
if (!registry.hasMappingForPattern("/**"))
{
registry.addResourceHandler("/**")
.addResourceLocations(CLASSPATH_RESOURCE_LOCATIONS);
}
}
@Override
public void addCorsMappings(CorsRegistry registry)
{
registry.addMapping("/api/**")
.allowedOrigins(crossOrigins)
.allowCredentials(true)
.maxAge(3600);
}
@Override
public void addViewControllers(ViewControllerRegistry registry)
{
registry.addViewController("/").setViewName("index.html");
}
@Bean
public ViewResolver internalResourceViewResolver()
{
InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
viewResolver.setViewClass(InternalResourceView.class);
return viewResolver;
}
}
2.前端
在部分 UI 中，还需要进行编辑。
首先，为构建脚本添加base-href和属性。deploy-url在我的情况下，使用的模板是：/<application-context>/， where <application-context>is asterisk-prime（对我来说）。一般来说，在大多数情况下，放置base-href属性就足够了，但在我的情况下，这还不够，因为项目资产没有使用 base-href 作为 src 属性的前缀。也许还有另一种解决方案，但在我的情况下，添加属性就足够了deploy-url。脚本的最终视图：
...
"build-prod": "ng build --prod --base-href /asterisk-prime/ --deploy-url /asterisk-prime/",
...
"build-dev": "ng build --aot --build-optimizer --base-href /asterisk-prime/ --deploy-url /asterisk-prime/",
...
PS .: AppConfigRoutesFactory- 具有返回路由的静态方法的类（只需将您的路由传递到那里）
的最终视图AppRoutesModule：
@NgModule({
imports: [
RouterModule.forRoot(AppConfigRoutesFactory.getRoutes(),
{
useHash: true,
scrollPositionRestoration: 'enabled'
})
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
}
然后你只需要将这个模块导入到你的 AppModule 中。如果刷新页面时出现 Whitelabel Error Page 错误，您应该在路由中使用 hash。
非常感谢大家提供的所有帮助，评论和尝试至少有助于找到问题的方向。
推荐阅读
- java - Flyway 使用 Kerberos 身份验证执行 SQL DDL 脚本
- django - PostUpdateView 缺少查询集。定义 PostUpdateView.model、PostUpdateView.queryset，或覆盖 PostUpdateView.get_queryset()
- azure - Azure Flask Web 应用程序 + Azure SQL + Github | 每天500服务器错误
- mysql - 在mysql中的列中拆分日期
- arrays - 如何订购数据验证列表
- windows - Windows 加密 API：下一代 (CNG) 是否受益于 Windows Defender Credential Guard？
- json - 如何将一种形式的 json 模式转换为 cerberus 支持的另一种形式？
- c# - 获取N级嵌套列表视图中项目的索引c#UWP
- java - 如何在不读取整个 InputStream 的情况下使 Wiremock 响应？
- c# - 如何从 first 到 end 方法获取所有先前调用的方法