刚刚从 ng8 升级到 ng11。 当我运行 ng serve 时它工作正常，但是当我运行 build for production 时出现以下错误：
<块引用>为差分加载生成 ES5 包... 发生未处理的异常：C:\P.....\src\app\9-es2015.dce42a686e45767441f2.js：无法读取未定义的属性“拆分”
我尝试删除代码以查看导致问题的原因，并且在我的组件中发现了以下代码，我将枚举更改为它有效的硬编码数字，或者我是否删除了 console.log。 好像是es2015的问题，换成es5就解决了。
import {FormTableData} from '../../../form/service/type/form-table-data';
import {FormFieldTypes} from '../../../form/service/type/form-field-types.enum';
export class FormEditorFormData {
formData: FormTableData;
fieldType = FormFieldTypes;
arr: string[];
constructor(n: number,s:string) {
let type = 0;
const option: string[] = [];
for (const s of this.arr) {
if (s != null) {
switch (type) {
case FormFieldTypes.checkbox:
const cap = 'pp';
option.forEach( (currentValue) => {
console.log(cap);
});
break;
}
}
}
}
}
FormFieldTypes：
export enum FormFieldTypes {
text = 10,
checkbox = 20,
numeric = 30,
option = 40,
date = 50,
combo = 60,
xiny = 70,
file = 80,
picture = 90,
break = 100,
textArea = 110,
actionButton = 998,
none = 999
}
错误日志：
[error] TypeError: C:\Projects\Venditio\admin-client\src\app\9-es2015.8205fce0935da26db9bb.js: Cannot read property 'split' of undefined
at NodePath.get (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\family.js:185:21)
at BlockScoping.wrapClosure (C:\Projects\Venditio\admin-client\node_modules\@babel\plugin-transform-block-scoping\lib\index.js:534:29)
at BlockScoping.run (C:\Projects\Venditio\admin-client\node_modules\@babel\plugin-transform-block-scoping\lib\index.js:360:12)
at PluginPass.BlockStatement|SwitchStatement|Program (C:\Projects\Venditio\admin-client\node_modules\@babel\plugin-transform-block-scoping\lib\index.js:89:24)
at newFn (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\visitors.js:175:21)
at NodePath._call (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\context.js:55:20)
at NodePath.call (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\context.js:42:17)
at NodePath.visit (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\context.js:92:31)
at TraversalContext.visitQueue (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:116:16)
at TraversalContext.visitSingle (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:85:19)
at TraversalContext.visit (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:144:19)
at Function.traverse.node (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\index.js:82:17)
at NodePath.visit (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\context.js:99:18)
at TraversalContext.visitQueue (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:116:16)
at TraversalContext.visitMultiple (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:80:17)
at TraversalContext.visit (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:142:19)
angular.json：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"primer": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/primer",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "primer:build"
},
"configurations": {
"production": {
"browserTarget": "primer:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "primer:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "primer:serve"
},
"configurations": {
"production": {
"devServerTarget": "primer:serve:production"
}
}
}
}
}
},
"defaultProject": "primer"
}
tsconfig：
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
}
}
包，json：
{
"name": "primer",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --base-href / --deploy-url /venditio-client/ --prod",
"build-qa-prod": "node --max_old_space_size=2048 ./node_modules/.bin/ng build --prod --configuration=qa --base-href / --deploy-url /",
"build-qa": "ng build --configuration=qa --base-href / --deploy-url /venditio-client/ --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~11.2.6",
"@angular/cdk": "^11.2.5",
"@angular/common": "~11.2.6",
"@angular/compiler": "~11.2.6",
"@angular/core": "~11.2.6",
"@angular/flex-layout": "^11.0.0-beta.33",
"@angular/forms": "~11.2.6",
"@angular/material": "11.2.5",
"@angular/platform-browser": "~11.2.6",
"@angular/platform-browser-dynamic": "~11.2.6",
"@angular/router": "~11.2.6",
"@asymmetrik/ngx-leaflet": "6.0.1",
"@fullcalendar/core": "^4.3.1",
"@ngx-loading-bar/core": "^4.2.0",
"@ngx-loading-bar/router": "4.2.0",
"@ngx-translate/core": "11.0.1",
"@ngx-translate/http-loader": "4.0.0",
"@swimlane/ngx-datatable": "19.0.0",
"angular-calendar": "0.27.18",
"angular-tree-component": "8.4.0",
"chart.js": "^2.9.4",
"core-js": "^2.6.12",
"d3": "5.12.0",
"font-awesome": "^4.7.0",
"intl": "1.2.5",
"leaflet": "1.5.1",
"moment": "2.24.0",
"ng-block-ui": "^3.0.2",
"ng2-charts": "^2.4.2",
"ng2-dragula": "2.1.1",
"ng2-file-upload": "1.3.0",
"ng2-validation": "4.2.0",
"ngx-material-timepicker": "^5.5.3",
"ngx-perfect-scrollbar": "8.0.0",
"ngx-toastr": "^13.2.1",
"primeflex": "^1.3.0",
"primeicons": "^2.0.0",
"primeng": "^11.3.1",
"quill": "^1.3.7",
"rxjs": "~6.6.0",
"screenfull": "5.0.0",
"sweetalert2": "^10.15.6",
"tslib": "^2.0.0",
"zone.js": "~0.10.2",
"rxjs-compat": "^6.6.6"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1102.5",
"@angular/cli": "^11.2.5",
"@angular/compiler-cli": "11.2.6",
"@angular/language-service": "11.2.6",
"@types/jasmine": "^3.6.7",
"@types/jasminewd2": "^2.0.6",
"@types/node": "^12.20.5",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.2.0",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}
答案 0 :(得分：0)
我在 Angular@9 中也遇到了这个问题。我已经证明这是 babel 的问题，switch 语句加上闭包。
我有两个解决方案：
"target": "es2015",，在package.json中设置browserslist，比如 "browserslist": [
"last 2 Edge versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"Chrome > 60"
]
然后运行 ng build --prod 不会生成 es5 包，所以不会发生错误。
switch (type) {
case 'treemap':
let path = [1,2,3];
let searchNode = [{name:2}];
for (let i = 0; i < path.length; i++) {
let searchResult = searchNode.filter((item) => {
return item.name === path[i];
});
}
// ....other biz logic
break;
//........other biz logic
使用 for of 代替过滤器函数。