Local Angular build succeed but Gitlab runner Angular build fail

Question

I have an Angular project that I would like to run on Gitlab Page.

When I run: ng build --prod locally, the build succeeds.

My .gitlab-ci.yaml:

image: node:8.12.0

pages:
  cache:
    paths:
    - node_modules/

  stage: deploy
  script:
  - npm install -g @angular/cli@6.2.1
  - npm install
  - ng build
  - mv dist/ProjectName/* public/
  artifacts:
    paths:
    - public
  only:
  - master

When the Gitlab CI/CD pipeline runs, it fails with:

ERROR in app/app.module.ts(116,5): Error during template compile of 'AppModule'

Could not resolve ./services/user.service relative to /builds/JulienRouse/ProjectName/src/app/app.module.ts..

src/app/services/Auth.service.ts(3,29): error TS2307: Cannot find module './user.service'.

src/app/app.component.ts(6,29): error TS2307: Cannot find module './services/user.service'.

src/app/home/home.component.ts(4,29): error TS2307: Cannot find module '../services/user.service'.

src/app/result/result.component.ts(4,29): error TS2307: Cannot find module '../services/user.service'.

src/app/models/riskQuestion.model.ts(1,29): error TS2307: Cannot find module '../services/user.service'.

src/app/survey/survey.component.ts(4,29): error TS2307: Cannot find module '../services/user.service'.

src/app/infos-recap/infos-recap.component.ts(2,29): error TS2307: Cannot find module '../services/user.service'.

src/app/auth/signup/signup.component.ts(5,29): error TS2307: Cannot find module '../../services/user.service'.

src/app/dashboard/dashboard.component.ts(4,29): error TS2307: Cannot find module '../services/user.service'.

src/app/payment/payment-recap/payment-recap.component.ts(2,29): error TS2307: Cannot find module '../../services/user.service'.

src/app/payment/payment-history/payment-history.component.ts(2,29): error TS2307: Cannot find module '../../services/user.service'.

src/app/payment/payment-settings/payment-settings.component.ts(4,29): error TS2307: Cannot find module 'src/app/services/user.service'.

src/app/services/auth-guard.service.ts(4,29): error TS2307: Cannot find module './user.service'.

src/app/services/notAuth-guard.service.ts(4,29): error TS2307: Cannot find module './user.service'.

src/app/services/surveyCompleted-guard.service.ts(4,29): error TS2307: Cannot find module './user.service'.

src/app/services/surveyNotCompleted-guard.service.ts(4,29): error TS2307: Cannot find module './user.service'.

src/app/app.module.ts(23,29): error TS2307: Cannot find module './services/user.service'.

ERROR: Job failed: exit code 1

So the compiler tells me there is something wrong with app.module.ts but why would it build successfully locally then? I'm a bit lost here.

Here is the app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes } from '@angular/router';
import { RouterModule } from '@angular/router';
import { ExtraOptions } from '@angular/router';

// Component
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { SurveyComponent } from './survey/survey.component';
import { ResultComponent } from './result/result.component';
import { InfosRecapComponent } from './infos-recap/infos-recap.component';
import { SignupComponent } from './auth/signup/signup.component';
import { SigninComponent } from './auth/signin/signin.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { PaymentRecapComponent } from './payment/payment-recap/payment-recap.component';
import { PaymentHistoryComponent } from './payment/payment-history/payment-history.component';
import { PaymentSettingsComponent } from './payment/payment-settings/payment-settings.component';
import { ProductDescriptionComponent } from './product-description/product-description.component';

// Services
import { UserService } from './services/user.service';
import { AuthGuard } from './services/auth-guard.service';
import { BankService } from './services/Bank.service';
import { AuthService } from './services/Auth.service';
import { NotAuthGuard } from './services/notAuth-guard.service';
import { SurveyCompletedGuard } from './services/surveyCompleted-guard.service';
import { SurveyNotCompletedGuard } from './services/surveyNotCompleted-guard.service';
import { ProductService } from './services/Product.service';

// Material Angular
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatStepperModule } from '@angular/material/stepper';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material';

// i18n
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// Charts
import { NgxChartsModule } from '@swimlane/ngx-charts';



// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  const url = window.location.href;

  if (url.includes('someURL')) {
    return new TranslateHttpLoader(http, '/ProjectName/assets/i18n/', '.json');
  }
  else if(url.includes('someOtherURL')) {
    return new TranslateHttpLoader(http, '/ProjectName/assets/i18n/', '.json');
  }
   else {
    return new TranslateHttpLoader(http);
  }
}

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'signin', canActivate: [NotAuthGuard], component: HomeComponent },
  { path: 'signup', canActivate: [NotAuthGuard], component: HomeComponent },
  { path: 'projectName', canActivate: [AuthGuard, SurveyNotCompletedGuard], component: SurveyComponent },
  // { path: 'result', canActivate:[AuthGuard], component: ResultComponent },
  { path: 'user-update', canActivate: [AuthGuard, SurveyCompletedGuard], component: InfosRecapComponent },
  { path: 'infos-recap', canActivate: [AuthGuard, SurveyCompletedGuard], component: InfosRecapComponent },
  { path: 'dashboard', canActivate: [AuthGuard, SurveyCompletedGuard], component: DashboardComponent },
  { path: 'payment-recap/:id', canActivate: [AuthGuard, SurveyCompletedGuard], component: PaymentRecapComponent },
  { path: 'product-description/:id', canActivate: [AuthGuard, SurveyCompletedGuard], component: ProductDescriptionComponent},
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', redirectTo: '/home' }
];

const routerOptions: ExtraOptions = {
  anchorScrolling: 'enabled', // Doesn't work properly on info-recap?
  scrollPositionRestoration: 'enabled',
};

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    SurveyComponent,
    ResultComponent,
    InfosRecapComponent,
    SignupComponent,
    SigninComponent,
    DashboardComponent,
    PaymentHistoryComponent,
    PaymentRecapComponent,
    PaymentSettingsComponent,
    ProductDescriptionComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,        // Material Angular
    MatStepperModule,               // Material Angular
    MatFormFieldModule,             // Material Angular
    MatInputModule,                 // Material Angular
    RouterModule.forRoot(appRoutes, routerOptions),
    NgxChartsModule,                // Charts

    // i18n
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    UserService,
    AuthGuard,
    NotAuthGuard,
    SurveyCompletedGuard,
    SurveyNotCompletedGuard,
    BankService,
    AuthService,
    ProductService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Any help appreciated, if you need any more information I'll be happy to give them to you.

Answer 1

Seems there is something wrong with the 'user.service' module. Have you checked this file is correctly pushed to the branch master in your Gitlab remote? If it is, check if the name is exactly 'user.service' and not 'User.service'. The Gitlab machine may be case sensitive.

Hope this helps:)