angular - 本地 Angular 构建成功，但 Gitlab 运行器 Angular 构建失败

Question

我有一个 Angular 项目，我想在 Gitlab Page 上运行。

当我运行时:ng build --prod在本地，构建成功。

我的 .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

当 Gitlab CI/CD 管道运行时，它会失败并显示:

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

所以编译器告诉我 app.module.ts 有问题但是为什么它会在本地成功构建呢？我在这里有点迷路了。

这里是 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 { }

任何帮助表示赞赏，如果您需要更多信息，我很乐意为您提供。

Answer 1

'user.service' 模块似乎有问题。您是否检查过此文件是否已正确推送到 Gitlab 远程中的分支主控？
如果是，请检查名称是否正是“user.service”而不是“User.service”。 Gitlab 机器可能区分大小写。

希望这可以帮助:)