0

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?

1 Answer 1

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();
}));
Sign up to request clarification or add additional context in comments.

3 Comments

Thankyou very much, this fixed this error! Now onto my next, sigh.. (new post)
@peterc share a link,maybe ill know something too.
All good and thanks @Antoniossss, I ended solving my other issue

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.