Angular 6 升级模块无法解析应用程序模型的所有参数

Question

我已经将旧的 AngularJS 应用程序迁移到运行，Angular 5，使用 UpgradeModule 在升级模式下。一切正常我有一些服务迁移到 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"
  }

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

Answer 1

好的，经过大量搜索后，我在 Angular 的 git 集线器问题中发现了一个 post。我会 link 它是因为它是完美的读物，因为这个错误可能是由许多不同的问题引起的。

对我来说，这是 main.ts 中指定的导入和提供程序的顺序，所以这里：

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
    ]

例如，ValidationService 和 AlertService 都引用了 UtilService，但它在导入中低于它们。更改此设置后，我的问题得到解决。

这是问题的link，我认为它很有用，因为这可以为将来的人节省一天的搜索时间提供很好的参考。

angular git hub issue

Angular 6 升级模块无法解析应用程序模型的所有参数

Angular 6 with UpgradeModule cant resolve all parameters for ApplicaitonModule

angularjs

angular

angular6

angular-upgrade