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

Did you check the browser console? Were there any errors? If there are, please include them in your question. — AD8, Jun 04 '18 at 05:58
do you see any errors in cli when you run your app using "ng serve" or does it build and run just fine? — AD8, Jun 04 '18 at 06:00
It would be helpful to also show the file structure as well as your angular.json file. — Snackdex, Jun 04 '18 at 06:03
@DonDaniel I have added angular.json file and also the app-routing.module.ts file. — Bharat Jain, Jun 04 '18 at 06:24
From your angular.json file im assuming your code is in the top-level src directory? Not inside a folder called "projects"? — Snackdex, Jun 04 '18 at 12:56
I was having a similar issue. Ended up having to change the path of my loadChildren and then one of my reolvers was blocking me from switching routes in my preload strategy. — cport1, Jun 05 '18 at 22:58
@cport1 Can you provide more information, how can I resolve at my end? It is not giving any kind of errors. — Bharat Jain, Jun 07 '18 at 08:24
if you inspect your page is the DOM empty? Are your modules loaded in your sources? Take a look at https://github.com/angular/angular-cli/issues/10673 — cport1, Jun 07 '18 at 15:23
can you show us what your tsconfig.json looks like as well... — cport1, Jun 07 '18 at 15:27

score 5 · Answer 1 · answered Jul 05 '18 at 16:23

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.

score 3 · Answer 2 · answered Jun 04 '18 at 06:33

3

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.

answered Jun 04 '18 at 06:33

smnbbrv

23,502
9
78
109

I have already tried with that. It still doesn't show any error. – Bharat Jain Jun 04 '18 at 08:11

score 0 · Answer 3 · answered Jun 04 '18 at 06:16

0

you need to check your providers as there is no need to include your providers in the app.module file. can you give some details like your code and error in the console than it will be helpfull

answered Jun 04 '18 at 06:16

sandeep kumar

124
1
4

I have added few more details. There is no error in build or serve. Neither in browser console. – Bharat Jain Jun 04 '18 at 06:26

score 0 · Answer 4 · answered Dec 25 '18 at 14:42

You probably take this error. You can see that if you open your application in browser's console view.

NullInjectorError: No provider for ApplicationRef!

If so, importing the BrowserModule into app.module.ts will fix your issue.

import { BrowserModule } from '@angular/platform-browser';

You can check the related answer here.

score 0 · Answer 5 · answered Sep 28 '19 at 18:59

0

You have to do changes in index.html file: Change to and then run ng build --prod

answered Sep 28 '19 at 18:59

Code Lover

723
1
10
24

After upgrading to Angular 6, application shows blank white screen

5 Answers5

Linked