Ability to adjust module resolution for a 3rd party component

[WoMayr]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [X] feature request

Versions.

   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.2.6
node: 8.1.3
os: win32 x64

Desired functionality.

Aliasing 3rd party javascript files. I want to use Fabric.js inside an Angular4 application. Fabric.js provides an additional Javascript file that is compatible with require. But in the package.json of the fabric.js module the "main" property points to another javascript file that is not compatible with the definitions of @types/fabric.

As stated in #6282 I used the paths field of tsconfig.json to redirect the module resolution to the correct file (fabric.require.js). But this leads to typescript not recognizing the type definitions of @types/fabric anymore. (See microsoft/TypeScript#17583)

Outside an angular-cli project it would be easy to fix with a single entry to webpacks resolve.alias configuration. Currently inside the angular project you can choose between a working application (with the entry in tsconfig) or working typechecks (without the entry).

Mention any other details that might be useful.

Reproduce my problem using a stock Angular Project with following modifications:

My tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "paths": {
      "fabric": [
        "../node_modules/fabric/dist/fabric.require.js"
      ]
    },
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

Usage inside app.component.ts:

import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";

import * as fabric from "fabric";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {

  @ViewChild("canvas")
  public viewCanvas: ElementRef;

  private canvas: fabric.Canvas;

  public exportedSvg: string;

  public ngOnInit(): void {
    this.canvas = new fabric.Canvas(this.viewCanvas.nativeElement);

    // create a rectangle object
    const rect = new fabric.Rect({
      left: 100,
      top: 100,
      fill: "red",
      width: 20,
      height: 20,
      lockUniScaling: true
    });

    // "add" rectangle onto canvas
    this.canvas.add(rect);
  }

  public export(): void {
    this.exportedSvg = this.canvas.toSVG();
  }
}

Typescript should complain about this.canvas.toSVG() as it is wrongly defined inside the typings, but it doesn't.

[vegaed]

+1

[ahilbig]

Hi @WoMayr , I'd also need this urgently - did you find a workaround or an alternative solution for this?

[filipesilva]

I feel this is a bit of an extreme corner case base on a mismatch between a package and its corresponding @types/* package. I don't think it makes a lot of sense to add a new option to cater to this scenario. You can try using https://github.com/manfredsteyer/ngx-build-plus to add the needed configuration to webpack though.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}