angular - 部署生产构建时Angular 13项目未加载某些页面

Question

我已经将我们的 Angular 项目从 5.2 迁移到 13。迁移很顺利，ng build / ng serve 像以前一样工作得很好。

真正的问题，我不知道如何开始工作，是在我为生产构建应用程序之后（ng build --configuration production）。项目的登陆页面完全空白，没有 JS 错误，没有控制台警告。

您过去可能拥有的任何相关经验都会对我有所帮助，非常感谢！

包.json

{
  "name": "app1",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --configuration production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-prod": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --configuration production"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.0.0",
    "@angular/cdk": "^13.0.2",
    "@angular/common": "^13.0.0",
    "@angular/compiler": "^13.0.0",
    "@angular/core": "^13.0.2",
    "@angular/forms": "^13.0.0",
    "@angular/material": "^13.0.2",
    "@angular/platform-browser": "^13.0.0",
    "@angular/platform-browser-dynamic": "^13.0.0",
    "@angular/router": "^13.0.0",
    "@ckeditor/ckeditor5-angular": "^1.0.1",
    "@ckeditor/ckeditor5-build-classic": "^11.2.0",
    "@ng-select/ng-select": "^8.1.1",
    "@progress/kendo-angular-buttons": "^5.5.2",
    "@progress/kendo-angular-common": "^2.0.2",
    "@progress/kendo-angular-dateinputs": "^4.4.1",
    "@progress/kendo-angular-dropdowns": "^4.4.1",
    "@progress/kendo-angular-excel-export": "^3.1.6",
    "@progress/kendo-angular-grid": "^5.4.3",
    "@progress/kendo-angular-inputs": "^6.7.4",
    "@progress/kendo-angular-intl": "^2.0.4",
    "@progress/kendo-angular-l10n": "^2.0.3",
    "@progress/kendo-angular-label": "^3.1.1",
    "@progress/kendo-angular-pdf-export": "^3.0.2",
    "@progress/kendo-angular-popup": "^4.0.2",
    "@progress/kendo-angular-treeview": "^4.3.2",
    "@progress/kendo-data-query": "^1.2.0",
    "@progress/kendo-drawing": "^1.5.1",
    "@progress/kendo-licensing": "^1.2.1",
    "applicationinsights-js": "^1.0.19",
    "core-js": "^3.19.1",
    "js2xmlparser": "^4.0.0",
    "ng-drag-drop": "^5.0.0",
    "path-parse": "^1.0.7",
    "rxjs": "^7.4.0",
    "rxjs-compat": "^6.6.7",
    "rxjs-tslint": "^0.1.8",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "tslib": "^2.3.1",
    "xml2js": "^0.4.23",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.1",
    "@angular/cli": "^13.0.3",
    "@angular/compiler-cli": "^13.0.0",
    "@angular/language-service": "^13.0.0",
    "@angular/localize": "^13.0.0",
    "@types/applicationinsights-js": "^1.0.6",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^16.11.7",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.8",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "node-sass": "^4.12.0",
    "ts-node": "~4.1.0",
    "tslint": "~6.1.0",
    "typescript": "~4.4.4"
  }
}

角-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "app1"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app1",
      "styles": [
        "styles.css",
        "sky.theme.css",
        "modal.less"
      ],
  
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "downlevelIteration": true,
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "module": "esnext",
    "baseUrl": "./"
  }
}

主要的.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

索引.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>OST</title>
  <base href="#">


  <!-- <link rel="stylesheet" href="https://www.telerik.com/kendo-angular-ui/npm/node_modules//@progress/kendo-theme-default/dist/all.css" /> -->

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico?v=3">

  <link rel="stylesheet" href="assets/styles/all.css" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />
<!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
</head>


<body>
  <app1-root></app1-root>
</body>

</html>

app.component.ts

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app1-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation:ViewEncapsulation.None
})
export class AppComponent  {
  constructor(
    private router: Router
  ) {
    this.router.navigate([''])
      } 
  title = 'app1';
}

app.module.ts

