[英]Short Imports with TypeScript Path Mapping in tsconfig
I'm trying to create short importes for my Angular Modules.我正在尝试为我的 Angular 模块创建简短的导入。
Below is what I've modified in tsconfig.base.json file.以下是我在 tsconfig.base.json 文件中修改的内容。
{
"compileOnSave": false,
"compilerOptions": {
"importHelpers": true,
"outDir": "./dist/out-tsc",
"baseUrl": "",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom",
"esnext"
],
"module": "esnext",
"paths": {
"@asfc/shared": ["projects/asfc-shared/src"],
"@asfc/shared/*": ["projects/asfc-shared/*"],
"@asfc/shared/global": ["projects/asfc-shared/src/lib/global"],
"@asfc/shared/global/*": ["projects/asfc-shared/src/lib/global/*"],
"@asfc/shared/tagging": ["projects/asfc-shared/src/lib/tagging"],
"@asfc/shared/tagging/*": ["projects/asfc-shared/src/lib/tagging/*"],
"@asfc/shared/testing": ["projects/asfc-shared/src/lib/testing"]
},
"exclude": [
"tools"
]
}
Module path: projects/asfc-shared/src/public_api.ts模块路径: projects/asfc-shared/src/public_api.ts
export * from './lib/global/index';
export * from './lib/tagging/index';
export * from './lib/testing/index';
export * from './lib/shared/index';
In my component if I import, SharedGlobalService
如果我导入,在我的组件中, SharedGlobalService
import { SharedGlobalService } from '@asfc/shared';
I'm getting the below error.我收到以下错误。
ERROR: projects/ubc-security-profile/src/lib/apollo.config.ts:5:37 - error TS2307: Cannot find module '@asfc/shared' or its corresponding type declarations.
What I'm doing wrong here?我在这里做错了什么? Please help.请帮忙。
Update: Folder Structure更新:文件夹结构
Update更新
After updating the baseUrl, I'm getting the below error更新 baseUrl 后,出现以下错误
Compiling TypeScript sources through ngc
ERROR: Unable to write a reference to SvgCaptchaComponent in /Users/a1410978/Desktop/ssr-workspace/asfc-shell/projects/asfc-shared/src/lib/shared/svg-captcha/svg-captcha.component.ts from /Users/a1410978/Desktop/ssr-workspace/asfc-shell/projects/asfc-shared/src/lib/shared/svg-captcha/svg-captcha.module.ts
An unhandled exception occurred: Unable to write a reference to SvgCaptchaComponent in /Users/a1410978/Desktop/ssr-workspace/asfc-shell/projects/asfc-shared/src/lib/shared/svg-captcha/svg-captcha.component.ts from /Users/a1410978/Desktop/ssr-workspace/asfc-shell/projects/asfc-shared/src/lib/shared/svg-captcha/svg-captcha.module.ts
See "/private/var/folders/33/jgk04z2d26nbtr965nyz88fw0000gp/T/ng-yirb2X/angular-errors.log" for further details.
Paths are relative to the baseUrl
value.路径是相对于baseUrl
值的。
Example... if your tsconfig.json
lives at the project root, and your Angular application code lives in src
, also at the root, you can specify the baseUrl
as src
.示例...如果您的tsconfig.json
位于项目根目录中,并且您的 Angular 应用程序代码位于src
中,也位于根目录中,您可以将baseUrl
指定为src
。
From there, paths start at src
.从那里开始,路径从src
开始。
Let's say you have a src -> lib
directory and want to make a path for that:假设您有一个src -> lib
目录并想为此创建一个路径:
"paths": {
"@app/lib/*": ["app/lib/*"]
}
Then you can reference an import as:然后您可以将导入引用为:
import { yourExport } from '@app/lib/wherever';
Hope that helps you out.希望对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.