Angular Karma error after upgrading Angular from v7 to v8

Question

I have just updated my Angular v7 project to v8 using ng update . I have gone through all the steps, and the project builds fine. However, when I run ng test , I now get the following error (for all my components)

    Failed: Template parse errors:
    'my-date-picker' is not a known element:
    1. If 'my-date-picker' is an Angular component, then verify that it is part of this module.
    2. If 'my-date-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <h3>A date picker for selecting a single date of the year</h3>
    <div style="width:100px">
            [ERROR ->]<my-date-picker></my-date-picker>
    </div>
    <hr />
    "): ng:///DynamicTestModule/DatePickerExampleComponent.html@4:4
    Can't bind to 'value' since it isn't a known property of 'my-date-picker'.
    1. If 'my-date-picker' is an Angular component and it has 'value' input, then verify that it is part of this module.
    2. If 'my-date-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

These use to work before the upgrade.

The component is declared..

beforeEach(async(() => {
  TestBed.configureTestingModule({      
    declarations: [DatePickerExampleComponent],      
  })
  .compileComponents();
}));

and exists in the app.module declarations.

I have the following dev deps

"devDependencies": {
            "@angular-devkit/build-angular": "~0.803.29",
            "@angular-devkit/build-ng-packagr": "~0.803.29",
            "@angular/cli": "~8.3.29",
            "@angular/compiler-cli": "~8.2.14",
            "@angular/language-service": "~8.2.14",
            "@types/cypress-image-snapshot": "^3.1.5",
            "@types/jasmine": "~2.8.8",
            "@types/jasminewd2": "^2.0.8",
            "@types/jest-image-snapshot": "^4.3.0",
            "@types/node": "^8.9.5",
            "codelyzer": "^5.0.1",
            "concurrently": "^6.2.0",
            "cypress": "7.4.0",
            "cypress-image-snapshot": "^4.0.1",
            "jasmine-core": "~2.99.1",
            "jasmine-spec-reporter": "~4.2.1",
            "karma": "~4.0.0",
            "karma-chrome-launcher": "~2.2.0",
            "karma-coverage-istanbul-reporter": "~2.0.1",
            "karma-jasmine": "~1.1.2",
            "karma-jasmine-html-reporter": "^0.2.2",
            "ng-packagr": "^5.4.0",
            "protractor": "~5.4.0",
            "shx": "^0.3.2",
            "ts-node": "^7.0.1",
            "tsickle": "^0.37.0",
            "tslib": "^1.14.1",
            "tslint": "~5.11.0",
            "typescript": "~3.5.3",
            "wait-on": "^5.3.0"
        }

Anyone with any ideas?

Answer 1

You have either redeclare your component in declarations for test module, or import module that contains your component

beforeEach(async(() => {
  TestBed.configureTestingModule({      
    declarations: [DatePickerExampleComponent,YourDatePickerHere],      
  })
  .compileComponents();
}));

or

beforeEach(async(() => {
  TestBed.configureTestingModule({      
    declarations: [DatePickerExampleComponent],
    imports:[ModuleWithYourDatePickerComponent]      
  })
  .compileComponents();
}));