请告诉我为什么会有以下问题:
组装应用程序后,此窗口将显示在浏览器中。
如果您在地址栏中添加index.html
,则应用程序将正确加载
但是,当您尝试刷新页面时,将出现“白色标签错误页面”。
除了angular.json
和tconfig.json
的内容(如果您需要显示其他内容-请告诉我),我不知道该显示什么。
谢谢大家。
angular.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应用程序以汇编形式用作Spring Boot后端的静态资源。该应用程序本身收集在war文件中,并部署到服务器。
答案 0 :(得分:1)
需要在后端(Spring Boot)和前端(Angular 6)中进行更改。
在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;
}
}
在用户界面的一部分中,也有必要进行编辑。
首先,为构建脚本添加base-href
和deploy-url
属性。在我的情况下,使用的模板是:/<application-context>/
,其中<application-context>
是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/",
...
P.S。:AppConfigRoutesFactory
-具有返回Routes的静态方法的类(只需将您的Routes传递到那里)
AppRoutesModule
的最终视图:
@NgModule({
imports: [
RouterModule.forRoot(AppConfigRoutesFactory.getRoutes(),
{
useHash: true,
scrollPositionRestoration: 'enabled'
})
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
}
然后,您只需要将此模块导入到AppModule中即可。如果刷新页面时出现Whitelabel Error Page错误,则应在路由中使用哈希。
非常感谢您提供的所有帮助,意见和尝试,至少可以帮助您发现问题。