Angular 6 with UpgradeModule cant resolve all parameters for ApplicaitonModule

Question

I have migrated and old AngularJS application to run, with Angular 5, in upgrade mode using the UpgradeModule. Everything is working I have some services migrated to Angular and utilise some more modern libs, like ngx-translate. It was all working fine. Then I updated to Angular 6 following the update guide. I fixed the rxjs issues and all imports are pointing correctly but when I stat the app I just get: Error: Can't resolve all parameters for ApplicationModule: (?). In the console.

This is the module part of my main.ts file:

import {NgModule} from '@angular/core';
import {HTTP_INTERCEPTORS} from '@angular/common/http';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {BrowserModule} from '@angular/platform-browser';
import {UpgradeModule} from '@angular/upgrade/static';
import { FormsModule } from '@angular/forms';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {ErrorHandler} from './components/error-interceptor/error.handler';
import {RequestInterceptor} from './components/error-interceptor/http-error-interceptor.service';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {httpLoaderFactory} from './http.loader.factory';
import {uiRouterStateProvider, uiRouterStateParamsProvider} from "./ajs-upgraded-providers";

import {RestService} from './components/rest/rest.service';
import {TemplateService} from './configuration/templates/template.service';
import {ValidationService} from './components/form-validation/form-validation.service';
import {AlertService} from './components/alert/alert.service';
import {UtilService} from './app.util.service';
import {AlertComponent} from './components/alert/alert.directive';
import {TemplateCreateComponent} from './configuration/templates/modify/template-create.controller';

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule,
        HttpClientModule,
        FormsModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: httpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    providers: [
        RestService,
        ValidationService,
        AlertService,
        TemplateService,
        UtilService,
        uiRouterStateProvider,
        uiRouterStateParamsProvider,
        ErrorHandler,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: RequestInterceptor,
            multi: true,
        }
    ],
    declarations: [
      //solid angular components need only be entered here
        AlertComponent,
        TemplateCreateComponent
    ],
    entryComponents: [
      //add downgraded components here and in declarations
        AlertComponent,
        TemplateCreateComponent
    ]
})
export class AppModule {
    // Override Angular bootstrap so it doesn't do anything
    ngDoBootstrap() {
    }
}

// Bootstrap using the UpgradeModule
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['PortalApp']);
});

This is the package.json file:

"dependencies": {
    "@angular/animations": "^6.1.10",
    "@angular/cli": "^6.2.9",
    "@angular/common": "^6.1.10",
    "@angular/compiler": "^6.1.10",
    "@angular/compiler-cli": "^6.1.10",
    "@angular/core": "^6.1.10",
    "@angular/forms": "^6.1.10",
    "@angular/http": "^6.1.10",
    "@angular/platform-browser": "^6.1.10",
    "@angular/platform-browser-dynamic": "^6.1.10",
    "@angular/platform-server": "^6.1.10",
    "@angular/router": "^6.1.10",
    "@angular/upgrade": "^6.1.10",
    "@ctrl/ngx-codemirror": "^1.3.10",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "angular": "~1.6.10",
    "angular-animate": "~1.6.10",
    "angular-breadcrumb": "~0.5.0",
    "angular-chosen-localytics": "~1.8.0",
    "angular-clipboard": "^1.5.0",
    "angular-cookies": "~1.6.10",
    "angular-in-memory-web-api": "~0.5.0",
    "angular-loading-bar": "~0.9.0",
    "angular-messages": "~1.6.10",
    "angular-moment-picker": "^0.10.2",
    "angular-sanitize": "~1.6.10",
    "angular-touch": "~1.6.10",
    "angular-translate": "~2.18.1",
    "angular-translate-loader-url": "~2.18.1",
    "angular-translate-storage-cookie": "~2.18.1",
    "angular-translate-storage-local": "~2.18.1",
    "angular-ui-grid": "~4.8.1",
    "angular-ui-router": "~1.0.22",
    "angular-ui-sortable": "0.14",
    "bootstrap": "^4.3.1",
    "chosen-js": "~1.8.7",
    "codemirror": "^5.49.2",
    "core-js": "^2.6.11",
    "jquery": "~2.2.4",
    "jquery-ui": "~1.12.1",
    "moment": "~2.24.0",
    "ng-csv": "~0.3.6",
    "ng-file-upload": "~12.2.13",
    "ng-ui-router-state-events": "^1.0.1",
    "popper.js": "^1.15.0",
    "rxjs": "6.0.0",
    "rxjs-compat": "6.2.2",
    "selectize": "~0.12.6",
    "tslint": "~5.0.0",
    "typescript": "~2.7.2",
    "typings": "^2.1.1",
    "ui-bootstrap4": "~3.0.6",
    "web-animations-js": "^2.3.1",
    "webpack-cli": "^3.3.9",
    "zone.js": "^0.8.4"
  }

The last thing I fixed was the ngx-translate that has a different version for Angular 5 and 6 but this has been updated and still the issue. Any idea what might be causing the issue?

Answer 1

OK after a lot of searching I came across a post in the git hub issues of Angular. I will link it because it is perfect reading as this error can be caused by a number of different issues.

For me it was the order of the imports and providers specified in the main.ts so here:

providers: [
        uiRouterStateProvider,
        uiRouterStateParamsProvider,
        UtilService,
        RestService,
        ValidationService,
        AlertService,
        TemplateService
    ],
    declarations: [
      //solid angular components need only be entered here
        AlertComponent,
        TemplateCreateComponent
    ],
    entryComponents: [
      //add downgraded components here and in declarations
        AlertComponent,
        TemplateCreateComponent
    ]

for instance teh ValidationService and the AlertService both referenced the UtilService but it was below them in the imports. After changing this my issue was fixed.

This is the link to the issue, I think it is useful as this can be a good reference for future people saving them a day of searching.

angular git hub issue