web-dev-qa-db-fra.com

Après la mise à niveau vers Angular 6, l'application montre un écran blanc vide

J'ai suivi les étapes indiquées sur https://update.angular.io/ Après la mise à niveau vers Angular 6, l'application affiche un écran blanc et vide pour tous les itinéraires. Et aussi il n'y a pas d'erreur affichée dans la console du navigateur. Chaque route redirige vers le chemin par défaut http: // localhost: 4200 . Mais http: // localhost: 4200/admin fonctionne correctement.

Quelqu'un peut-il aider, quel peut être le problème? De quelles informations avez-vous besoin de moi pour reproduire le problème?

Voici la liste des dépendances:

"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-routage.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 {
}
angularangular6
4
Bharat Jain

J'avais le même problème une fois que j'ai mis à jour de Angular 5 à 6.

J'ai trouvé que Angular ne se chargeait pas du tout sur mon application. Je n'ai même pas reçu le message "Angular is running in the development mode. Call enableProdMode() to enable the production mode.". Après quelques recherches, j'ai remarqué que l'un des fichiers générés avec Angular 6 était différent. . Avant de générer inline.js, polyfills.js, scripts.js, vendor.js et main.js. Depuis Angular 6, il génère désormais runtime.js au lieu de inline.js. J'utilisais Angular avec MVC, j'ai donc référencé directement les fichiers de sortie. J'ai changé la référence de inline.* à runtime.* (pour MVC, elle est dans BundlesConfig.cs) et tout allait bien à nouveau.

Les fichiers générés doivent générer dans /dist/ à moins que vous ne changiez cela. Vous pouvez confirmer le chemin dans angular.json sous projects -> my-project-name -> architect -> build -> options -> outputPath.

Un autre problème lié à votre mise à niveau, lié à votre problème, est que mes fichiers CSS ne sont plus générés, car l'argument -ec de ng build ne fonctionne plus avec Angular 6; vous devez maintenant utiliser --extract-css.

J'espère que cela pourra aider.

5
Asheq Reza

J'ai eu un comportement similaire avec angular 6. Avec les versions précédentes, lorsque vous rencontriez une erreur de routage, elles étaient redirigées vers la racine par défaut avec l'état Push et non la navigation réelle.

Qu'est-ce que cela signifie pour vous: pour voir les erreurs, activez «Conserver le journal» dans la console de votre navigateur (par exemple, dans Chrome, cliquez sur le symbole représentant une roue et cochez la case), puis réessayez. Les erreurs devraient apparaître et vous pouvez continuer à les résoudre.

3
smnbbrv

vous devez vérifier vos fournisseurs car il n'est pas nécessaire d'inclure vos fournisseurs dans le fichier app.module. pouvez-vous donner quelques détails comme votre code et erreur dans la console que ce sera utile

0
sandeep kumar

Vous prenez probablement cette erreur. Vous pouvez voir cela si vous ouvrez votre application dans la vue de la console du navigateur. 

NullInjectorError: Pas de fournisseur pour ApplicationRef!

Si tel est le cas, importer le BrowserModule dans app.module.ts résoudra le problème. 

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

Vous pouvez vérifier la réponse associée ici .

0
stt