将 Angular 从 v7 升级到 v8 后出现 Angular Karma 错误

时间:2021-06-04 08:25:03

标签: angular karma-jasmine

我刚刚使用 ng update 将我的 Angular v7 项目更新到了 v8。我已经完成了所有步骤,并且项目构建良好。但是,当我运行 ng test 时,我现在收到以下错误(对于我的所有组件)

    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. ("

这些用于在升级前工作。

组件已声明..

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

并存在于 app.module 声明中。

我有以下开发部门

"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"
        }

有人有什么想法吗?

1 个答案:

答案 0 :(得分:1)

您要么在测试模块的声明中重新声明您的组件,要么导入包含您的组件的模块

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

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