Ability to adjust module resolution for a 3rd party component #7287

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.