javascript - angular ngbuild prod 未加载任何模块

问题描述

在本地运行我的应用程序运行良好，当我执行 ng build --prod 时，一切都在正确编译，但只显示第一个组件。我无法访问任何其他路线（既不能导航到路径也不能与第一个组件交互）。我正在使用 Angular 9，这是我的配置

角.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/assets/i18n"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        }

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@app/*": ["src/auth/*"],
      "@dashboard/*": ["src/dashboard/*"],
      "@account/*": ["src/account/*"],
      "@welcome/*": ["src/welcome/*"]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableIvy": true
  }
}

包.json

{
  "name": "my-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --base-href ./",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.1.4",
    "@angular/cdk": "^9.2.2",
    "@angular/common": "~9.1.1",
    "@angular/compiler": "^9.1.4",
    "@angular/core": "^9.1.4",
    "@angular/forms": "^9.1.3",
    "@angular/material": "^9.2.2",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "^9.1.4",
    "@angular/router": "~9.1.1",
    "@angular/youtube-player": "^9.2.2",
    "@elastic/apm-rum": "^5.1.1",
    "@lottiefiles/lottie-player": "^0.5.1",
    "@ngrx/router-store": "^9.1.0",
    "@ngrx/store": "^9.1.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "angular-testing-library": "^0.1.0",
    "bootstrap": "^4.4.1",
    "karma-junit-reporter": "^2.0.1",
    "karma-mocha-reporter": "^2.2.5",
    "lottie-web": "^5.6.10",
    "ngx-lottie": "^6.0.0",
    "ngx-xml2json": "^1.0.2",
    "node-sass": "^4.14.1",
    "renamer": "^2.0.0",
    "rss-parser": "^3.8.0",
    "rxjs": "~6.5.4",
    "sinon": "^9.0.2",
    "tslib": "^1.10.0",
    "xml2js": "^0.4.23",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.7",
    "@angular/cli": "~9.1.1",
    "@angular/compiler-cli": "~9.1.1",
    "@angular/language-service": "~9.1.1",
    "@ngrx/effects": "^9.1.0",
    "@ngrx/entity": "^9.1.0",
    "@ngrx/schematics": "^9.1.0",
    "@ngrx/store-devtools": "^9.1.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-allure-reporter": "^1.0.2",
    "jasmine-core": "~3.5.0",
    "jasmine-marbles": "^0.6.0",
    "jasmine-spec-reporter": "~4.2.1",
    "json-server": "^0.16.1",
    "karma": "^5.0.2",
    "karma-allure-reporter": "^1.4.6",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.5.3",
    "ngrx-store-freeze": "^0.2.4",
    "ngx-spec": "^2.1.4",
    "protractor": "^7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

索引.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
 <!-- <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">-->
  <link href='http://fonts.googleapis.com/css?family=Lato:300,400,500,700' rel='stylesheet' type='text/css'>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

应用路由模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {SignInRedirectComponent} from './components/sign-in-redirect/sign-in-redirect.component';
import {NotFoundComponent} from './components/not-found/not-found.component';

export const routes: Routes = [

  { path: '',
    pathMatch: 'full',
    redirectTo: 'sign-in'},
  {
    path: 'sign-in',
    component: SignInRedirectComponent
  },
  { path: ':section',
    pathMatch: 'full',
    redirectTo: ':section/auth' },
  { path: ':section/auth',
    loadChildren: () => import('@app/auth.module').then(m => m.AuthModule)},

  { path: '**',
    pathMatch: 'full',
    redirectTo: 'not-found'},
  { path: 'not-found',
    component: NotFoundComponent
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes, {enableTracing: true})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

此外，在构建应用程序后，我使用 http-server 使用以下配置运行它 http-server -p 8080 -c-1 dist/my-app

这是使用 ngbuild 编译好的所有内容的屏幕截图

这是我在尝试导航到路径时在服务器控制台中遇到的未找到错误

标签： javascriptangularlazy-loadingangular9ng-build

javascript - angular ngbuild prod 未加载任何模块

问题描述

解决方案

推荐阅读