CODEWITHSUNDEEP
angularbitbucketbitbucket-pipelines
Jb Randria
Jb Randria

Reputation: 101

Bitbucket pipeline and angular 11 build error

In my Local dev , when i build project (npm run build:prod) i have no error . I use path alias: this is my 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"
  ]
}

and in 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
  }
}

So in can use path alias in my code, i can import interface from index.ts , like this:

import { IProjets, ITaches} from '@interfaces';

It build correctly on local dev machine but when i use Bitbucket pipeline , i have many errors:

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 :)

Upvotes: 0

Views: 635

Answers (1)

Onur Özkır
Onur Özkır

Reputation: 555

You cannot specify a specific file for the path parameter, you can only specify a specific folder path.

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

try this :

tsconfig.json

"paths": {
      "@interfaces/*": ["src/app/interfaces", "src/app/interfaces/*"], 
      "@env/*": ["src/environments/environment"]
    },

in interfaces/index.ts

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

in component

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

Note : However, it may be inconvenient to keep all of its files in an index.ts file. You may get circular depency error due to interface files that are in nested use.

Upvotes: 0

Related Questions