I am currently working on a hybrid application using AngularJS and Angular 8. The new components I create in Angular need to be downgraded for use in AngularJS. Here is a snippet of the module code:
@NgModule({
// Declarations and Imports
providers:[
ServiceName,
// Other Services
],
entryComponents: [
ComponentName,
// Other components for use in AngularJS
]
})
export class FeatureModule{
}
declare var angular: angular.IAngularStatic
angular.module('app')
.directive('cmpName', downgradeComponent({component: ComponentName }) as angular.IDirectiveFactory)
.factory('serviceName', downgradeInjectable(ServiceName));
In the app.module.ts file, you will find the following code:
// Regular Code
export class AppModule {
constructor(
private upgrade: UpgradeModule,
) {
}
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['app'], { strictDi: true });
}
}
No updates have been made to the component spec file generated by the Angular CLI.
The tsconfig.spec.json file looks like this:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"baseUrl": "./",
"outDir": "../out-tsc/spec",
"types": ["jasmine", "node", "angular"]
},
"files": ["test.ts", "polyfills.ts"],
"include": ["**/*.spec.ts", "**/*.d.ts"]
}
The karma.conf.js file has the following configuration:
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
});
};
When running the tests with npm run test or ng test, I encounter the error:
An error was thrown in afterAll Uncaught ReferenceError: angular is not defined ReferenceError: angular is not defined at Module../..path-to-module-file/feature.module.ts.How can I resolve this issue? Do I need to mock the angular variable declared in the module file? Any assistance would be greatly appreciated.