CODEWITHSUNDEEP
angulardockernpm
pengz
pengz

Reputation: 2471

Angular 8 docker container Cannot find module even though it is installed

I am building an Angular 8 SPA. I have a Dockerfile that is built and run using a Docker Compose configuration.

The configuration has been working for several weeks, but today, it suddenly stopped working. I didn't make any changes to what was working previously.

The Angular app no longer compiles due to a module error and all development is now blocked due to this issue.

error TS2307: Cannot find module 'ngx-cookie-service'.

I tried:

QUESTION:

What other steps can I take to troubleshoot the issue?

package.json

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test --browsers ChromeHeadlessNoSandbox",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/cdk": "^8.0.1",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/flex-layout": "^8.0.0-beta.26",
    "@angular/forms": "~8.0.0",
    "@angular/material": "^8.0.1",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "angular2-query-builder": "^0.4.2",
    "express-jwt": "^5.3.1",
    "file-saver": "^2.0.2",
    "hammerjs": "^2.0.8",
    "ngx-cookie-service": "^2.0.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "xlsx": "^0.15.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.1",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

Dockerfile

### Local development only ###

FROM node:12.8-alpine

# Install bash
RUN apk add --no-cache bash

# Create working directory
RUN mkdir -p /home/node/app

# Set working directory
WORKDIR /home/node/app

# Add `/home/node/app/node_modules/.bin` to $PATH
ENV PATH /home/node/app/node_modules/.bin:$PATH

# Copy code
COPY ./angular /home/node/app

# Expose ports
EXPOSE 4201:4201

RUN npm install

# Start Angular
CMD ng serve --host 0.0.0.0

docker-compose.yml

version: '3.5'

services:

  client:
    build:
      context: ./client
      dockerfile: Dockerfile
    volumes:
      - './client/angular/:/home/node/app'
      - '/home/node/app/node_modules'
    ports:
      - '4201:4201'
    depends_on:
      - server

Upvotes: 4

Views: 5742

Answers (2)

Miko Chu
Miko Chu

Reputation: 1382

After doing @Alli's accepted answer I encountered an error Cannot find module '@angular-devkit/build-angular/package.json' and I fixed it by telling my Dockerfile to install it like so:

RUN npm install -g @angular/cli
RUN npm install --save-dev @angular-devkit/build-angular
RUN npm install

For those Dockerizing Angular for development purposes, don't remove the volume definition so that any changes from your code will reflect in the container.

Don't remove the volume definition for dev environment

      - './client/angular/:/home/node/app'
      - '/home/node/app/node_modules'

Upvotes: 2

Adiii
Adiii

Reputation: 60016

When you copy the build in your Dockerfile during build then there is no need to mount the host directory in docker-compose.

# Copy code
COPY ./angular /home/node/app

This is enough to run the app so you can remove these from your Docker-compose.

      - './client/angular/:/home/node/app'
      - '/home/node/app/node_modules'

If you want to run form container mount the build directory with container.

      - './client/angular/:/home/node/app'

Also, you can debug the package. after installation list the package.

RUN npm install
RUN npm list

OR if the still issue persists then tries the package as a global package.

RUN npm i ngx-cookie-service -g

Sometimes the host bind modules not working as we expect due to different binaries so better to install at run time in docker-compose.

Add this in docker-compose file

command: sh -c "
  npm i &&
  ng serve --host 0.0.0.0"

Upvotes: 5

Related Questions