import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { APP_INITIALIZER, NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// import '@progress/kendo-ui';
import { AlertComponent } from './alert-loader/alert/alert.component';
import { ConfirmComponent } from './alert-loader/confirm/confirm.component';
import { LoaderService } from './alert-loader/loader.service';
import { LoaderComponent } from './alert-loader/loader/loader.component';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { AppComponent } from './app.component';
import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
import { ConfigService } from './config.service';
import { HomeComponent } from './home/home.component';
import { AuditModuleService } from './modularWorkflow/audit-module/audit-module.service';
import { AuditTopicService } from './modularWorkflow/audit-topic/audit-topic.service';
import { NavitemService } from './modularWorkflow/audit-topic/navigation/activity-navigation/navitem.service';
//import { NavitemComponent } from './modularWorkflow/audit-topic/navigation/activity-navigation/navitem/navitem.component';
import { BreadcrumbComponent } from './modularWorkflow/commonPages/breadcrumb/breadcrumb.component';
import { SidebarComponent } from './modularWorkflow/commonPages/sidebar/sidebar.component';
import { EntityManagerService } from './modularWorkflow/entityManager/entity-manager.service';
import { EventEmitterService } from './modularWorkflow/event-emitter/event-emitter.service';
import { MaintenanceService } from './modularWorkflow/Maintenance/maintenance.service';
import { PermissionService } from './modularWorkflow/permission/permission.service';
import { PermissiondeniedComponent } from './modularWorkflow/permission/permissiondenied/permissiondenied.component';
import { UserRolePermissionGuard } from './modularWorkflow/permission/user-role-permission.guard';
import { ResourceManagerService } from './modularWorkflow/resourceManager/resourceManager.service';
import { DesignerService } from './modularWorkflow/audit-topic/navigation/activity-navigation/activity-designer/designer.service';
import { PaneModeService } from './modularWorkflow/shared/pane-mode.service';
import { WorkFlowModuleService } from './modularWorkflow/WorkFlowModule/work-flow-module.service';
import { QuickWorkFlowService } from './modularWorkflow/quick-work-flow/quick-work-flow.service';
import { AppInsightsService } from './monitoring/app-insights.service';
import { GlobalErrorHandler } from './core/common/error-handler/global-error-handler';
import { CountryLoginComponent } from './country-login/country-login.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CKDRulesConfigService } from './modularWorkflow/ckd-rules/ckd-rulesConfig.service';
import { GlobalService } from './global.service';
import { DirectAccessGuardService } from './app-routing/direct-access-guard.service';
import { HelpComponent } from './alert-loader/help/help.component';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { RequestCache } from './cache-interceptor/request-cache.service';
import { CacheInterceptor} from './cache-interceptor/cache-interceptor.service';
import {CacheUrlHeaderCreator} from  './cache-interceptor/cache-createurlheader.service' 
import { HelpService } from './alert-loader/help/help.service';
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { CkdModulesComponent} from './modularWorkflow/ckd-rules/ckd-modules/ckd-modules.component';
import { MaterialModule} from './material/material.module';
import { CKDRulesConfigModule} from './ckd-rules-config/ckd-rules-config.module';
import { AddEditAllRulesComponent } from './modularWorkflow/ckd-rules//add-edit-all-rules/add-edit-all-rules.component';
import { FooterComponent } from './modularWorkflow/commonPages/footer/footer.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
    declarations: [
        AppComponent,
        SidebarComponent,
        BreadcrumbComponent,
        BreadcrumbsComponent,
        LoaderComponent,
        AlertComponent,
        HomeComponent,
        ConfirmComponent,
        PermissiondeniedComponent,
        CountryLoginComponent,
        HelpComponent,
        CkdModulesComponent,
        AddEditAllRulesComponent,
        FooterComponent        
    ],
    imports: [
        BrowserAnimationsModule,
        HttpClientModule,
        BrowserModule,
        AppRoutingModule,
        ReactiveFormsModule,
        CKEditorModule,
        MatProgressSpinnerModule,
        FormsModule,
        MaterialModule,
        CKDRulesConfigModule,
        SharedModule
    ],
    providers: [
        ConfigService,
        { provide: APP_INITIALIZER, useFactory: (config: ConfigService) => () => config.load(), deps: [ConfigService], multi: true },
        PaneModeService,
        NavitemService,
        EntityManagerService,
        AuditTopicService,
        ResourceManagerService,
        DesignerService,
        WorkFlowModuleService,
        LoaderService,
        HelpService,
        EventEmitterService,
        AuditModuleService,
        MaintenanceService,
        QuickWorkFlowService,
        PermissionService,
        UserRolePermissionGuard,
        AppInsightsService,
        GlobalService,
        CKDRulesConfigService,
        DirectAccessGuardService,
        { provide: ErrorHandler, useClass: GlobalErrorHandler },
        { provide: LocationStrategy, useClass: HashLocationStrategy },
        RequestCache,
        CacheUrlHeaderCreator,
       {provide :HTTP_INTERCEPTORS , useClass:CacheInterceptor,multi:true }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }