Question

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

当我在本地运行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管道运行时，它失败并显示：

app / app.module.ts（116,5）中的错误：模板编译过程中出错   'AppModule'

无法解析相对于./services/user.service的   /builds/JulienRouse/ProjectName/src/app/app.module.ts ..

src / app / services / Auth.service.ts（3,29）：错误TS2307：找不到   模块“ ./user.service”。

src / app / app.component.ts（6,29）：错误TS2307：   找不到模块“ ./services/user.service”。

src / app / home / home.component.ts（4,29）：错误TS2307：找不到模块   '../ services / user.service'。

src / app / result / result.component.ts（4,29）：   错误TS2307：找不到模块'../ services / user.service'。

src / app / models / riskQuestion.model.ts（1,29）：错误TS2307：找不到   模块“ ../ services / user.service”。

src / app / survey / survey.component.ts（4,29）：错误TS2307：找不到   模块“ ../ services / user.service”。

src / app / infos-recap / infos-recap.component.ts（2,29）：错误TS2307：   找不到模块“ ../ services / user.service”。

src / app / auth / signup / signup.component.ts（5,29）：错误TS2307：无法   找到模块“ ../../ services / user.service”。

src / app / dashboard / dashboard.component.ts（4,29）：错误TS2307：无法   找到模块“ ../ services / user.service”。

src / app / payment / payment-recap / payment-recap.component.ts（2,29）：错误   TS2307：找不到模块“ ../../ services / user.service”。

src / app / payment / payment-history / payment-history.component.ts（2,29）：   错误TS2307：找不到模块'../../ services / user.service'。

src / app / pay / payment-settings / payment-settings.component.ts（4,29）：   错误TS2307：找不到模块src / app / services / user.service。

src / app / services / auth-guard.service.ts（4,29）：错误TS2307：无法   找到模块“ ./user.service”。

src / app / services / notAuth-guard.service.ts（4,29）：错误TS2307：无法   找到模块“ ./user.service”。

src / app / services / surveyCompleted-guard.service.ts（4,29）：错误TS2307：   找不到模块“ ./user.service”。

src / app / services / surveyNotCompleted-guard.service.ts（4,29）：错误   TS2307：找不到模块“ ./user.service”。

src / app / app.module.ts（23,29）：错误TS2307：找不到模块   “ ./services/user.service”。

错误：作业失败：退出代码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机器可能区分大小写。

希望这会有所帮助：）

本地Angular构建成功，但Gitlab Runner Angular构建失败

1 个答案: