After upgrading to Angular 6, application shows blank white screen

Question

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?

Here is the list of dependencies:

"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

{
  "$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

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 {
}

Answer 1

I was having the same problem once I updated from Angular 5 to 6.

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.

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.

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.

Hope that helps.

Answer 2

I experienced similar behavior with angular 6. With the versions before when you had a routing error they redirected to default root with the push state and not the real navigation.

What does it mean for you: in order to see the errors activate “Preserve log” in your browser console (e.g. in Chrome click on the gear symbol and set the checkbox) and then try again. The errors should appear and you can go on solving them.