角度构建：无法读取未定义的属性“拆分”
Posted
技术标签:
【中文标题】角度构建：无法读取未定义的属性“拆分”【英文标题】：Angular build: Cannot read property 'split' of undefined 【发布时间】：2021-06-16 10:08:20 【问题描述】：刚刚从 ng8 升级到 ng11。 当我运行 ng serve 它工作正常，但是当我为生产运行构建时，我收到以下错误：
为差异加载生成 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"
【问题讨论】：
是运行时错误还是构建时错误？ 这是一个构建错误 文件中的块范围有问题。您能提供整个文件内容吗？ 确定，哪个文件？ 您已经从有问题的文件中提供了一段代码。请提供整个文件，我们会尽力解决那里的问题 【参考方案1】：Angular@9 也遇到了这个问题。我已经证明了 switch 语句加上闭包是 babel 的问题。
我有两个解决方案：
-
不生成es5 bundle，通过在tsconfig.json中设置
"target": "es2015",，在package.json中设置browserslist，比如
"browserslist": [
"last 2 Edge versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"Chrome > 60"
]
然后运行ng build --prod 不会生成es5 bundle，所以不会出错。
-
用简单的语句重写问题闭包。例如。我的问题代码如下：
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 代替过滤功能。
我为 babel https://github.com/babel/babel/issues/13279打开了一个错误
【讨论】：
以上是关于角度构建：无法读取未定义的属性“拆分”的主要内容，如果未能解决你的问题，请参考以下文章