how to configure an angular project tsconfig paths[] without linting errors?

Question

We have the following config in our tsconfig.ts

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"],
      "@pages/*": ["app/pages/*"]
      ...
    },

Then we can use much cleaner imports in our other ts files, something like this:

import {UrlConstants} from '@app/common/constants/url-constants';

Problem comes while linting the project:

Module '@app/common' is not listed as dependency in package.json

Any way to solve it without going back to using ./***/***/ for imports?

Answer 1

You can configure the rule with a whitelist as documented here https://palantir.github.io/tslint/rules/no-implicit-dependencies

That will look like this:

tslint.json

{
  "rules": {
    "no-implicit-dependencies": [
      true,
      [
        "app",
        "pages"
      ],
      "dev"
    ]
  }
}

The "dev" option isn't really for your scenario but it is useful if you lint your tests as I like to do.

Personally, I think the rule should be smarter and attempt to parse a tsconfig for paths to some extent. Sometimes one has many paths and not everyone uses NPM. JSPM users might have to just disable the rule which is a shame because the rule is very well motivated and very useful if you don't hit this rough edge.

This should now work for @ prefixed paths as https://github.com/palantir/tslint/pull/4192 has been merged. Until you can upgrade you may need to use "app" and "pages" .