The Angular build process was successful on a local machine, however, the Angular build failed when

I am facing a challenge with my Angular project that I want to deploy on Gitlab Pages.

Initially, when I execute: ng build --prod locally, the build is successful.

Below is my .gitlab-ci.yaml:

image: node:8.12.0

pages:
  cache:
    paths:
    - node_modules/

  stage: deploy
  script:
  - npm install -g @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1d12173e48504c504f">[email protected]</a>
  - npm install
  - ng build
  - mv dist/ProjectName/* public/
  artifacts:
    paths:
    - public
  only:
  - master

However, when the Gitlab CI/CD pipeline runs, it fails with various errors related to module resolution in different components of the application.

The error points out issues in multiple files such as app/app.module.ts and other service files.

ERROR: Job failed: exit code 1

Despite the compiler pointing out problems in app/module.ts, why does it compile successfully on my local machine? This discrepancy has left me perplexed.

Provided below is the snippet from app/app.module.ts:

[Angular application module code here...]

I would appreciate any assistance in resolving this issue. Feel free to ask for additional details if needed.

Answer №1

It appears that there may be an issue with the 'customer.service' module. Have you verified that this file has been properly uploaded to the master branch in your Gitlab remote repository? If it has, ensure that the name is precisely 'customer.service' and not 'Customer.service'. The Gitlab platform might be sensitive to case.

I trust this information will be useful:)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Change an ISO date format to DD:MM:YYYY HH:MM using Angular

I currently have my date in this format: 2022-11-21T21:07:56.830-07:00 However, I am looking to convert it to the following format: 21/11/2022 07:56 ...

Comparing the cost of memory and performance between using classes and interfaces

As I delve into writing TypeScript for my Angular project, one burning question arises — should I use an Interface or a Class to create my domain objects? My quest is to uncover solid data regarding the actual implications of opting for the Class route. ...

CORS policy issue with Angular incorporating Agora shows "No 'Access-Control-Allow-Origin'"

I'm new to Angular and currently working on a demo app for proof of concept. The main focus is integrating the Agora SDK into Angular for video calls. I found an integration code for Agora in Angular on GitHub and implemented it as shown below. The `s ...

Learn the process of sending a delete request to a REST API with Angular

Is there a way to effectively send a delete request to a REST API using Angular? I am attempting to send a delete request with an ID of 1 My current approach is as follows: this.http.delete(environment.apiUrl+"id="+1).subscribe(data => { }); The va ...

What steps do I need to take to start working on this angular project?

As I explore NativeScript, I came across an Angular-based project on play.nativescript.org that caught my attention: After downloading the project and navigating to the top-level directory in my cmd prompt, I attempted to run "ng serve." However, I encoun ...

The optimal location to declare a constructor in Typescript

When it comes to adding properties in an Angular component, the placement of these properties in relation to the constructor function can be a topic of discussion. Is it best to declare them before or after the constructor? Which method is better - Method ...

What is the process for designating and incorporating a particular version of an npm package from GitLab Package Registry into my project?

My project is currently hosted on GitLab, and I have successfully published an npm package to the self-hosted Community Edition of the GitLab Package Registry. However, I am now faced with the challenge of integrating a specific version of that package in ...

How can I prevent an Angular 2+ app from loading until the APP_INITIALIZER has completed its execution?

While I have managed to call a service before the root component loads, I am struggling to find a way to make the whole app wait until the service completes successfully. Essentially, I am looking for a way to make it a synchronous call. The service is loa ...

Sorting does not function properly when utilizing the primeng p-datatable for custom sorting

I am working on an Angular 4 application that uses PrimeNG for a datatable, and I need assistance sorting by the date field named received_at. I have created a StackBlitz with the code I've tried so far: StackBlitz link - PrimeNG datatable Here is ...

VSCode displaying HTML errors within a .ts file

There is a strange issue with some of my .ts files showing errors that are typically found in HTML files. For example, I am seeing "Can't bind to 'ngClass' since it isn't a known property of 'div'" appearing over an import in ...

Having trouble with subscribing to a template in Ionic framework

I'm attempting to showcase an image from Firebase storage using the following code: Inside my component : findImg(img) { this.storage.ref('/img/' + img).getDownloadURL().subscribe( result => { console.log(result); ...

Encountering 'npm install' error while trying to follow the Angular2 5 minute

I encountered an error while attempting to follow the Angular2 5 min quick start guide. Can someone assist me in resolving it? vagrant@vagrant-ubuntu-trusty-64:/vagrant/angular2-tutorial$ sudo npm install <a href="/cdn-cgi/l/email-protection" class=" ...

Unable to execute an Angular 2 application within Visual Studio 2015

I encountered an error while trying to set up an environment on VS 2015 with Angular2. Whenever I run the command "npm start," I receive the following error message. I attempted using "npm cache clean --force" before running "npm start," but the error pers ...

Creating an Observable from static data in Angular that resembles an HTTP request

I have a service with the following method: export class TestModelService { public testModel: TestModel; constructor( @Inject(Http) public http: Http) { } public fetchModel(uuid: string = undefined): Observable<string> { i ...

Tips on resolving issues with cellclickable functionality in Angular with gridster2

VERSION: ^9.3.3 HTML <button (click)="toggleEditing()">{ editing ? 'cancel' : 'editing' }</button> <button>ADD</button> <gridster [options]="options"> &l ...

I am facing an issue with my Angular 11 CLI application while trying to set it up with Jest. The specific error message I am encountering is: "TypeError: Cannot read property

Having issues with my Angular 11 cli app and Jest integration. Whenever I run npm run test, specifically jest --updateSnapshot, I encounter the following error in my terminal: Error: TypeError: Cannot read property 'paths' of undefined Here is ...

What Are the Possible Use Cases for Template Engine in Angular 2?

For the development of a large single page application (SPA) with Angular 2.0, I have decided to utilize a template engine like JADE/PUG in order to enhance clarity and clean up the code. My goal is to achieve optimal performance for the application. Th ...

Trigger a function upon change of selected value in Ionic 3

Here is some HTML code to consider: <ion-select interface="popover" [(ngModel)]="selectV"> <ion-option *ngFor="let human of humans" [value]="v.id">{{v.name}}</ion-option> <ion-option onChange="openModal()">GO TO THE ...

How to handle Object data returned asynchronously via Promises in Angular?

Upon receiving an array of Question objects, it appears as a data structure containing question categories and questions within each category. The process involves initializing the object with board: JeopardyBoard = new JeopardyBoard();. Subsequently, popu ...

Using Angular's ng-zorro module, you can easily define objects as tags in

I'm using a nz-select component from that allows users to select multiple members. My goal is to display the username as the tag label, but have the id bound to the model. <nz-select formControlName="member" nzMode="tags" (nzOnSearch)="searchUser ...