angular - Bitbucket 管道和 Angular 11 构建错误
问题描述
在我的本地开发中,当我构建项目(npm run build:prod)时,我没有错误。我使用路径别名:这是我的 tsconfig.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [],
"baseUrl": "./",
"paths": {
"@interfaces": ["src/app/interfaces/index.ts"],
"@services":["src/app/services/*"],
"@env/*": ["src/environments/environment"]
}
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
并在 tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@interfaces/*": ["src/app/interfaces/*"],
"@interfaces": ["src/app/interfaces/index.ts"],
"@env/*": ["src/environments/environment"]
},
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false
}
}
所以可以在我的代码中使用路径别名,我可以从 index.ts 导入接口,如下所示:
import { IProjets, ITaches} from '@interfaces';
它在本地开发机器上正确构建,但是当我使用 Bitbucket 管道时,我有很多错误:
Error: src/app/menu-principal/home-page/home-page.component.ts:4:70 - error TS2307: Cannot find module '@interfaces' or its corresponding type declarations.
2 import { IProjets, ITaches } from '@interfaces';
...
Error: ~~~~~~~~~~~~~
resolve as module
looking for modules in /opt/atlassian/pipelines/agent/build
using description file: /opt/atlassian/pipelines/agent/build/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: /opt/atlassian/pipelines/agent/build/package.json (relative path: ./@interfaces)
no extension
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/@interfaces doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/@interfaces.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/@interfaces.tsx doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/@interfaces.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/@interfaces.js doesn't exist
as directory
````
I don't know if this is because it don't use same angular/cli on my local dev and image node on bitbucket pipeline or just path alias is not a good idea for my project.
Please help :)
解决方案
您不能为 path 参数指定特定的文件,您只能指定特定的文件夹路径。
https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
尝试这个 :
tsconfig.json
"paths": {
"@interfaces/*": ["src/app/interfaces", "src/app/interfaces/*"],
"@env/*": ["src/environments/environment"]
},
在接口/index.ts
export * from './IProjets';
export * from'./ITaches';
在组件中
import {IProjets, ITaches} from "@interfaces/";
注意:但是,将其所有文件保存在 index.ts 文件中可能不方便。由于嵌套使用的接口文件,您可能会遇到循环依赖错误。
推荐阅读
- python - 未找到参数“(无,)”的“signup_view”反向。尝试了 1 种模式:['accounts/signup_view/(?P
[0-9]+)/$'] - javascript - 只返回履行的承诺
- python - 登录正确后如何更改屏幕?
- python - Heroku 中的 Flask db migrat 没有更改数据库架构
- mysql - 保存在新列 MySQL 中的总和(收入)的季度差异
- python - 在python中查找两个字符串中的单词交集
- html - 使用 flexbox 进行垂直对齐的问题
- python - 如何从python中的嵌套列表中提取文本并放入列中?
- python - 卤化物非连续内存布局
- c# - 在 PowerShell 中提供 C# 抽象类的实现