typescript - Angular build: Không thể đọc thuộc tính 'split' của undefined
vừa nâng cấp từ ng8 lên ng11. khi tôi chạy ng serve thì hoạt động bình thường, nhưng khi tôi chạy build cho production thì gặp lỗi sau:
Đang tạo các gói ES5 cho tải luân phiên... Đã xảy ra ngoại lệ không được xử lý: C:\P.....\src\app\9-es2015.dce42a686e45767441f2.js: Không thể đọc thuộc tính 'split' của undefined
Tôi đã thử gỡ bỏ mã để xem điều gì gây ra sự cố và tôi đã tìm thấy đoạn mã sau trong thành phần của mình, tôi đổi enum thành một số cố định thì nó hoạt động, hoặc nếu tôi xóa console.log. có vẻ đây là một vấn đề với es2015, chuyển sang es5 giải quyết được nó.
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;
}
}
}
}
}
Các loại trường biểu mẫu:
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
}
nhật ký lỗi:
[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"
]
}
}
package,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"
}
}
Câu trả lời #1
Tôi vừa gặp phải vấn đề này sau khi nâng cấp lên angular@13. Tôi đã sửa nó bằng cách cập nhật trường "version" trong angular.json từ 1 thành 2.
Câu trả lời #2
Những cách trên không hiệu quả với tôi; tuy nhiên sau một lượng lớn gỡ lỗi (Angular 13, NRWL 13), giải pháp là như sau:
Trong project.json (cho ứng dụng bạn muốn xây dựng), chỉ cần thêm "dependsOn":[]
Ví dụ,
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"dependsOn": [],
"options": {...
Thành thật mà nói, tôi không chắc tại sao nó lại hoạt động; nhưng tôi đã thêm các câu lệnh in vào module NRWL node và thấy rằng nó không phát hiện bất kỳ dự án nào (undefined) nên cảnh báo đó đã hữu ích.
Trân trọng, ~jedihacks