search

sinequa / sba-angular

Sinequa's Angular-based Search Based Application (SBA) Framework
https://sinequa.github.io/sba-angular/
MIT License
30 stars 23 forks source link

Type definition errors on SBA build #73

Closed bruno-vwds closed 2 years ago

bruno-vwds commented 2 years ago

Hi there,

I am refactoring an app that was created using your Sinequa Angular SBA workspace to use your @sinequa/core and @sinequa/components npm packages.

I'm getting the following errors after building my app:

Error: node_modules/@sinequa/components/utils/pipes/relative-time-pipe.d.ts:1:23 - error TS2688: Cannot find type definition file for 'sq-extra-typings'.

1 /// <reference types="sq-extra-typings" />
                        ~~~~~~~~~~~~~~~~

Error: node_modules/@sinequa/components/utils/pipes/relative-time-pipe.d.ts:8:20 - error TS2694: Namespace 'Intl' has no exported member 'RelativeTimeUnit'.

8         unit: Intl.RelativeTimeUnit;
                     ~~~~~~~~~~~~~~~~

Error: node_modules/@sinequa/core/intl/intl.service.d.ts:1:23 - error TS2688: Cannot find type definition file for 'sq-extra-typings'.

1 /// <reference types="sq-extra-typings" />
                        ~~~~~~~~~~~~~~~~

Error: node_modules/@sinequa/core/intl/intl.service.d.ts:271:79 - error TS2694: Namespace 'Intl' has no exported member 'RelativeTimeUnit'.

271     formatRelativeTime(value: string | number | Date | undefined, unit?: Intl.RelativeTimeUnit, options?: Intl.RelativeTimeFormatOptions & {

Environment:

Dependencies (taken from the project's package.json):

"dependencies": {
    "@agm/core": "^3.0.0-beta.0",
    "@angular-builders/custom-webpack": "^13.1.0",
    "@angular/animations": "13.3.0",
    "@angular/cdk": "13.3.0",
    "@angular/common": "13.3.0",
    "@angular/compiler": "13.3.0",
    "@angular/core": "13.3.0",
    "@angular/flex-layout": "10.0.0-beta.32",
    "@angular/forms": "13.3.0",
    "@angular/material": "13.3.0",
    "@angular/platform-browser": "13.3.0",
    "@angular/platform-browser-dynamic": "13.3.0",
    "@angular/router": "13.3.0",
    "@carbon/icons-angular": "^11.2.2",
    "@formatjs/intl-relativetimeformat": "^4.5.12",
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@popperjs/core": "^2.11.4",
    "@sinequa/components": "^11.7.1",
    "@sinequa/core": "^11.7.1",
    "@swimlane/ngx-charts": "^14.0.0",
    "angular-fusioncharts": "^3.0.4",
    "angular-gridster2": "^10.1.4",
    "atomicjs": "^4.4.1",
    "bootstrap": "^4.4.1",
    "chart.js": "^2.9.4",
    "custom-event": "^1.0.1",
    "d3": "^5.15.1",
    "diacritics": "^1.3.0",
    "element-resize-detector": "^1.2.1",
    "fast-text-encoding": "^1.0.1",
    "focus-within": "^3.0.2",
    "fusioncharts": "^3.15.1-sr.1",
    "i": "^0.3.7",
    "intl": "^1.2.5",
    "intl-format-cache": "^4.2.24",
    "intl-messageformat": "^7.8.4",
    "intl-messageformat-parser": "^3.6.4",
    "intl-pluralrules": "^1.2.0",
    "jquery": "^3.5.0",
    "jquery-contextmenu": "^2.9.0",
    "js-polyfills": "^0.1.42",
    "jssha": "^2.4.2",
    "jstz": "^2.1.1",
    "karma-junit-reporter": "^2.0.1",
    "lodash": "^4.17.21",
    "matchmedia-polyfill": "^0.3.2",
    "material-design-icons-iconfont": "^5.0.1",
    "moment": "^2.24.0",
    "ng2-charts": "^2.4.2",
    "ng2-ui-auth": "^10.0.1",
    "ng5-slider": "^1.2.4",
    "ngx-bootstrap": "^5.6.1",
    "ngx-vis": "^3.1.0",
    "npm": "^8.5.5",
    "popper.js": "^1.16.1",
    "rxjs": "~6.6.3",
    "tslib": "^2.3.1",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "13.3.0",
    "@angular/cli": "13.3.0",
    "@angular/compiler-cli": "13.3.0",
    "@angular/language-service": "13.3.0",
    "@babel/core": "^7.17.8",
    "@compodoc/compodoc": "^1.1.14",
    "@types/d3": "^5.7.2",
    "@types/googlemaps": "^3.39.3",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.35",
    "@types/jquery.contextmenu": "^1.7.34",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.17",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "karma-mocha-reporter": "^2.2.5",
    "ng-packagr": "^13.3.0",
    "postcss-flexbugs-fixes": "^4.2.0",
    "postcss-focus-within": "^3.0.0",
    "protractor": "^7.0.0",
    "sass-asset-functions": "^0.1.1",
    "sass-color-helpers": "^2.1.1",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.6.2"
  }

My tsconfig.json file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "allowSyntheticDefaultImports": true,
    "preserveSymlinks": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2020",
      "dom"
    ],
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

My angular.json file:

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
      "my-app": {
        "projectType": "application",
        "schematics": {
          "@schematics/angular:component": {
            "style": "scss"
          }
        },
        "root": "projects/my-app",
        "sourceRoot": "projects/my-app/src",
        "prefix": "my-app",
        "architect": {
          "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
              "outputPath": "dist/my-app",
              "index": "projects/my-app/src/index.html",
              "main": "projects/my-app/src/main.ts",
              "polyfills": "projects/my-app/src/polyfills.ts",
              "tsConfig": "projects/my-app/tsconfig.app.json",
              "assets": ["projects/my-app/src/favicon.ico", "projects/my-app/src/assets"],
              "styles": [
                "projects/my-app/src/styles/app.scss",
                "projects/my-app/src/styles/preview.scss",
                {
                  "input": "projects/my-app/src/styles/preview.scss",
                  "bundleName": "preview",
                  "inject": false
                }
              ],
              "scripts": [],
              "vendorChunk": true,
              "extractLicenses": false,
              "buildOptimizer": false,
              "sourceMap": true,
              "optimization": false,
              "namedChunks": true
            },
            "configurations": {
              "production": {
                "fileReplacements": [
                  {
                    "replace": "projects/my-app/src/environments/environment.ts",
                    "with": "projects/my-app/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"
                  }
                ]
              },
              "qualityAssurance": {
                "fileReplacements": [
                  {
                    "replace": "projects/my-app/src/environments/environment.ts",
                    "with": "projects/my-app/src/environments/environment.qa.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"
                  }
                ]
              }
            },
            "defaultConfiguration": ""
          },
          "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
              "browserTarget": "my-app:build"
            },
            "configurations": {
              "production": {
                "browserTarget": "my-app:build:production"
              }
            }
          },
          "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
              "browserTarget": "my-app:build"
            }
          },
          "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
              "main": "projects/my-app/src/test.ts",
              "polyfills": "projects/my-app/src/polyfills.ts",
              "tsConfig": "projects/my-app/tsconfig.spec.json",
              "karmaConfig": "projects/my-app/karma.conf.js",
              "assets": ["projects/my-app/src/favicon.ico", "projects/my-app/src/assets"],
              "styles": [
                "projects/my-app/src/styles/app.scss",
                "projects/my-app/src/styles/preview.scss",
                {
                  "input": "projects/my-app/src/styles/preview.scss",
                  "bundleName": "preview",
                  "inject": false
                }
              ],
              "scripts": [],
              "codeCoverage": true
            }
          },
          "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
              "protractorConfig": "projects/my-app/e2e/protractor.conf.js",
              "devServerTarget": "my-app:serve"
            },
            "configurations": {
              "production": {
                "devServerTarget": "my-app:serve:production"
              }
            }
          }
        }
      }
    },
    "defaultProject": "my-app"
  }

