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],
}))
);
}
}
I'm not sure the exact cause, but disabling Ivy fixes it:
"angularCompilerOptions": {
"enableIvy": false,
...
}
https://stackblitz.com/edit/angular-ivy-hvpfty?file=tsconfig.json
I can't reproduce it locally, so seems to be a bug in the ivy compiler on stackblitz specifically.