ng test --code-coverage is considering only pollyfills file for unit test reports after upgrading to angular 7

Question

I have updated from angular 4 to 7. When trying to generate code coverage report Code coverage is considering only polyfills.ts and none of the .ts or .spec.ts files, although the 'ng test' command executes all test cases properly and all test case are pass, the 'ng test --code-coverage' is not generating appropriate report.

In correct report which is generated is as below: File polyfills.ts

the actual report should have all .ts files report and html report in coverage folder example File
demo scripts src/business

setting is as below:

   angular.json - 
   "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "codeCoverage": true,
        "main": "scripts/test.ts",
        "karmaConfig": "karma.conf.js",
        "polyfills": "demo/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",

 tsconfig.spec.json - 
 "files": [
 "../scripts/test.ts",
 "../demo/polyfills.ts"
 ],
 "include": [
  "**/*.spec.ts"
 ]

 test.ts -
 const context = require.context('../src', true, /\.spec\.ts$/)

---

Fix:

1. Add the following packages to devDependencies in package.json: a. "@angular-devkit/build-ng-packagr": "~0.6.3", b. "ng-packagr": "^3.0.0-rc.2"

2. Do a npm install (or yarn install)

3. Create a new entry for the src folder under projects in angular.json like so:

                   "ui-demo-lib": {  // name of library project, in this case for UI_Reports
                         "root": "",
                         "sourceRoot": "src", // root path of 
                         "projectType": "library",
                         "prefix": "lib",
                         "architect": {
                           "build": {
                             "builder": "@angular-devkit/build-ng-packagr:build",
                             "options": {
                               "tsConfig": "src/tsconfig.featurelib.json",
                             }
                           },
                           "test": {
                             "builder": "@angular-devkit/build-angular:karma",
                             "options": {
                               "main": "src/../scripts/test.ts", 
                               "tsConfig": "src/tsconfig.spec.json", 
                               "karmaConfig": "src/../karma.conf.js", 
                               "styles": [
                                 "demo/styles/main.scss",
                                 "node_modules/ngx-toastr/toastr.css",
                               ],
                               "stylePreprocessorOptions": {  // specific to UI_Demo
                                 "includePaths": [
                                   "node_modules"
                                 ]
                               }
                             }
                           },
                           "lint": {
                             "builder": "@angular-devkit/build-angular:tslint",
                             "options": {
                               "tsConfig": [
                                 "src/tsconfig.featurelib.json",
                                 "src/tsconfig.spec.json"
                               ],
                               "exclude": [
                                 "**/node_modules/**"
                               ]
                             }
                           }
                         }
                       }
   

Notes on this new entry:

• Angular CLI requires that all file paths under a project start with the sourceRoot path. For example: if the main test.ts file is in scripts/test (parent level), the main attribute in test options should points to src/../scripts/test.ts. • Outside of the projects property in angular.json, make sure to set the defaultProject property to the demo application; if the src/ folder is ui-demo-lib, then the demo/ folder would be the ui-demo. This way existing build functions won’t break.

2. In your repo’s test.ts file, remove all imports and replace them with the following:

            import 'core-js/es7/reflect';
            import 'zone.js/dist/zone';
            import 'zone.js/dist/zone-testing';
            import { getTestBed } from '@angular/core/testing';
            import {
              BrowserDynamicTestingModule,
              platformBrowserDynamicTesting
            } from '@angular/platform-browser-dynamic/testing';
   

After completing all steps, try adding back each additional import one by one if need be. The modules above, however, are required within Angular 7’s test environment. Other modules should only be imported if any of the zone files are being used (such as async-testing). The following modules are no longer compatible, regardless of repo: • zone.js/dist/jasmine-patch

Note: Check to make sure that the path pointing to your tests is relative to where your test file is. Since UI_Demo has its test.ts file in scripts/test.ts, require.context(‘../src’)

4. in src/tsconfig.spec.json, make sure that the files attribute includes the following: a. location of test.ts file (relative) b. location of polyfills.ts file (relative, usually found in demo folder)
5. In package.json: a. Change all scripts using ng-test to use ng-test –project . b. Replace any reference to PhantomJS to instead use ChromeHeadless. PhantomJS does not work with karma through angular CLI V7. c. Ex. ng test –browsers=PhantomJS ------- ng test --project ui-demo-lib --browsers=ChomeHeadless
6. Optional- in tsconfig.spec.ts, add the entry “**/.d.ts” to the include property.
7. Test the following commands: a. ng test --project b. ng test --project --watch=false --browsers=ChromeHeadless –code-coverage c. gulp build-inline d. ng build --aot --output-path=dist (should build the demo by default)