angularjs - 带有 UpgradeModule 的 Angular 6 无法解析 ApplicaitonModule 的所有参数

Question

我已经迁移了旧的 AngularJS 应用程序，以便使用 UpgradeModule 在升级模式下运行 Angular 5。一切正常我有一些服务迁移到 Angular 并使用了一些更现代的库，比如 ngx-translate。一切正常。然后我按照更新指南更新到 Angular 6。我修复了 rxjs 问题并且所有导入都指向正确但是当我统计应用程序时我刚刚得到：错误：无法解析 ApplicationModule 的所有参数：（？）。在控制台中。

这是我的 main.ts 文件的模块部分：

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']);
});

这是 package.json 文件：

"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"
  }

我修复的最后一件事是 ngx-translate，它对 Angular 5 和 6 有不同的版本，但这已经更新，仍然是问题。知道可能导致问题的原因吗？

标签： angularjsangularangular6angular-upgrade

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