Краткое описание проблемы

Я переношу старое приложение AngularJS для использования Webpack и разделяю его на три части, которые я хочу представить в виде модулей AngularJS:

• src-ts-admin
• src-ts-общий
• src-ts-магазин

Например, я хотел бы, чтобы «src-ts-admin» использовал службы из «src-ts-common», но, к сожалению, webpack объединяет файлы в неправильном порядке для внедрения зависимостей AngularJS, так что я получаю такие ошибки, как ..

Error: "[$injector:unpr] Unknown provider: filterServiceProvider <- filterService <- initializerService

.. где initializerService — служба из src-ts-admin, а filterService — из src-ts-common. Суть проблемы в том, что

• module("ADMIN").service("initializerService") выполняется перед
• модуль ("ОБЩИЙ"). сервис ("filterService")

.. хотя я не могу определить проблему в зависимостях.

Обзор файла

src-ts-admin: app.ts

Это точка входа в веб-пакет, но не такая интересная. Маршрутизация приложения активирует app.initializer.ts.

import angular from 'angular';
import { appModule } from './app.module';

src-ts-admin: app.module.ts

import angular from 'angular';
import commonModuleName from '../src-ts-common/common.module';

var modulezz;
modulezz = [commonModuleName,'ngRoute', 'ui.router', 'ui.multiselect', 'ui.bootstrap', 'ui.bootstrap-slider', 'ui.bootstrap.buttons', 'duScroll',
            'ngMessages', 'colorpicker.module', 'angular-bind-html-compile', 'pascalprecht.translate'];

export var appModule = angular.module("ADMIN", modulezz);
export default appModule.name;

src-ts-admin: app.initializer.ts

import angular from "angular";
import appModuleName from "./app.module";
import { filterService } from "../src-ts-common/service/filter-service-model";

export class InitializerController {
    static $inject = ...etc...
    constructor(...etc...) {

    /* THIS IS KICKED OFF BY AN ANGULAR ROUTE, THIS KICKS OFF THE InitializerController BELOW */

    }
}
angular.module(appModuleName).controller("initializerController", InitializerController);

export class InitializerService {
    static $inject = ["$stateParams", "$window", "$timeout", "filterService", ...etc...];
    constructor(private $stateParams, private $window, private $timeout, private filterService: filterService, ...etc...) {

        /* THIS IS WHERE THE DEPENDENCY INJECTION FAILS */

    }
}
angular.module(appModuleName).service("initializerService", InitializerService);

src-ts-common: common.module.ts

import angular from 'angular';
export default angular.module("COMMON",[]).name;

src-ts-common: filter.service.ts

import angular from "angular";
import commonModuleName from '../common.module';

export class filterService {
    static $inject = [];
    constructor() {
    /* ...simplified... */
    }
}
angular.module(commonModuleName).service("filterService", filterService);

Мои мысли

Ошибка, которую я получаю, это ..

Error: "[$injector:unpr] Unknown provider: filterServiceProvider <- filterService <- initializerService

.. что указывает мне, что app.initializer.ts выполняется перед filter.service.ts, хотя он импортирует этот файл.

Вы видите какие-либо очевидные ошибки, которые я сделал? Есть ли у вас какие-либо рекомендации по структурированию импорта модулей AngularJS + Webpack и вырезанию файлов?

--- Решение (обновить!) ---

Благодаря https://stackoverflow.com/a/59631154/5244937 я смог решить свою проблему. Шаблон, который я должен был использовать, состоял в том, чтобы инициализировать модули angular (например, angular.module(commonModuleName).service("filterService", filterService);) в файлах app.module.ts и common.module.ts, а НЕ вместе с их реализациями класса.

Вот исправленные файлы:

src-ts-admin: app.ts

/* here i am more or less just kicking off the angular application after i import app.module.ts */
import { appModule } from './app.module';

appModule.run(["$rootScope", "$location", ...,
    function ($rootScope, $location, ...) {
  ..
}

appModule.controller('appController', ['$scope', ..,
    function ($scope: any, ...) {
  ..
}

src-ts-admin: app.module.ts

/** here (1) i am initializing all angular controllers, services, factories from the ADMIN package & (2) importing the COMMON module  */

import angular from 'angular';
import ngRoute from 'angular-route';
import uiRouter from 'angular-ui-router';
import 'angular-messages';
import 'angular-translate';
import dptCommonModuleName from '../src-ts-common/common.module';

var modulezz;
modulezz = [dptCommonModuleName, ngRoute, uiRouter, 'ui.multiselect', 'ui.bootstrap', 'ui.bootstrap-slider', 'ui.bootstrap.buttons', 'duScroll',
        'ngMessages', 'colorpicker.module', 'angular-bind-html-compile', 'pascalprecht.translate'];

export var appModule = angular.module("DPT", modulezz);
export var appModuleName = appModule.name;

/**
 * Services
 */
angular.module(appModuleName).service("systemParameterService", systemParameterService);
angular.module(appModuleName).service("statisticsService", statisticsService);
angular.module(appModuleName).service("deletionCheckService", deletionCheckService);
...

src-ts-admin: app.initializer.ts

/** here i have removed (1) the import of angular.module.ts and (2) the initialization of angular controller and service "initializerController" and "initializationService" */

import angular from "angular";
import { filterService } from "../src-ts-common/service/filter-service-model";

export class InitializerController {
    static $inject = ...etc...
    constructor(...etc...) {

    /* THIS IS KICKED OFF BY AN ANGULAR ROUTE, THIS KICKS OFF THE InitializerController BELOW */

    }
}

export class InitializerService {
    static $inject = ["$stateParams", "$window", "$timeout", "filterService", ...etc...];
    constructor(private $stateParams, private $window, private $timeout, private filterService: filterService, ...etc...) {

        /* THIS IS WHERE THE DEPENDENCY INJECTION FAILS */

    }
}

src-ts-common: common.module.ts

/* here i have added the initialization of the angular service filterService and all other services, factories, .. contained in that module */

var moduleName = angular.module("DPT.COMMON",[]).name
export default moduleName;

angular.module(moduleName).factory("filterModel", function () { return filterModel; });
angular.module(moduleName).factory("filterPresetModel", function () {return filterPresetModel;});
angular.module(moduleName).factory("productModel", function () {return productModel;});
angular.module(moduleName).factory("propertyProfileModel", [function () {return propertyProfileModel;}]);
angular.module(moduleName).factory("propertyValueModel",function () {return propertyValueModel;});

src-ts-common: filter.service.ts

/** здесь я (1) удалил импорт common.module и (2) инициализировал angular.module(..).service("filterService", ..) */

import angular from "angular";

export class filterService {
    static $inject = [];
    constructor() {
    /* ...simplified... */
    }
}