Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I overwrite a node_module bad typing in Angular-CLI project?

I have a bad node_module (angularfire2) that is not updated with the newer typings found in another node_module (@firebase).

I'm trying to get tsconfig.json to help me set a path alias for it so that it will be rerouted to resolve to a tweaked file written in src instead of the incompatible typing file in @firebase's node_modules as a temporary fix.

I know that I can downgrade the (@firebase) node_module so that it will be compatible. However this question isn't about getting it to work. I just want to figure out how to be able to overwrite node_module bad typings.

I'm using Angular's cli project and hope I don't need to eject webpack to control it.

I've learned from this post that I overwrite typings placed in the @types folder.

However I'm still having trouble overwriting typings with an index.d.ts in a node_module itself.

E.g. (from angularfire2)

import { FirebaseApp as FBApp } from '@firebase/app-types';

I would like to create an alias for @firebase/app-types in my tsconfig.json so that angularfire2 will look in src/types-overwrite/@firebase/app-types.

I have the following tsconfig.json but it still won't do the aliasing correctly and will still resolve to the incompatible node_module's typing file instead of the one in src.

my tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types",
      "src/types-overwrite"
    ],
    "paths": {
      "@firebase/app-types": ["src/types-overwrite/@firebase/app-types"]
    },
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "include": [
    "node_modules/angularfire2",
  ]
}

How can overwrite index.d.ts typing files in a node_module in the Angular-CLI project or how can I get my tsconfig.json to work?

update:

I added a repository to showcase the problem:

  • '@firebase/app-types' has extra typings for logging purposes (from_node_modules or from_src) (so node_modules are already included in repository)

URL: https://github.com/Jonathan002/resolve-typing

like image 257
Jonathan002 Avatar asked Apr 27 '18 14:04

Jonathan002


1 Answers

I found my answer over at this post:

Exclude/overwrite npm-provided typings

Added:

  • baseUrl - needed for paths resolving to work
  • paths
  • includes (updated)

to my tsconfig.json while copying the package typing codes and referring to it in the declarations folder:

  • declarations/package-name.d.ts

tsconfig.ts

{
  "compilerOptions": {
    "lib": ["es6"],
    "module": "commonjs",
    "noImplicitReturns": true,
    "outDir": "lib",
    "sourceMap": true,
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "*": [
        "src/*", 
        "declarations/*",
      ]
    },
  },
  "compileOnSave": true,
  "include": ["src/**/*.ts", "src/**/*.tsx", "declarations/**/*.d.ts"],
}
like image 199
Jonathan002 Avatar answered Nov 07 '22 18:11

Jonathan002