0

所以我用 UpgradeModule 设置了一个混合的 AngularJS / Angular 应用程序，它工作正常，但我有一些性能问题。现在我想更改我的应用程序以使用 downgradeModule。我已阅读有关使用 downgradeModule 的官方文档，但无法使多个模块正常工作。

我有 3 个 Angular 模块：

  • AppModule（根角模块）
  • 共享模块（由每个功能模块导入）
  • PromoCodesModule（我的应用功能模块）

我使用带有 main.ts 文件的 webpack 作为条目。

应用模块

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { PromoCodesModule } from "./src-angular/promo-codes/promo-codes.module";
import { SharedModule } from "./src-angular/shared/shared.module";
@NgModule({
    imports: [
        BrowserAnimationsModule,
        HttpClientModule,
        FormsModule,
        ReactiveFormsModule,
        BrowserModule,
        SharedModule,
        PromoCodesModule,
    ],
    declarations: [],
    entryComponents: [],
    providers: [],
})
export class AppModule {
    ngDoBootstrap() {}
}

共享模块

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
    ],
    entryComponents: [
    ],
    providers: [
    ],
    exports: [
        CommonModule,
    ],
})
export class SharedModule {}

促销代码模块

import { NgModule } from "@angular/core";
import { SharedModule } from "../shared/shared.module";
import { PromoCodesDetailsPageComponent } from "./pages/promo-codes-details-page/promo-codes-details-page.component";
import { PromoCodesEntryPageComponent } from "./pages/promo-codes-entry-page/promo-codes-entry-page.component";
import { PromoCodesListPageComponent } from "./pages/promo-codes-list-page/promo-codes-list-page.component";
import { PromoCodesRestNewService } from "./services/promo-codes-rest/promo-codes-rest-new.service";
import { PromoCodesStateService } from "./services/promo-codes-state-service/promo-codes-state.service";

@NgModule({
    imports: [SharedModule],
    declarations: [
        PromoCodesListPageComponent,
        PromoCodesEntryPageComponent,
        PromoCodesDetailsPageComponent,
    ],
    entryComponents: [
        PromoCodesListPageComponent,
        PromoCodesEntryPageComponent,
        PromoCodesDetailsPageComponent,
    ],
    providers: [
        PromoCodesRestNewService,
        PromoCodesStateService,
    ],
    exports: [
        PromoCodesListPageComponent,
        PromoCodesEntryPageComponent,
        PromoCodesDetailsPageComponent,
    ],
})
export class PromoCodesModule {}

main.ts

import "core-js/es7/reflect";
import "zone.js";
import "@angular/localize/init";

import { StaticProvider } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import {
    downgradeModule,
    downgradeComponent,
    downgradeInjectable,
} from "@angular/upgrade/static";
import { AppModule } from "./app.module";
import { SharedModule } from "./src-angular/shared/shared.module";
import { PromoCodesListPageComponent } from "./src-angular/promo-codes/pages/promo-codes-list-page/promo-codes-list-page.component";
import { PromoCodesModule } from "./src-angular/promo-codes/promo-codes.module";
import { PromoCodesStateService } from "./src-angular/promo-codes/services/promo-codes-state-service/promo-codes-state.service";
declare var angular: any;

const bootstrapFnAppModule = (extraProviders: StaticProvider[]) => {
    const platformRef = platformBrowserDynamic(extraProviders);
    return platformRef.bootstrapModule(AppModule);
};

const bootstrapFnPromoCodesModule = (extraProviders: StaticProvider[]) => {
    const platformRef = platformBrowserDynamic(extraProviders);
    return platformRef.bootstrapModule(PromoCodesModule);
};
const bootstrapFnSharedModule = (extraProviders: StaticProvider[]) => {
    const platformRef = platformBrowserDynamic(extraProviders);
    return platformRef.bootstrapModule(SharedModule);
};

const downgradedAppModule = downgradeModule(bootstrapFnAppModule);
export const downgradedPromoCodesModule = downgradeModule(
    bootstrapFnPromoCodesModule
);
export const downgradedSharedModule = downgradeModule(bootstrapFnSharedModule);

angular
    .module("ngMyApp", [
        "myApp",
        downgradedAppModule,
        downgradedSharedModule,
        downgradedPromoCodesModule,
    ])
    .directive(
        "promoCodesListPage",
        downgradeComponent({
            component: PromoCodesListPageComponent,
            downgradedModule: downgradedPromoCodesModule,
        })
    )
    .factory(
        "promoCodesStateService",
        downgradeInjectable(PromoCodesStateService, downgradedPromoCodesModule)
    );

angular.bootstrap(document.body, ["ngMyApp"]);

促销代码-route.config

(function () {
    'use strict';

    angular
        .module('myApp')
        .config(PromoCodesNewRouteConfig);

    /* @ngInject */
    function PromoCodesNewRouteConfig($stateProvider, UI_ROUTER_CUSTOM_CONSTANTS, BreadcrumbsGenerationServiceProvider, BUILD_CONFIG) {
        $stateProvider
            .state('promo-codes-new', {
                // SOME CODE  //
                resolve: {
                    promoCodesStateService: ['promoCodesStateService', function initializeToStoreStateBetweenInternalViews (promoCodesStateService) {
                      
                        promoCodesStateService.init();
                        return promoCodesStateService;
                    }],
                },
                onExit: function (promoCodesStateService) {
                    promoCodesStateService.clean();
                }
            })

    }
})();

应用程序似乎可以正确引导，但是当我转到促销代码路线时出现此错误： 在此处输入图像描述

我做错了什么？

4

0 回答 0