Error while building Angular project for production 'On Azure DevOps'

Question

I'm trying to build angular project for production, I'm using 'docker build' task in Azure DevOps pipeline to build docker image from the dockerfile.

But I got the following error each time.

ERROR in ./node_modules/@angular-devkit/build-angular/node_modules/core-js/internals/define-well-known-symbol.js Module not found: Error: Can't resolve '../internals/well-known-symbol-wrapped' in '/app/node_modules/@angular-devkit/build-angular/node_modules/core-js/internals'

Here is my dockerfile

FROM node:12.2.0 as build
WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json /app/package.json
RUN npm install
RUN npm install -g @angular/cli@8.3.22

COPY . /app

RUN npm i --save-dev typescript@3.6.4

RUN ng build --prod --output-path=dist

FROM nginx:1.17.6-alpine

COPY --from=build /app/dist /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

CMD nginx -g 'daemon off;'

And here is package.json file.

{
  "name": "do-payroll",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
    "build": "ng build --prod",
    "build-prod": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "^0.803.22",
    "@angular-generic-table/core": "^4.17.1",
    "@angular/animations": "^9.0.0-rc.8",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^9.0.0-rc.8",
    "@angular/compiler": "^9.0.0-rc.8",
    "@angular/core": "^9.0.0-rc.8",
    "@angular/forms": "^9.0.0-rc.8",
    "@angular/http": "^7.2.16",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "^9.0.0-rc.8",
    "@angular/platform-browser-dynamic": "^9.0.0-rc.8",
    "@angular/router": "^9.0.0-rc.8",
    "@caliatys/s3-service": "^1.1.1",
    "@fooloomanzoo/datetime-input": "^3.0.4",
    "@ng-bootstrap/ng-bootstrap": "^5.1.5",
    "@ng-select/ng-select": "^3.7.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "angular-6-datatable": "^0.8.0",
    "angular-bootstrap-md": "^8.8.1",
    "angular-datatables": "^8.0.0",
    "angular-mat-datepicker": "0.0.2",
    "angular-material-datepicker": "^1.0.2",
    "animate.css": "^3.7.2",
    "aws-sdk": "^2.610.0",
    "bn-ng-idle": "^1.0.1",
    "bootstrap": "^4.4.1",
    "chart.js": "^2.9.3",
    "core-js": "^3.6.4",
    "datatables.net": "^1.10.20",
    "datatables.net-dt": "^1.10.20",
    "exceljs": "^1.15.0",
    "file-saver": "^2.0.2",
    "format-number": "^3.0.0",
    "igniteui-angular": "^8.2.15",
    "install": "^0.13.0",
    "jquery": "^3.4.1",
    "mat-select-filter": "^2.3.6",
    "message-service": "^1.0.9",
    "ng2-charts": "^2.3.0",
    "ng2-completer": "^3.0.3",
    "ng2-datepicker": "^3.1.1",
    "ng2-daterangepicker": "^2.0.12",
    "ng2-datetime": "^1.4.0",
    "ng2-smart-table": "^1.5.0",
    "ngx-bootstrap": "^5.3.2",
    "ngx-csv": "^0.3.1",
    "ngx-date-picker": "0.0.24",
    "ngx-export-as": "^1.4.0",
    "ngx-loading": "^8.0.0",
    "ngx-mat-select-search": "^2.1.1",
    "ngx-material-timepicker": "^5.3.0",
    "ngx-smart-table": "^2.0.3",
    "ngx-toastr": "^11.3.0",
    "ngx-webstorage": "^4.0.1",
    "npm": "^6.13.6",
    "pdfmake": "^0.1.63",
    "popper.js": "^1.16.0",
    "rxjs": "^6.5.4",
    "rxjs-compat": "^6.5.4",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular/cli": "^8.3.22",
    "@angular/compiler-cli": "^9.0.0-rc.8",
    "@angular/language-service": "^9.0.0-rc.8",
    "@biesbjerg/ngx-translate-extract": "^4.2.0",
    "@types/datatables.net": "^1.10.18",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.31",
    "@types/node": "^12.12.24",
    "codelyzer": "^5.2.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.1",
    "protractor": "~5.4.0",
    "ts-node": "~8.5.4",
    "tslint": "~5.20.1",
    "typescript": "^3.6.4"
  }
}

But when I run 'ng build --prod --output-path=dist' locally it's working well, even if I build the docker image locally 'using docker for windows' it's working too.

so, how can I overcome this error.

Thanks in advance.

Now this is not the issue but why are you running RUN npm install -g @angular/cli@8.3.22? CLI is already a part of your package.json so it will be installed (same for typescript) — Mackelito
Hmm.. It could also be a problem with versions.. try running ng update @angular/cli@9.0.0 @angular/core@9.0.0 and see what it gives you.. — Mackelito

Mostafa Mostafa · Accepted Answer · 2021-01-19T16:38:25

Check your files if you found this file: package-lock.json try to remove it and re-run the pipeline.

Error while building Angular project for production 'On Azure DevOps'

2 Answers