I have this example set up on StackBlitz. It won't compile because there is a line that uses flatMap. The error says:
Property 'flatMap' does not exist on type 'string[]'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2019' or later. So, I tried changing the lib to 'es2019', as suggested in flatMap, flat, flatten doesn't exist on type any[], but it did not solve my problem.
Looking at some other related questions, I also tried 'esnext'. It also did not work.
Here's my tsconfig file:
{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "es6", "moduleResolution": "node", "importHelpers": true, "target": "es5", "typeRoots": ["node_modules/@types"], "lib": ["es2019"] }, "angularCompilerOptions": { "enableIvy": true, "fullTemplateTypeCheck": true, "strictInjectionParameters": true } } My package.json file:
{ "name": "angular", "version": "0.0.0", "private": true, "dependencies": { "@angular/animations": "^12.2.5", "@angular/common": "^12.2.5", "@angular/compiler": "^12.2.5", "@angular/core": "^12.2.5", "@angular/forms": "^12.2.5", "@angular/platform-browser": "^12.2.5", "@angular/platform-browser-dynamic": "^12.2.5", "@angular/router": "^12.2.5", "d3": "^4.13.0", "lodash": "^4.17.21", "rxjs": "^7.3.0", "tslib": "^2.3.1", "zone.js": "^0.11.4" }, "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1100.4", "@angular/cli": "~11.0.4", "@angular/compiler-cli": "~11.0.4", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.1.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "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" } } And here is the part of the code that calls flatMap:
import { Component, VERSION } from '@angular/core'; import { get } from 'lodash'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { name = 'Angular ' + VERSION.major; constructor(private d3Service: D3Service) {} ngOnInit() { const testData = [ { name: 'Mount', count: 4, successes: 4 }, { name: 'Sit up sweep; Reversal', count: 4, successes: 4 }, { name: 'Turtle; Quarters', count: 3, successes: 3 }, { name: 'No known name for this guard pass', count: 3, successes: 3 }, { name: 'Back Step', count: 2, successes: 2 }, { name: 'Leg lasso', count: 1, successes: 1 }, { name: 'Lasso Sweep', count: 1, successes: 1 }, { name: 'Americana; Keylock; Paintbrush', count: 1, successes: 0 }, { name: 'Ezekiel', count: 1, successes: 0 }, { name: 'Leg Drag', count: 1, successes: 1 }, { name: 'Wrist Lock', count: 1, successes: 1 }, { name: 'Arm Bar or Straight Arm Lock', count: 1, successes: 0 }, { name: 'Back Control', count: 1, successes: 1 }, { name: 'Arm Triangle', count: 1, successes: 0 }, { name: 'Bow and Arrow', count: 1, successes: 0 }, { name: 'Knee Slice', count: 1, successes: 1 }, { name: 'De La Riva Guard', count: 1, successes: 1 }, { name: 'North South', count: 1, successes: 1 }, { name: 'Paper Cutter', count: 1, successes: 1 }, { name: 'Half-Guard', count: 1, successes: 1 }, { name: 'Elbow-knee Escape', count: 1, successes: 1 }, ]; testData['columns'] = ['name', 'count', 'successes']; const countCategoryArr: Array<string> = get(testData, 'columns', []).slice( 1 ); const moveCounts = countCategoryArr.flatMap((entry) => hist.map((d) => ({ move: d.name, countCategory: entry, count: d[entry], })) ); } } This is the error that I'm seeing within stackBlitz: 
