[英]Path mapping in tsconfig is interpreted as an external module
(context : angular 8, node 12.15.0) (上下文:角度 8,节点 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
:我在@env
中定义了路径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 :但似乎编译器被误导了,因为当我尝试构建( ng build my-lib
)时,我收到以下警告:
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.似乎@env/environment
被解释为外部模块。 How can I avoid that ?我怎样才能避免这种情况?
Steps to reproduce :重现步骤 :
Note : I made a ready-to-use SSCCE here注意:我在这里做了一个现成的 SSCCE
ng new acme
) with simplest options : no routing, plain old CSS for style.使用最简单的选项创建一个新项目( ng new acme
):无路由,样式的普通旧 CSS。ng g generate library my-lib
)在项目中,创建一个库( 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/src
,创建一个包含 2 个文件的文件夹environments
: environment.ts
和environments.prod.ts
projects/my-lib/tsconfig.lib.json
like this (I just added the paths
block):像这样配置projects/my-lib/tsconfig.lib.json
(我刚刚添加了paths
块):{
"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
要重现警告,请构建库: ng build my-lib
MyLibModule
in the main project and build it : ng build
要重现错误, MyLibModule
在主项目中导入MyLibModule
并构建它: ng build
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.库中的路径映射从未得到支持,也不应该起作用,在您的情况下,它们似乎起作用了,因为 ts 配置从库泄漏到您的应用程序。
So, the conclusion is : DO NOT use path mappings in libraries.所以,结论是:不要在库中使用路径映射。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.