@angular/cdk 和@angular/form 更新到 Angular 11 后生成错误
@angular/cdk and @angular/form build errors after updating to Angular 11
更新到 Angular 11 后，我在构建 sln 时遇到以下错误：
\node_modules\@angular\cdk\coercion\array.d.ts(10,60): error TS1005: Build:',' expected.
\node_modules\@angular\cdk\coercion\array.d.ts(10,61): error TS1005: Build:',' expected.
\node_modules\@angular\cdk\coercion\array.d.ts(10,75): error TS1144: Build:'{' or ';' expected.
\node_modules\@angular\cdk\coercion\array.d.ts(10,77): error TS1011: Build:An element access expression should take an argument.
\node_modules\@angular\forms\forms.d.ts(2727,65): error TS1005: Build:'>' expected.
\node_modules\@angular\forms\forms.d.ts(2727,85): error TS1005: Build:',' expected.
\node_modules\@angular\forms\forms.d.ts(2727,87): error TS1005: Build:',' expected.
\node_modules\@angular\forms\forms.d.ts(2727,88): error TS1109: Build:Expression expected.
\node_modules\@angular\cdk\coercion\array.d.ts(10,60): error TS1005: Build:',' expected.
\node_modules\@angular\cdk\coercion\array.d.ts(10,61): error TS1005: Build:',' expected.
\node_modules\@angular\cdk\coercion\array.d.ts(10,75): error TS1144: Build:'{' or ';' expected.
\node_modules\@angular\cdk\coercion\array.d.ts(10,77): error TS1011: Build:An element access expression should take an argument.
\node_modules\@angular\forms\forms.d.ts(2727,65): error TS1005: Build:'>' expected.
\node_modules\@angular\forms\forms.d.ts(2727,85): error TS1005: Build:',' expected.
\node_modules\@angular\forms\forms.d.ts(2727,87): error TS1005: Build:',' expected.
\node_modules\@angular\forms\forms.d.ts(2727,88): error TS1109: Build:Expression expected.
下面是我的package.json
{
"name": "Na",
"version": "0.1.0",
"description": "Na",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc && webpack --mode=production --env=production --progress --color",
"build:dev": "tsc -w && webpack --env=dev --progress --profile --color",
"build:dist": "tsc -w && webpack --env=dev --progress --profile --color",
"build:watch": "tsc -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"webpack-dev-server --open\" \"npm run build:dev\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose",
"postinstall": "ngcc"
},
"author": "Va",
"license": "UNLICENSED",
"resolutions": {
"natives": "1.1.3"
},
"engines": {
"node": "10.16.3"
},
"devDependencies": {
"@types/jasmine": "2.5.36",
"@types/lodash": "^4.14.144",
"@types/node": "^6.14.13",
"@types/ol": "^6.3.1",
"amaze-eslint": "^0.1.5",
"assemble": "^0.17.1",
"assemble-indexer": "^0.1.2",
"autoprefixer": "^6.7.7",
"babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
"babel-preset-es2015": "^6.18.0",
"babelify": "^7.3.0",
"browser-sync": "^2.18.2",
"browserify": "^13.1.1",
"browserify-shim": "^3.8.14",
"canonical-path": "0.0.2",
"concurrently": "^3.2.0",
"core-js": "^2.4.1",
"css-mqpacker": "^5.0.1",
"engine-assemble": "^0.4.1",
"enquire.js": "^2.1.6",
"eventemitter3": "^2.0.3",
"file-loader": "^6.2.0",
"globby": "^6.1.0",
"gulp-clean-css": "^4.2.0",
"gulp-eslint": "^3.0.1",
"gulp-extname": "^0.2.2",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-modernizr": "^1.0.0-alpha",
"gulp-postcss": "^6.4.0",
"gulp-sass": "^3.1.0",
"gulp-sequence": "^1.0.0",
"gulp-sourcemaps": "^1.12.0",
"gulp-stylelint": "^4.0.0",
"gulp-uglify": "^2.1.2",
"gulp-uglify-es": "2.0.0",
"handlebars": "^4.0.11",
"handlebars-helper-compose": "^0.2.12",
"handlebars-helpers": "^0.10.0",
"handlebars-layouts": "^3.1.4",
"hbsfy": "^2.7.0",
"helper-aggregate": "^0.1.2",
"html-loader": "^0.5.5",
"jasmine-core": "~2.4.1",
"jquery-validation": "^1.17.0",
"jquery-validation-unobtrusive": "^3.2.6",
"jquery-zoom": "^1.7.0",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"lite-server": "^2.2.2",
"natives": "^1.1.6",
"node-sass": "^4.10.0",
"optimize-js-plugin": "0.0.4",
"partition-bundle": "^2.5.0",
"picturefill": "^3.0.2",
"postcss-scss": "^1.0.1",
"protractor": "~4.0.14",
"raw-loader": "^4.0.2",
"require-dir": "^0.3.1",
"rimraf": "^2.5.4",
"slick-carousel": "1.8.1",
"stylelint-order": "^0.6.0",
"stylelint-scss": "^2.2.0",
"terser-webpack-plugin": "^1.2.3",
"through2": "^2.0.3",
"tslint": "^3.15.1",
"typescript": "^4.0.5",
"velocity-animate": "^1.5.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"webpack": "^5.1.0",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "^4.3.0",
"webpack-dev-server": "^3.11.1",
"yargs": "^6.4.0"
},
"dependencies": {
"@angular/animations": "^11.0.5",
"@angular/cdk": "^11.0.3",
"@angular/cli": "^11.0.5",
"@angular/common": "^11.0.5",
"@angular/compiler": "^11.0.5",
"@angular/compiler-cli": "^11.0.5",
"@angular/core": "^11.0.5",
"@angular/forms": "^11.0.5",
"@angular/material": "^11.0.3",
"@angular/platform-browser": "^11.0.5",
"@angular/platform-browser-dynamic": "^11.0.5",
"@angular/router": "^11.0.5",
"@fortawesome/fontawesome-free": "^5.15.1",
"@glidejs/glide": "^3.4.1",
"@microsoft/applicationinsights-web": "^2.0.0",
"@ngtools/webpack": "^11.1.0-next.3",
"@ngu/carousel": "^3.0.2",
"@types/bootstrap": "^4.1.2",
"@types/glidejs": "^1.0.30",
"@types/googlemaps": "^3.30.16",
"@types/jquery": "^3.5.5",
"@types/slick-carousel": "^1.6.32",
"angular-in-memory-web-api": "^0.11.0",
"angular-slick-carousel": "^3.1.7",
"angular2-ie9-shims": "^0.0.2",
"angulartics2": "^10.0.0",
"babel-polyfill": "^6.26.0",
"bootstrap-sass": "^3.3.7",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"es5-shim": "^4.5.10",
"es6-promise": "^4.2.4",
"es6-shim": "^0.35.1",
"flush-write-stream": "^1.0.3",
"gtm-event": "^0.1.2",
"gulp": "^3.9.1",
"hammerjs": "^2.0.8",
"hi-base32": "^0.5.0",
"ie-shim": "^0.1.0",
"intl": "^1.2.5",
"lodash": "^4.17.20",
"lodash-webpack-plugin": "^0.11.6",
"ngx-toastr": "^13.2.0",
"objectFitPolyfill": "^2.3.0",
"ol": "^6.4.3",
"popper.js": "^1.14.3",
"readable-stream": "^3.3.0",
"reflect-metadata": "^0.1.12",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.6.3",
"scroll-parallax": "^2.1.0",
"stickybits": "^3.6.6",
"stickyfilljs": "^2.1.0",
"systemjs": "^0.19.47",
"tapable": "^2.2.0",
"tslib": "^2.0.3",
"web-animations-js": "^2.3.1",
"yt-player": "^3.4.3",
"zone.js": "^0.10.3"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"jquery-validation": {
"depends": "jquery"
},
"slick-carousel": {
"depends": "jquery"
},
"jquery-zoom": {
"depends": "jquery"
}
}
}
这是我的 tasconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": { "*": ["types/*"] },
"watch": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es5", "es2015", "dom", "es6" ],
"noLib": false,
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": true,
"noStrictGenericChecks": true,
"sourceMap": true,
"suppressImplicitAnyIndexErrors": true,
"removeComments": false,
"types": [ "jasmine", "node" ],
"target": "es5"
},
"angularCompilerOptions": {
"preserveWhitespaces": false
},
"compileOnSave": true,
"include": [
"src/**/*",
"src-charts/**/*", "Infrastructure/UIDescriptors/GlobalBasePageUiDescriptor.cs", "Features/Global/Shared/Models/Properties/FormBuilderListProperty.cs", "Features/Global/Shared/Models/FormBuilderModel.cs", "Infrastructure/Enums/FormAlignment.cs"
],
"exclude": [
"node_modules",
"wwwroot"
]
}
我按照本指南进行了更新https://update.angular.io/?v=7.0-11.0
我一直在阅读这方面的资料，我发现这通常是由于使用了某些 Angular 包的不正确版本造成的，而这里不是这种情况。 @Angular/cdk 最新版本是 11.0.3，我使用的其余 angular 包是 11.0.5。我已经尝试将所有 angular 软件包降级到 11.0.3，但这没有任何区别。
我也尝试过清除节点缓存并再次删除 node_modules 文件夹和 package-json.lock 和 运行 npm install。这也没有区别。我不确定接下来从哪里开始寻找。任何帮助将不胜感激！
这是因为 Visual Studio 使用了与 package.json 中不同版本的 Typescript。转到项目属性，然后 select Typescript 构建选项卡以查看哪个版本是 selected。要为 VS 安装不同的版本，请转到 nuget 管理器并搜索 Microsoft.TypeScript.MSBuild
更新到 Angular 11 后，我在构建 sln 时遇到以下错误：
\node_modules\@angular\cdk\coercion\array.d.ts(10,60): error TS1005: Build:',' expected.
\node_modules\@angular\cdk\coercion\array.d.ts(10,61): error TS1005: Build:',' expected.
\node_modules\@angular\cdk\coercion\array.d.ts(10,75): error TS1144: Build:'{' or ';' expected.
\node_modules\@angular\cdk\coercion\array.d.ts(10,77): error TS1011: Build:An element access expression should take an argument.
\node_modules\@angular\forms\forms.d.ts(2727,65): error TS1005: Build:'>' expected.
\node_modules\@angular\forms\forms.d.ts(2727,85): error TS1005: Build:',' expected.
\node_modules\@angular\forms\forms.d.ts(2727,87): error TS1005: Build:',' expected.
\node_modules\@angular\forms\forms.d.ts(2727,88): error TS1109: Build:Expression expected.
\node_modules\@angular\cdk\coercion\array.d.ts(10,60): error TS1005: Build:',' expected.
\node_modules\@angular\cdk\coercion\array.d.ts(10,61): error TS1005: Build:',' expected.
\node_modules\@angular\cdk\coercion\array.d.ts(10,75): error TS1144: Build:'{' or ';' expected.
\node_modules\@angular\cdk\coercion\array.d.ts(10,77): error TS1011: Build:An element access expression should take an argument.
\node_modules\@angular\forms\forms.d.ts(2727,65): error TS1005: Build:'>' expected.
\node_modules\@angular\forms\forms.d.ts(2727,85): error TS1005: Build:',' expected.
\node_modules\@angular\forms\forms.d.ts(2727,87): error TS1005: Build:',' expected.
\node_modules\@angular\forms\forms.d.ts(2727,88): error TS1109: Build:Expression expected.
下面是我的package.json
{
"name": "Na",
"version": "0.1.0",
"description": "Na",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc && webpack --mode=production --env=production --progress --color",
"build:dev": "tsc -w && webpack --env=dev --progress --profile --color",
"build:dist": "tsc -w && webpack --env=dev --progress --profile --color",
"build:watch": "tsc -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"webpack-dev-server --open\" \"npm run build:dev\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose",
"postinstall": "ngcc"
},
"author": "Va",
"license": "UNLICENSED",
"resolutions": {
"natives": "1.1.3"
},
"engines": {
"node": "10.16.3"
},
"devDependencies": {
"@types/jasmine": "2.5.36",
"@types/lodash": "^4.14.144",
"@types/node": "^6.14.13",
"@types/ol": "^6.3.1",
"amaze-eslint": "^0.1.5",
"assemble": "^0.17.1",
"assemble-indexer": "^0.1.2",
"autoprefixer": "^6.7.7",
"babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
"babel-preset-es2015": "^6.18.0",
"babelify": "^7.3.0",
"browser-sync": "^2.18.2",
"browserify": "^13.1.1",
"browserify-shim": "^3.8.14",
"canonical-path": "0.0.2",
"concurrently": "^3.2.0",
"core-js": "^2.4.1",
"css-mqpacker": "^5.0.1",
"engine-assemble": "^0.4.1",
"enquire.js": "^2.1.6",
"eventemitter3": "^2.0.3",
"file-loader": "^6.2.0",
"globby": "^6.1.0",
"gulp-clean-css": "^4.2.0",
"gulp-eslint": "^3.0.1",
"gulp-extname": "^0.2.2",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-modernizr": "^1.0.0-alpha",
"gulp-postcss": "^6.4.0",
"gulp-sass": "^3.1.0",
"gulp-sequence": "^1.0.0",
"gulp-sourcemaps": "^1.12.0",
"gulp-stylelint": "^4.0.0",
"gulp-uglify": "^2.1.2",
"gulp-uglify-es": "2.0.0",
"handlebars": "^4.0.11",
"handlebars-helper-compose": "^0.2.12",
"handlebars-helpers": "^0.10.0",
"handlebars-layouts": "^3.1.4",
"hbsfy": "^2.7.0",
"helper-aggregate": "^0.1.2",
"html-loader": "^0.5.5",
"jasmine-core": "~2.4.1",
"jquery-validation": "^1.17.0",
"jquery-validation-unobtrusive": "^3.2.6",
"jquery-zoom": "^1.7.0",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"lite-server": "^2.2.2",
"natives": "^1.1.6",
"node-sass": "^4.10.0",
"optimize-js-plugin": "0.0.4",
"partition-bundle": "^2.5.0",
"picturefill": "^3.0.2",
"postcss-scss": "^1.0.1",
"protractor": "~4.0.14",
"raw-loader": "^4.0.2",
"require-dir": "^0.3.1",
"rimraf": "^2.5.4",
"slick-carousel": "1.8.1",
"stylelint-order": "^0.6.0",
"stylelint-scss": "^2.2.0",
"terser-webpack-plugin": "^1.2.3",
"through2": "^2.0.3",
"tslint": "^3.15.1",
"typescript": "^4.0.5",
"velocity-animate": "^1.5.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"webpack": "^5.1.0",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "^4.3.0",
"webpack-dev-server": "^3.11.1",
"yargs": "^6.4.0"
},
"dependencies": {
"@angular/animations": "^11.0.5",
"@angular/cdk": "^11.0.3",
"@angular/cli": "^11.0.5",
"@angular/common": "^11.0.5",
"@angular/compiler": "^11.0.5",
"@angular/compiler-cli": "^11.0.5",
"@angular/core": "^11.0.5",
"@angular/forms": "^11.0.5",
"@angular/material": "^11.0.3",
"@angular/platform-browser": "^11.0.5",
"@angular/platform-browser-dynamic": "^11.0.5",
"@angular/router": "^11.0.5",
"@fortawesome/fontawesome-free": "^5.15.1",
"@glidejs/glide": "^3.4.1",
"@microsoft/applicationinsights-web": "^2.0.0",
"@ngtools/webpack": "^11.1.0-next.3",
"@ngu/carousel": "^3.0.2",
"@types/bootstrap": "^4.1.2",
"@types/glidejs": "^1.0.30",
"@types/googlemaps": "^3.30.16",
"@types/jquery": "^3.5.5",
"@types/slick-carousel": "^1.6.32",
"angular-in-memory-web-api": "^0.11.0",
"angular-slick-carousel": "^3.1.7",
"angular2-ie9-shims": "^0.0.2",
"angulartics2": "^10.0.0",
"babel-polyfill": "^6.26.0",
"bootstrap-sass": "^3.3.7",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"es5-shim": "^4.5.10",
"es6-promise": "^4.2.4",
"es6-shim": "^0.35.1",
"flush-write-stream": "^1.0.3",
"gtm-event": "^0.1.2",
"gulp": "^3.9.1",
"hammerjs": "^2.0.8",
"hi-base32": "^0.5.0",
"ie-shim": "^0.1.0",
"intl": "^1.2.5",
"lodash": "^4.17.20",
"lodash-webpack-plugin": "^0.11.6",
"ngx-toastr": "^13.2.0",
"objectFitPolyfill": "^2.3.0",
"ol": "^6.4.3",
"popper.js": "^1.14.3",
"readable-stream": "^3.3.0",
"reflect-metadata": "^0.1.12",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.6.3",
"scroll-parallax": "^2.1.0",
"stickybits": "^3.6.6",
"stickyfilljs": "^2.1.0",
"systemjs": "^0.19.47",
"tapable": "^2.2.0",
"tslib": "^2.0.3",
"web-animations-js": "^2.3.1",
"yt-player": "^3.4.3",
"zone.js": "^0.10.3"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"jquery-validation": {
"depends": "jquery"
},
"slick-carousel": {
"depends": "jquery"
},
"jquery-zoom": {
"depends": "jquery"
}
}
}
这是我的 tasconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": { "*": ["types/*"] },
"watch": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es5", "es2015", "dom", "es6" ],
"noLib": false,
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": true,
"noStrictGenericChecks": true,
"sourceMap": true,
"suppressImplicitAnyIndexErrors": true,
"removeComments": false,
"types": [ "jasmine", "node" ],
"target": "es5"
},
"angularCompilerOptions": {
"preserveWhitespaces": false
},
"compileOnSave": true,
"include": [
"src/**/*",
"src-charts/**/*", "Infrastructure/UIDescriptors/GlobalBasePageUiDescriptor.cs", "Features/Global/Shared/Models/Properties/FormBuilderListProperty.cs", "Features/Global/Shared/Models/FormBuilderModel.cs", "Infrastructure/Enums/FormAlignment.cs"
],
"exclude": [
"node_modules",
"wwwroot"
]
}
我按照本指南进行了更新https://update.angular.io/?v=7.0-11.0
我一直在阅读这方面的资料，我发现这通常是由于使用了某些 Angular 包的不正确版本造成的，而这里不是这种情况。 @Angular/cdk 最新版本是 11.0.3，我使用的其余 angular 包是 11.0.5。我已经尝试将所有 angular 软件包降级到 11.0.3，但这没有任何区别。
我也尝试过清除节点缓存并再次删除 node_modules 文件夹和 package-json.lock 和 运行 npm install。这也没有区别。我不确定接下来从哪里开始寻找。任何帮助将不胜感激！
这是因为 Visual Studio 使用了与 package.json 中不同版本的 Typescript。转到项目属性，然后 select Typescript 构建选项卡以查看哪个版本是 selected。要为 VS 安装不同的版本，请转到 nuget 管理器并搜索 Microsoft.TypeScript.MSBuild