After countless hours of setting up a custom AOT in Angular 7 project without CLI and debugging, I have encountered the following error:

Uncaught Error: StaticInjectorError(Platform: core)[function(){}]: 
  NullInjectorError: No provider for function(){}!
    at t.get (injector.ts:43)
    at injector.ts:346
    at Xa (injector.ts:288)
    at t.get (injector.ts:168)
    at Cp (application_ref.ts:41)
    at t.bootstrapModule (application_ref.ts:262)
    at Object.<anonymous> (main-aot.ts:14)
    at n (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

Here is my app module definition:

import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { InlineSVGModule } from 'ng-inline-svg';
import { APP_BASE_HREF } from '@angular/common';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { FeatureRoutingModule } from './app-routing.module';
/**
 * Core
 */
import { HeaderComponent } from './core/header/header.component';
import { AppSettingsComponent } from './core/header/app-settings/app-settings.component';
import { SidebarComponent } from './core/sidebar/sidebar.component';
import { PreloaderComponent } from './core/preloader/preloader.component';
import { TranslationLoader } from './services/translation.service';
/**
 * Shared
 */
import { PopupsDirective } from './shared/popups/popups.directive';
/**
 * Component
 */
import { StructureComponent } from './component/structure/structure.component';
import { OverviewComponent } from './component/overview/overview.component';
import { MainContentComponent } from './component/main-content/main-content.component';
import { NavigationStripeComponent } from './component/main-content/navigation-stripe/navigation-stripe.component';
import { TestDirective } from './component/tooltip/serviceCalls.directive';
import { TooltipService } from './component/tooltip/tooltip.service';
import { TooltipComponent } from './component/tooltip/tooltip.component';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslationLoader(http);
}

@NgModule({
  // rendering in browser environment
  imports: [
    BrowserModule,
    FeatureRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      }
    }),
    InlineSVGModule.forRoot(),
    HttpClientModule
  ],
  // register services at root level
  providers: [
    TooltipService,
    { provide: APP_BASE_HREF, useValue: `${window['_app_base']}/` || '/' }
  ],
  // components declarations
  declarations: [
    AppComponent,
    HeaderComponent,
    AppSettingsComponent,
    SidebarComponent,
    PreloaderComponent,
    StructureComponent,
    OverviewComponent,
    MainContentComponent,
    TestDirective,
    TooltipComponent,
    PreloaderComponent,
    PopupsDirective,
    NavigationStripeComponent
  ],
  // bootstrap component
  bootstrap: [AppComponent]
})
export class AppModule {
}

This is the component:

import { Component, OnInit } from '@angular/core';
import { AppService } from './services/app.service';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'kpi-main',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  theme: string;
  sidebarPref: object = {};
  stickyHeader: string = '';
  user: object = {};

  constructor (private appService: AppService, private translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use('en');
  }

  ngOnInit(): void {
    this.appService.getLayoutPreferences().subscribe(layout => {
      this.theme = layout.theme.value;
      this.sidebarPref = layout.sidebar_small;
      this.stickyHeader = layout.stickyHeader.visible;
      this.user = layout.sidebar_small.user;
    });
  }
}

This is my service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Response } from '@angular/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AppService {
  theme: string = '';

  constructor (private http: HttpClient) { }

  setSidebarPref(obj: object): Observable<any> {
    return this.http.put('../api/v1.0/users/me/preferences', { 'batch' : obj }, { withCredentials: true } );
  }

  getUserImage(): Observable<any> {
    return this.http.get('../api/v1.0/users/me/image', { responseType: 'blob', withCredentials: true });
  }

  getLayoutPreferences(): Observable<any> {
    return this.http.get('../api/v1.0/properties/layout', { withCredentials: true });
  }

  handleError(error: Response) {
    console.log(error);
    return Observable.throw(error.json().error || 'Server error');
  }
}

I am facing a NullInjector error in my app after setting up AOT in Angular. Any insights on how to resolve this would be greatly appreciated.

Update Upon further investigation, I have identified the issue in my main-aot.ts file and the way ngfactory is created. Here is the file:

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

import { platformBrowser } from '@angular/platform-browser';
import { AppModule } from './app/app.module';

import { enableProdMode } from '@angular/core';

enableProdMode();

platformBrowser().bootstrapModule(<any>AppModule)
  .catch(err => console.error(err));