如何解决“模块不可用！” 对混合 Angular 应用程序进行单元测试时

Question

我有一个带有 Karma-Jasmine 的混合 Angular 应用程序和单元测试，但我们遇到了一个小问题。 我有一个工厂和组件，它被降级为 AngularJS 应用程序：

angular
    .module('app.admin.branding')
    .factory('brandingFactory', downgradeInjectable(BrandingFactory));

angular
    .module('app.admin.branding')
    .directive('BrandNameComponent', downgradeComponent({
        component: BrandNameComponent
    }));

但它返回一个Module 'app.admin.branding' is not available! 在运行ng test

所以解决方案是添加括号。

angular
    .module('app.admin.branding', [])

对于组件和工厂。 它可以工作并且单元测试会运行，但是当在浏览器上运行并导航到使用该组件的页面时，会发生未知错误并重定向到主页。

所以我们只是删除了两个类的括号，因为它影响了我们的生产应用程序。 我们如何修复我们的单元测试错误Module 'app.admin.branding' is not available或者是否有任何使用括号方法的解决方法，以便它不会重定向？

Answer 1

简短的回答；

不太确定你的设置，可能有很多问题。 首先要尝试使用angular.mock.module ，就像这样；

beforeEach(() => TestBed.configureTestingModule({}));
beforeEach(angular.mock.module('app.admin.branding'));

请参阅此处的文档

希望这就是你所需要的

更长的答案；

您的“导入链”也可能有问题。

正如您所注意到的，当您执行angular.module('app.admin.branding', [])时，会创建 angularJS 模块。 当您将服务、指令等附加到此模块时，您可以不带括号引用它。

创建混合应用程序时，您需要小心创建“导入链”，即将您的应用程序链接在一起的导入语句链。

下面是使用 angular-cli 创建的工作 angular 混合的结构。

app-ajs 文件夹包含 angularJS 应用程序，该目录下的每个文件夹都包含一个 index.ts 文件，该文件导入文件夹内的所有指令、服务等。

我们应用程序中的第一个 index.ts 文件如下所示；

// Vendor dependencies;
import './../../node_modules/adal-angular/dist/adal-angular.min';
import './../../node_modules/angular-cookies/angular-cookies.min';
// ...etc.

// App dependencies...
import './app.module';
import './appDependencies.module';
import './subfolder1';  // In reality this is an app area, just to show the idea!
import './subfolder2';

子文件夹下的 index.ts 可能看起来像这样；

import './some.module';
import './some.service';
import './some.directive';

在这种情况下，该文件夹中将有一个名为some.module.ts文件，该文件将包含注册到模块的调用（即angular.module('some.module', []) ）

创建这个导入链有点乏味，但是一旦你有了它，你就可以从你的main.ts和test.ts使用它，像这样导入它：

import "./app-ajs";

这可确保您在生产中运行与测试中相同的代码。

希望这可以帮助。

Answer 2

从 Angular 8 开始，有createAngularJSTestingModule 。 有关示例，请参阅https://angular.io/api/upgrade/static/testing/createAngularJSTestingModule 。