angular ngbuild prod 未加载任何模块

Posted 2023-03-15

技术标签:

【中文标题】angular ngbuild prod 未加载任何模块【英文标题】：angular ngbuild prod is not loading any module 【发布时间】：2020-09-29 06:15:15 【问题描述】：

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

angular.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

package.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"

index.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 编译好的所有内容的屏幕截图

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

【问题讨论】：

【参考方案1】：

在 package.json 中，尝试删除 base-href，即“build”：“ng build --prod”。当您将 base-href 设置为 ./ 时，它会附加到您的基本 url 并且登录组件的路径不匹配，从而导致错误。

例如，您想将 base href 设置为 myApp，"build": ng build --base-href /myApp/ --prod

因此您的基本网址将是host:port/myApp

【讨论】：

以上是关于angular ngbuild prod 未加载任何模块的主要内容，如果未能解决你的问题，请参考以下文章

生产构建后如何解决Angular给定的错误（未定义订阅）？

Angular 8 - ng build prod 在 ng serve 工作时显示错误 - 模块导入的意外值“未定义”