Angular-cli: Ability to configure aliases in .angular-cli.json

[dave11mj]

Bug Report or Feature Request (mark with an x)

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

Desired functionality.

Ability to configure Webpack Aliases in .angular-cli.json.

Currently the only way I know of to import components, services, etc, from one to another using the cli's webpack configurations is using relative paths for everything. Meaning often imports can have a good number of ../../../ this makes it difficult to refactor and maintain a growing application.

Mention any other details that might be useful.

I understand ng eject is always an option, but that would also mean dropping out of the great support and configurations provided by the cli.

[clydin]

Typescript provides extensive path mapping support. Scroll down to the path mapping section here: https://www.typescriptlang.org/docs/handbook/module-resolution.html

[dave11mj]

@clydin Thanks for the feedback !! I didn't know tsconfig.json had such power !! ^^

[WoMayr]

I tried to use this method to import the requirejs compatible version of fabric.js but then the typings of @types/fabric are not working anymore. Neither the compiler does typechecks nor does VSCode provide any information about the types.

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.

I have looked around the internet searching for any solutions regarding this problem but I couldn't find any.

[nelisbijl]

Typescript provides extensive path mapping support. Scroll down to the path mapping section here: https://www.typescriptlang.org/docs/handbook/module-resolution.html

Sure but SCSS is no TypeScript

[angular-automatic-lock-bot[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._}