Angularjs 单元测试混合Angular Js和Angular 8应用程序

我正在开发angular js和angular 8混合应用程序。在angular中创建的新组件将降级，以便在angular js中使用。模块的代码段如下所示：

@NgModule({
    // Declaration and Imports
    providers:[
        ServiceName,
        // Other Services
    ],
    entryComponents: [
        ComponentName,
        // Other components to be used in angular js
    ]
})
export class FeatureModule{
}

declare var angular: angular.IAngularStatic
angular.module('app')
   .directive('cmpName', downgradeComponent({component: ComponentName }) as angular.IDirectiveFactory)
   .factory('serviceName', downgradeInjectable(ServiceName));

在

app.module.ts

文件中，有以下代码

// Usual Stuff
export class AppModule {
  constructor(
    private upgrade: UpgradeModule,
  ) {
  }

  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['app'], { strictDi: true });
  }
}

angular cli生成的组件规范文件中未更新任何内容

在

tsconfig.spec.json

中

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "../out-tsc/spec",
    "types": ["jasmine", "node", "angular"]
  },
  "files": ["test.ts", "polyfills.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]
}

karma.conf.js

如下所示

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage/ProjectFolder'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

现在，如果我运行

npm run test

或

ng test

命令来运行测试套件，我将得到以下错误。

在所有未捕获的引用之后引发错误错误错误：未定义角度引用错误：未在模块处定义角度../.模块文件/feature.Module.ts的路径。

---

我如何解决这个问题？我是否必须模拟模块文件中声明的

angular

变量。非常感谢您的帮助？

我不知道太多的细节，但我使用Webpack和Karma运行了一个混合应用程序。我降低了所有组件的级别，以便它们可以在AngularJS中使用，就像您一样

区别在于我有一个名为

vendor.ts

的文件，其中包含AngularJS。我打赌你也是，因为你只谈论测试失败，而不是产品损坏。我的Karma配置文件中有一个条目：

文件：[
{pattern:“node_modules/babel polyfill/dist/polyfill.js”，watched:false}，
{pattern:“node_modules/intl/locale data/jsonp/en GB.js”，watched:false}，
{pattern:“node_modules/intl/locale data/jsonp/fr-fr.js”，wasted:false}，
{pattern:“static/polyfills.ts”，waved:false}，
{模式：“static/vendor.ts”，注意：false}，
{pattern:“node_modules/zone.js/dist/long stack trace zone.js”，watched:false}，
{pattern:“node_modules/zone.js/dist/proxy.js”，waved:false}，
{pattern:“node_modules/zone.js/dist/sync test.js”，waved:false}，
{pattern:“node_modules/zone.js/dist/jasmine patch.js”，waved:false}，
{pattern:“node_modules/zone.js/dist/async test.js”，waved:false}，
{模式：“node_modules/zone.js/dist/fake async test.js”，注意：false}，
{pattern:“node_modules/angular mocks/angular mocks.js”，waved:false}，
{pattern:“static/main.ts”，watched:false}，
{pattern:“static/main.test.ts”，waved:false}，
],

---

这会告诉业力哪些文件要保存。我想这意味着在Webpack编译这些文件后，Karma Webpack可以找到编译的文件并提供服务。

我不知道太多的细节，但我运行了一个Webpack和Karma的混合应用程序。我降低了所有组件的级别，以便它们可以在AngularJS中使用，就像您一样

区别在于我有一个名为

vendor.ts

的文件，其中包含AngularJS。我打赌你也是，因为你只谈论测试失败，而不是产品损坏。我的Karma配置文件中有一个条目：

文件：[
{pattern:“node_modules/babel polyfill/dist/polyfill.js”，watched:false}，
{pattern:“node_modules/intl/locale data/jsonp/en GB.js”，watched:false}，
{pattern:“node_modules/intl/locale data/jsonp/fr-fr.js”，wasted:false}，
{pattern:“static/polyfills.ts”，waved:false}，
{模式：“static/vendor.ts”，注意：false}，
{pattern:“node_modules/zone.js/dist/long stack trace zone.js”，watched:false}，
{pattern:“node_modules/zone.js/dist/proxy.js”，waved:false}，
{pattern:“node_modules/zone.js/dist/sync test.js”，waved:false}，
{pattern:“node_modules/zone.js/dist/jasmine patch.js”，waved:false}，
{pattern:“node_modules/zone.js/dist/async test.js”，waved:false}，
{模式：“node_modules/zone.js/dist/fake async test.js”，注意：false}，
{pattern:“node_modules/angular mocks/angular mocks.js”，waved:false}，
{pattern:“static/main.ts”，watched:false}，
{pattern:“static/main.test.ts”，waved:false}，
],

---

这会告诉业力哪些文件要保存。我认为这意味着在Webpack编译这些文件后，Karma Webpack可以找到编译的文件并提供服务。

@Rubin Helsloot没有

供应商。ts

。您能告诉我供应商.ts的外观或资源链接吗？感谢您不需要

供应商.ts本身。它只是一个带有
import“angular”的文件；导入“@angular/common”。。。输入“zonejs”无额外代码。您的代码库中是否有从“angular”
导入“angular”或从“angular”

导入为angular的变量？我们在功能模块中将VARABLE声明为

声明变量angular:angular.IAngularStatic

。我在功能模块中尝试了

import*as angular from angular

，但它破坏了构建和测试？检查结果文件，它是否包含任何AngularJS代码？它是完全有角度的。我已经在问题本身中添加了功能模块文件的外观。我也一直在使用角度cli@RubinHelsloot没有

供应商。ts

。您能告诉我供应商.ts的外观或资源链接吗？感谢您不需要

供应商.ts本身。它只是一个带有
import“angular”的文件；导入“@angular/common”。。。输入“zonejs”无额外代码。您的代码库中是否有从“angular”
导入“angular”或从“angular”

导入为angular的变量？我们在功能模块中将VARABLE声明为

声明变量angular:angular.IAngularStatic

。我在功能模块中尝试了

import*as angular from angular

，但它破坏了构建和测试？检查结果文件，它是否包含任何AngularJS代码？它是完全有角度的。我已经在问题本身中添加了功能模块文件的外观。我也一直在使用angular cli