加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

升级到Angular 6后,应用程序显示空白屏幕

发布时间:2020-12-17 17:52:23 所属栏目:安全 来源:网络整理
导读:我遵循了 https://update.angular.io/给出的步骤 升级到Angular 6后,应用程序显示所有路径的空白屏幕.并且浏览器控制台中也没有显示错误.每个路由重定向到默认路径 http://localhost:4200. 但 http://localhost:4200/admin工作正常. 任何人都可以帮忙,可能是
我遵循了 https://update.angular.io/给出的步骤
升级到Angular 6后,应用程序显示所有路径的空白屏幕.并且浏览器控制台中也没有显示错误.每个路由重定向到默认路径 http://localhost:4200.
但 http://localhost:4200/admin工作正常.

任何人都可以帮忙,可能是什么问题?
您需要我提供哪些信息才能重现问题?

以下是依赖项列表:

"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","tsConfig": "src/tsconfig.spec.json","scripts": [],"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": "","architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor","options": {
            "protractorConfig": "./protractor.conf.js","devServerTarget": "bcare:serve"
          }
        },"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 {
}

解决方法

一旦我从Angular 5更新到6,我遇到了同样的问题.

我发现Angular在我的应用程序中根本没有加载,我甚至没有收到消息“Angular正在开发模式下运行.调用enableProdMode()来启用生产模式.”经过一番挖掘后,我注意到Angular 6生成的文件之一是不同的.在它生成inline.js,polyfills.js,scripts.js,vendor.js和main.js之前.从Angular 6开始,它现在生成runtime.js而不是inline.js.我一直在使用Angular和MVC,所以我直接引用了输出文件.我将引用从内联.*更改为运行时.*(对于MVC,它在BundlesConfig.cs中),一切都是正确的.

生成的文件应该在/ dist /中生成,除非你改变了它.您可以在项目中确认angular.json中的路径 – > my-project-name – >建筑师 – >构建 – >选项 – > outputPath.

升级的另一个问题可能与您的问题有关,因为我的css文件不再生成,因为ng build的-ec参数不再适用于Angular 6;你现在必须使用–extract-css.

希望有所帮助.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读