简体   繁体   English

tsconfig 中的路径映射被解释为外部模块

[英]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

  1. Create a new project ( ng new acme ) with simplest options : no routing, plain old CSS for style.使用最简单的选项创建一个新项目( ng new acme ):无路由,样式的普通旧 CSS。
  2. In the project, create a library ( ng g generate library my-lib )在项目中,创建一个库( ng g generate library my-lib
  3. under projects/my-lib/src , create a folder environments with 2 files: environment.ts and environments.prod.tsprojects/my-lib/src ,创建一个包含 2 个文件的文件夹environmentsenvironment.tsenvironments.prod.ts
  4. Configure 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,现在,

  • to reproduce the warning, build the library : ng build my-lib要重现警告,请构建库: ng build my-lib
  • to reproduce the error, import 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.

相关问题 在Angular CLI的tsconfig中使用路径映射 - Using path mapping in tsconfig with Angular CLI tsconfig 中使用 TypeScript 路径映射的短导入 - Short Imports with TypeScript Path Mapping in tsconfig ng 测试运行因 tsconfig 路径映射而失败 - ng test run fail with tsconfig path mapping 找不到模块,因为 tsconfig.json 中提到了路径 - cannot find module since the path is mentioned in the tsconfig.json Angular 7 找不到让 tsconfig.json 路径映射有效的方法 - Angular 7 Can't find a way to get tsconfig.json path mapping works Karma Runner从tsconfig.json找不到ES6模块的路径 - Karma Runner doesnt find path to ES6 module from tsconfig.json tsconfig editorOptions“模块”:“系统”不起作用 - tsconfig compilerOptions “module”: “system” not working 在tsconfig.json中指定路径,而不使用相对路径:src / app / app.module.ts中的错误:错误TS2307:找不到模块“ @…” - Specify path in tsconfig.json instead of using relative path : ERROR in src/app/app.module.ts: error TS2307: Cannot find module '@…' Angular/NX 项目的 tsconfig 中的路径别名 inheritance - Path alias inheritance in tsconfig for Angular/NX Project Angular 11 tsconfig 路径别名无法识别 - Angular 11 tsconfig Path Aliases not Recognized
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM