Arnaud Denoyelle
Arnaud Denoyelle

Reputation: 31215

Path mapping in tsconfig is interpreted as an external module

(context : angular 8, node 12.15.0)

EDIT : It seems to be a bug so I opened an issue here

I am building a library. I defined the path @env in tsconfig.json :

{
  "compilerOptions": {
    [...]
    "paths": {
      "@env/*": [
        "projects/mylib/src/environments/*"
      ]
    }
}

And in the code, I reference the environment like this :

import { environment } from '@env/environment';

But it seems that the compiler is misled because when I try to build (ng build my-lib), I get the following warning :

WARNING: No name was provided for external module '@env/environment' in output.globals – guessing 'environment'

Also, importing the module in a project generates this error message at compilation :

ERROR in The target entry-point "my-lib" has missing dependencies:
 - @env/environment

It seems that @env/environment is interpreted as an external module. How can I avoid that ?

Steps to reproduce :

Note : I made a ready-to-use SSCCE here

  1. Create a new project (ng new acme) with simplest options : no routing, plain old CSS for style.
  2. In the project, create a library (ng g generate library my-lib)
  3. under projects/my-lib/src, create a folder environments with 2 files: environment.ts and environments.prod.ts
  4. Configure projects/my-lib/tsconfig.lib.json like this (I just added the paths block):
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "declaration": true,
    "inlineSources": true,
    "types": [],
    "lib": [
      "dom",
      "es2018"
    ],
    "paths": {
      "baseUrl": [ "./" ],
      "@env/*": [ "projects/my-lib/src/environments/*" ]
    }
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ],
}

Project should look like this :

.
├── angular.json
├── browserslist
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── package.json
├── package-lock.json
├── projects
│   └── my-lib
│       ├── karma.conf.js
│       ├── ng-package.json
│       ├── package.json
│       ├── README.md
│       ├── src
│       │   ├── environments
│       │   │   ├── environment.prod.ts
│       │   │   └── environment.ts
│       │   ├── lib
│       │   │   ├── my-lib.component.spec.ts
│       │   │   ├── my-lib.component.ts
│       │   │   ├── my-lib.module.ts
│       │   │   ├── my-lib.service.spec.ts
│       │   │   └── my-lib.service.ts
│       │   ├── public-api.ts
│       │   └── test.ts
│       ├── tsconfig.lib.json
│       ├── tsconfig.lib.prod.json
│       ├── tsconfig.spec.json
│       └── tslint.json
├── README.md
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json

Now,

Upvotes: 2

Views: 1459

Answers (1)

Arnaud Denoyelle
Arnaud Denoyelle

Reputation: 31215

This is the response I got from the angular maintainers here :

Its not recommended to use path mappings for libraries.

And also :

path mappings in a library were never supported, and shouldn’t have ever worked and in your case it seems that they worked because of ts configuration leaking from the library to your application.

So, the conclusion is : DO NOT use path mappings in libraries.

Upvotes: 4

Related Questions