[Angular 17] Dockerizing Angular project giving several errors like NG8001, NG8002, NG8003

[hoangkm13]

Command

build, serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I am trying to deploy Angular project using Docker In Docker (DinD) but it won't be able to build. The same as run start (npm run start). Locally it run perfectly fine.

Minimal Reproduction

This is my Dockerfile and package.json

Dockerfile:

`FROM node:18-alpine as BUILDER
RUN npm -v

WORKDIR /app

RUN npm ng -v

COPY package*.json ./

RUN npm ci

COPY . ./

RUN npm run build

CMD ["npm", "run", "start"]`

package.json:

{ "name": "ga-csm", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test", "api-docs": "java -jar ./libs/openapi-generator-cli-5.3.1.jar generate -g typescript-angular -i ./api-docs.yaml -o ./src/app/api-svc/" }, "private": true, "dependencies": { "@angular/animations": "^17.0.0", "@angular/cdk": "^17.0.4", "@angular/common": "^17.0.0", "@angular/compiler": "^17.0.0", "@angular/core": "^17.0.0", "@angular/forms": "^17.0.0", "@angular/material": "^17.0.4", "@angular/platform-browser": "^17.0.0", "@angular/platform-browser-dynamic": "^17.0.0", "@angular/router": "^17.0.0", "ngx-cookie-service": "^17.0.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.2" }, "devDependencies": { "@angular-devkit/build-angular": "^17.0.7", "@angular/cli": "^17.0.7", "@angular/compiler-cli": "^17.0.0", "@openapitools/openapi-generator-cli": "^2.7.0", "@types/jasmine": "~5.1.0", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.2.2" } }

Exception or Error

#13 [9/9] RUN npm run build
 #13 0.596 
 #13 0.596 > ga-csm@0.0.0 build
 #13 0.596 > ng build
 #13 0.596 
 #13 1.612 - Building...
 #13 1.612 
 #13 12.67 ✘ [ERROR] NG8001: 'router-outlet' is not a known element:
 #13 12.67 1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
 #13 12.67 2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]
 #13 12.67 
 #13 12.67     src/app/app.component.html:0:0:
 #13 12.67       0 │ 
 #13 12.67         ╵ ^
 #13 12.67 
 #13 12.67   Error occurs in the template of component AppComponent.
 #13 12.67 
 #13 12.67     src/app/app.component.ts:5:15:
 #13 12.67       5 │   templateUrl: './app.component.html',
 #13 12.67         ╵                ~~~~~~~~~~~~~~~~~~~~~~
 #13 12.67 
 #13 12.67 
 #13 12.67 ✘ [ERROR] Could not resolve "@sedeh/differentiate"
 #13 12.67 
 #13 12.67     src/app/app.module.ts:25:39:
 #13 12.67       25 │ import { DifferentiateComponent } from "@sedeh/differentiate";
 #13 12.67          ╵                                        ~~~~~~~~~~~~~~~~~~~~~~
 #13 12.67 
 #13 12.67   You can mark the path "@sedeh/differentiate" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.
 #13 12.67 
 #13 12.67 
 #13 12.67 ✘ [ERROR] TS2307: Cannot find module '@sedeh/differentiate' or its corresponding type declarations. [plugin angular-compiler]
 #13 12.67 
 #13 12.67     src/app/app.module.ts:29:37:
 #13 12.67       29 │ import {DifferentiateComponent} from "@sedeh/differentiate";
 #13 12.67          ╵                                      ~~~~~~~~~~~~~~~~~~~~~~
 #13 12.67 
 #13 12.67 
 #13 12.67 ✘ [ERROR] TS-991010: Value at position 16 in the NgModule.imports of AppModule is not a reference
 #13 12.67   Value could not be determined statically. [plugin angular-compiler]
 #13 12.67 
 #13 12.67     src/app/app.module.ts:46:11:
 #13 12.67       46 │   imports: [
 #13 12.67          ╵            ^

.............

Your Environment

$ ng version
      _                      _                 ____ _     ___
     / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
    / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
   / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
  /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                 |___/
     
 Angular CLI: 17.0.7
 Node: 18.19.1
 Package Manager: npm 10.2.5
 OS: linux x64
 Angular: 17.0.7
 ... animations, cli, common, compiler, compiler-cli, core, forms
 ... platform-browser, platform-browser-dynamic, router
 Package                         Version
 ---------------------------------------------------------
 @angular-devkit/architect       0.1700.7
 @angular-devkit/build-angular   17.0.7
 @angular-devkit/core            17.0.7
 @angular-devkit/schematics      17.0.7 (cli-only)
 @angular/cdk                    17.0.4
 @angular/material               17.0.4
 @schematics/angular             17.0.7 (cli-only)
 rxjs                            7.8.1
 typescript                      5.2.2
 zone.js                         0.14.2

Anything else relevant?

No response

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}