Блог

После того, как моя последняя фиксация интерфейса angular была успешно собрана дженкинсом и установлена на производственном сервере, просто отображается пустая страница после посещения сайта, а консоль разработки показывает ошибку:

TypeError: r(...).default is not a function

Непроизводственная сборка выполняется нормально, также как и сборка, созданная ng serve. Попробовав некоторые конфигурации сборки, я обнаружил, что в проблеме виноват buildoptimizer angular. Без программы работает нормально. Проблема возникла после того, как я внедрил компонент react в приложение.

angular.json

 {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "www": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../install/test-service/www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
                "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": false,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "www:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "www:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "www:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./src/karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [],
            "styles": [
              "src/styles.css"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "www-e2e": {
      "root": "e2e",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": ".e2e/protractor.conf.js",
            "devServerTarget": "www:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "www",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "css"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}
  

package.json

 {
    "name": "www",
    "version": "0.0.1",
    "license": "MIT",
    "scripts": {
        "ng": "./node_modules/@angular/cli/bin/ng",
        "start": "./node_modules/@angular/cli/bin/ng serve --poll 2000",
        "watch": "./node_modules/@angular/cli/bin/ng build --watch --output-path=./dist/",
        "build": "./node_modules/@angular/cli/bin/ng build --prod",
        "buildDev": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --build-optimizer --aot",
        "test": "./node_modules/@angular/cli/bin/ng test",
        "testWatch": "./node_modules/@angular/cli/bin/ng test --watch --poll 500",
        "lint": "./node_modules/@angular/cli/bin/ng lint",
        "e2e": "./node_modules/@angular/cli/bin/ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^7.2.12",
        "@angular/cdk": "^7.3.6",
        "@angular/cli": "^7.3.8",
        "@angular/common": "^7.2.12",
        "@angular/compiler": "^7.2.12",
        "@angular/core": "^7.2.12",
        "@angular/flex-layout": "^7.0.0-beta.24",
        "@angular/forms": "^7.2.12",
        "@angular/http": "^7.2.12",
        "@angular/material": "^7.3.6",
        "@angular/platform-browser": "^7.2.12",
        "@angular/platform-browser-dynamic": "^7.2.12",
        "@angular/platform-server": "^7.2.12",
        "@angular/router": "^7.2.12",
        "@material-ui/core": "^3.9.3",
        "@material-ui/icons": "^3.0.2",
        "@material/react-material-icon": "^0.11.0",
        "@nomadreservations/ngx-codemirror": "^2.0.0",
        "ansi-to-html": "^0.6.10",
        "codemirror": "^5.45.0",
        "core-js": "^2.6.5",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-sortable-tree": "^2.6.2",
        "react-sortable-tree-theme-file-explorer": "^2.0.0",
        "rxjs": "^6.4.0",
        "socket.io-client": "^2.2.0",
        "typeface-roboto": "0.0.54",
        "zone.js": "~0.8.26"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^0.13.8",
        "@angular/compiler-cli": "^7.2.12",
        "@angular/language-service": "^7.2.12",
        "@types/codemirror": "0.0.72",
        "@types/jasmine": "^3.3.12",
        "@types/jasminewd2": "^2.0.6",
        "@types/node": "^11.13.0",
        "@types/react": "^16.8.12",
        "@types/react-dom": "^16.8.3",
        "@types/react-select": "^2.0.15",
        "@types/socket.io-client": "^1.4.32",
        "codelyzer": "^5.0.0",
        "jasmine-core": "^3.4.0",
        "jasmine-spec-reporter": "^4.2.1",
        "karma": "^4.0.1",
        "karma-chrome-launcher": "^2.2.0",
        "karma-cli": "^2.0.0",
        "karma-coverage-istanbul-reporter": "^2.0.5",
        "karma-firefox-launcher": "^1.1.0",
        "karma-jasmine": "^2.0.1",
        "karma-jasmine-html-reporter": "^1.4.0",
        "karma-junit-reporter": "^1.2.0",
        "karma-verbose-reporter": "0.0.6",
        "protractor": "^5.4.2",
        "rxjs-tslint": "^0.1.7",
        "ts-node": "^8.0.3",
        "tslint": "^5.15.0",
        "typescript": "^3.1.6",
        "webpack": "^4.29.6"
    }
}

  

Поскольку оптимизатор работал до сих пор, возникает вопрос, есть ли у меня ошибка в текущей конфигурации сборки и пакетов?