升级到 Angular 6 后，应用程序显示空白屏幕 [英] After upgrading to Angular 6, application shows blank white screen
问题描述
我已按照 https://update.angular.io/ 中给出的步骤进行操作升级到 Angular 6 后，应用程序显示所有路由的空白屏幕.而且浏览器控制台中也没有显示错误.每个路由重定向到默认路径 http://localhost:4200.但是 http://localhost:4200/admin 工作正常.
I have followed steps given at https://update.angular.io/ After upgrading to Angular 6, application shows blank white screen for all the routes. And also there is no error shown in browser console. Each route redirects to default path http://localhost:4200. But http://localhost:4200/admin is working fine.
任何人都可以帮忙，可能是什么问题?您需要我提供哪些信息才能重现该问题?
Can anyone help, what can be the issue? What information you need from me to reproduce the issue?
这里是依赖列表:
"dependencies": {
"@angular/animations": "6.0.3",
"@angular/cdk": "^6.2.0",
"@angular/common": "6.0.3",
"@angular/compiler": "6.0.3",
"@angular/core": "6.0.3",
"@angular/forms": "6.0.3",
"@angular/http": "6.0.3",
"@angular/material": "^6.2.0",
"@angular/material-moment-adapter": "^6.2.0",
"@angular/platform-browser": "6.0.3",
"@angular/platform-browser-dynamic": "6.0.3",
"@angular/router": "6.0.3",
"@ng-bootstrap/ng-bootstrap": "^2.0.0",
"@ngx-translate/core": "^10.0.2",
"@ngx-translate/http-loader": "^3.0.1",
"@swimlane/ngx-charts": "^8.0.2",
"@types/lodash": "^4.14.87",
"bootstrap": "4.0.0",
"chart.js": "^2.7.2",
"classlist.js": "^1.1.20150312",
"codelyzer": "^4.3.0",
"core-js": "^2.5.1",
"font-awesome": "^4.7.0",
"lodash": "^4.17.4",
"moment": "^2.19.3",
"ng2-charts": "^1.6.0",
"ng2-dragula": "^1.3.1",
"ng2-file-upload": "^1.3.0",
"ng4-charts": "^1.0.2",
"rxjs": "^6.2.0",
"web-animations-js": "^2.2.5",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.6",
"@angular/cli": "^6.0.7",
"@angular/compiler-cli": "6.0.3",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.92",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "^1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.7.2",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~5.10.0",
"typescript": "^2.7.2"
}
angular.json
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"bcare": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets"
],
"styles": [
"src/fonts.scss",
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"prod": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "bcare:build"
},
"configurations": {
"prod": {
"browserTarget": "bcare:build:prod"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "bcare:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/fonts.scss",
"src/styles.scss"
],
"assets": [
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": []
}
}
}
},
"bcare-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "bcare:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": []
}
}
}
}
},
"defaultProject": "bcare",
"schematics": {
"@schematics/angular:component": {
"prefix": "cc",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "cc"
}
}
}
app-routing.module.ts
app-routing.module.ts
import {RouterModule, Routes} from '@angular/router';
import {NotFoundComponent} from './core/main/not-found.component';
import {HomeComponent} from './core/main/home/home.component';
import {LoginComponent} from './core/main/login/login.component';
import {NgModule} from '@angular/core';
import {HomeGuard} from './core/main/home/home.guard';
import {CanLoadAdmin} from './core/services/can-load-admin';
import {RulesPreviewComponent} from './branches/preparation-admin/main/rules/rules-preview/rules-preview.component';
export const APP_ROUTES: Routes = [
{
path: '',
component: HomeComponent,
canActivate: [HomeGuard],
children: [
{
path: '',
redirectTo: 'preparation',
pathMatch: 'full'
},
{
path: 'preparation',
loadChildren: 'app/branches/preparation/preparation.module#PreparationModule'
},
{
path: 'admin',
loadChildren: 'app/admin/admin/admin.module#AdminModule',
canLoad: [CanLoadAdmin]
}
]
},
{path: 'login', component: LoginComponent},
{path: 'email-preview/:id', component: RulesPreviewComponent},
{path: '**', component: NotFoundComponent},
];
@NgModule({
imports: [RouterModule.forRoot(APP_ROUTES)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
推荐答案
从 Angular 5 更新到 6 后，我遇到了同样的问题.
I was having the same problem once I updated from Angular 5 to 6.
我发现我的应用程序根本没有加载 Angular，我什至没有收到消息Angular 正在开发模式下运行.调用 enableProdMode() 以启用生产模式."经过一番挖掘后，我注意到使用 Angular 6 生成的文件之一是不同的.在它生成 inline.js、polyfills.js、scripts.js、vendor.js 和 之前main.js.从 Angular 6 开始，它现在生成 runtime.js 而不是 inline.js.我一直在 MVC 中使用 Angular，所以我直接引用了输出文件.我将引用从 inline.* 更改为 runtime.*(对于 MVC，它在 BundlesConfig.cs 中)，一切又恢复正常.
I found that Angular was not loading at all on my application, I did not even get the message "Angular is running in the development mode. Call enableProdMode() to enable the production mode." After some digging I noticed one of the generated files with Angular 6 is different. Before it generated inline.js, polyfills.js, scripts.js, vendor.js and main.js. Since Angular 6 it now generates runtime.js instead of inline.js. I have been using Angular with MVC so I referenced the output files directly. I changed the reference from inline.* to runtime.* (for MVC it is in BundlesConfig.cs) and all was right again.
生成的文件应该在 /dist/ 中生成，除非你改变了它.您可以在projects->下的.angular.json中确认路径我的项目名称 ->建筑师 ->构建->选项 ->输出路径
The generated files should generate in /dist/ unless you changed this. You can confirm the path in angular.json under projects -> my-project-name -> architect -> build -> options -> outputPath.
我在升级过程中遇到的另一个可能与您的问题有关的问题是我的 css 文件不再生成，因为 ng build 的 -ec 参数不再适用于 Angular 6；您现在必须使用 --extract-css.
Another problem I had with the upgrade that may also be related to your issue was that my css files were no longer generating because the -ec argument for ng build no longer works with Angular 6; you now have to use --extract-css.
希望有所帮助.
这篇关于升级到 Angular 6 后，应用程序显示空白屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
