Reputation: 31215
(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
ng new acme
) with simplest options : no routing, plain old CSS for style.ng g generate library my-lib
)projects/my-lib/src
, create a folder environments
with 2 files: environment.ts
and environments.prod.ts
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,
ng build my-lib
MyLibModule
in the main project and build it : ng build
Upvotes: 2
Views: 1459
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