Question

在我的本地开发中，当我构建项目（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 :)

Answer 1

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"]
    },

在interfaces/index.ts

export * from './IProjets';
export * from'./ITaches';

在组件中

import {IProjets, ITaches} from "@interfaces/";

注意：但是，将其所有文件保存在一个 index.ts 文件中可能不方便。由于嵌套使用的接口文件，您可能会遇到循环依赖错误。

Bitbucket 管道和 angular 11 构建错误

1 个答案: