0

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/[email protected]

COPY . /app

RUN npm i --save-dev [email protected]

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.

9
  • What does your package.json look like? Commented Jan 18, 2021 at 15:50
  • I updated the post with the file content. Commented Jan 18, 2021 at 15:53
  • Now this is not the issue but why are you running RUN npm install -g @angular/[email protected]? CLI is already a part of your package.json so it will be installed (same for typescript) Commented Jan 18, 2021 at 19:16
  • You could try and clear node_modules as a first step Commented Jan 18, 2021 at 19:18
  • Hmm.. It could also be a problem with versions.. try running ng update @angular/[email protected] @angular/[email protected] and see what it gives you.. Commented Jan 18, 2021 at 19:23

1 Answer 1

0

Try to remove RUN npm install -g @angular/[email protected] in your dockerfile. Here is an useful blog may help you too:

https://medium.com/@waelkdouh/deploying-your-dockerized-angular-application-to-azure-using-azure-devops-part-2-27245f21dc18

Sign up to request clarification or add additional context in comments.

1 Comment

When I remove 'RUN npm install -g @angular/[email protected]' I got 'ng is not recognized' error.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.