升级到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 is running in the development mode. Call enableProdMode() to enable the production mode.".经过一番挖掘，我发现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 -> my-project-name -> architect -> build -> options -> outputPath下的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.
与升级有关的另一个问题可能与您的问题有关，因为ng build的-ec参数不再适用于Angular 6；我的css文件不再生成.您现在必须使用--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屋！