Has anyone faced this issue?

ericleib commented 2 years ago

Hello, Thanks for reporting this. Did you get this issue after upgrading to the 11.7.1 libs (that we just published), and while everything else stayed the same?

ericleib commented 2 years ago

Can you try adding "node_modules/@sinequa/core/@types" to compilerOptions.typeRoots in your tsconfig.json file?

bruno-vwds commented 2 years ago

Hello, Thanks for reporting this. Did you get this issue after upgrading to the 11.7.1 libs (that we just published), and while everything else stayed the same?

Hi,

Thanks for your prompt reply.

Yes, so before I was building and serving core and components libs locally, as per your docs, with Angular 13, and everything was fine. After removing core and components code, installing those packages from npm and fixing imports I started getting the errors in the issue.

Thanks.

bruno-vwds commented 2 years ago

Can you try adding "node_modules/@sinequa/core/@types" to compilerOptions.typeRoots in your tsconfig.json file?

Just tried this and the /// <reference types="sq-extra-typings" /> error above disappeared :raised_hands:.

However, I got more of the other errors mentioned, as you can see in the build output below:

Error: node_modules/@sinequa/core/@types/sq-extra-typings/index.d.ts:126:11 - error TS2451: Cannot redeclare block-scoped variable 'RelativeTimeFormat'.

126     class RelativeTimeFormat {
              ~~~~~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.es2020.intl.d.ts:122:15
    122     interface RelativeTimeFormat {
                      ~~~~~~~~~~~~~~~~~~
    'RelativeTimeFormat' was also declared here.
  node_modules/typescript/lib/lib.es2020.intl.d.ts:176:11
    176     const RelativeTimeFormat: {
                  ~~~~~~~~~~~~~~~~~~
    and here.

Error: node_modules/typescript/lib/lib.es2020.intl.d.ts:122:15 - error TS2451: Cannot redeclare block-scoped variable 'RelativeTimeFormat'.

122     interface RelativeTimeFormat {
                  ~~~~~~~~~~~~~~~~~~

  node_modules/@sinequa/core/@types/sq-extra-typings/index.d.ts:126:11
    126     class RelativeTimeFormat {
                  ~~~~~~~~~~~~~~~~~~
    'RelativeTimeFormat' was also declared here.

Error: node_modules/typescript/lib/lib.es2020.intl.d.ts:176:11 - error TS2451: Cannot redeclare block-scoped variable 'RelativeTimeFormat'.

176     const RelativeTimeFormat: {
              ~~~~~~~~~~~~~~~~~~

  node_modules/@sinequa/core/@types/sq-extra-typings/index.d.ts:126:11
    126     class RelativeTimeFormat {
                  ~~~~~~~~~~~~~~~~~~
    'RelativeTimeFormat' was also declared here.

So, we're getting close-ish 😆

Could this be related with typescript versions?

ericleib commented 2 years ago

I think this is because you are using "es2020" in compilerOptions.lib. Try using "es2018" instead ? (this "extra typing" file were added by us because it was not yet available at the time; but with es2020 it becomes redundant)

bruno-vwds commented 2 years ago

I think this is because you are using "es2020" in compilerOptions.lib. Try using "es2018" instead ? (this "extra typing" file were added by us because it was not yet available at the time; but with es2020 it becomes redundant)

It worked! 🙌

Thank you for your help!!!