微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何通过在库中导入 OwlMomentDateTimeModule 在 Angular 应用程序中配置笑话?

如何解决如何通过在库中导入 OwlMomentDateTimeModule 在 Angular 应用程序中配置笑话?

Angular 上有一个包含以下模块的库:

import { NgModule } from '@angular/core';
import { AngularTestLibComponent } from './angular-test-lib.component';

import { DateTimeAdapter,OWL_DATE_TIME_FORMATS,OWL_DATE_TIME_LOCALE,OwlDateTimeIntl,OwlDateTimeModule } from 'ng-pick-datetime';
import { OwlMomentDateTimeModule } from 'ng-pick-datetime/date-time/adapter/moment-adapter/moment-date-time.module';
import { MomentDateTimeAdapter,OWL_MOMENT_DATE_TIME_ADAPTER_OPTIONS } from 'ng-pick-datetime/date-time/adapter/moment-adapter/moment-date-time-adapter.class';



@NgModule({
  declarations: [
    AngularTestLibComponent
  ],imports: [
    OwlMomentDateTimeModule,],exports: [
    AngularTestLibComponent
  ],providers: [
    { provide: OwlDateTimeIntl },{ provide: OWL_DATE_TIME_LOCALE,useValue: 'ru' },{ provide: DateTimeAdapter,useClass: MomentDateTimeAdapter,deps: [OWL_DATE_TIME_LOCALE,OWL_MOMENT_DATE_TIME_ADAPTER_OPTIONS] },{ provide: OWL_DATE_TIME_FORMATS,useValue: null },})
export class AngularTestlibmodule { }

当我将此库导入 Angular 应用程序并运行测试(在应用程序中)时,出现错误

home/ivan/projects/angular-test-2/my-test-app/node_modules/ng-pick-datetime/date-time/adapter/moment-adapter/moment-date-time.module.js:7

import { NgModule } from '@angular/core';
    ^^^^^^

SyntaxError: Cannot use import statement outside a module

我认为这是因为使用绝对路径导入:ng-pick-datetime/date-time/adapter/moment-adapter/moment-date-time.module。但不知道如何解决这个问题。如何解决这个问题?

申请文件

jest.config.js:

module.exports = {
    preset: 'jest-preset-angular',setupFilesAfterEnv: [
        '<rootDir>/jest.setup.ts'
    ],transform: {
        '^.+\\.(ts|tsx)?$': 'ts-jest',"^.+\\.(js|jsx)$": "babel-jest",// "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/file.js",}
};

babel.config.js:

module.exports = {
  presets: [
    ['@babel/preset-env',{targets: {node: 'current'}}],'@babel/preset-typescript',};

package.json:

{
  "name": "my-test-app","version": "0.0.0","scripts": {
    "ng": "ng","start": "ng serve","build": "ng build","test": "jest --coverage --config ./jest.config.js","test:watch": "jest -o --watch --config ./jest.config.js","lint": "ng lint","e2e": "ng e2e"
  },"private": true,"dependencies": {
    "@angular/animations": "~11.2.1","@angular/cdk": "^11.2.9","@angular/common": "~11.2.1","@angular/compiler": "~11.2.1","@angular/core": "~11.2.1","@angular/forms": "~11.2.1","@angular/platform-browser": "~11.2.1","@angular/platform-browser-dynamic": "~11.2.1","@angular/router": "~11.2.1","@dzencot/my-test-angular-lib": "0.0.10","moment": "^2.29.1","ng-pick-datetime": "^7.0.0","rxjs": "~6.6.0","tslib": "^2.0.0","zone.js": "~0.11.3"
  },"devDependencies": {
    "@angular-builders/jest": "^11.1.1","@angular-devkit/build-angular": "~0.1102.1","@angular/cli": "~11.2.1","@angular/compiler-cli": "~11.2.1","@babel/core": "^7.13.15","@babel/preset-env": "^7.13.15","@babel/preset-typescript": "^7.13.0","@testing-library/angular": "^10.5.0","@types/jasmine": "~3.6.0","@types/jest": "^26.0.22","@types/node": "^12.11.1","babel-jest": "^26.6.3","codelyzer": "^6.0.0","jest": "^26.6.3","jest-preset-angular": "^8.4.0","ts-jest": "^26.5.5","ts-node": "~8.3.0","tslint": "~6.1.0","typescript": "~4.1.2"
  }
}

回购:

应用程序 - https://github.com/dzencot/angular-testing-app

库 - https://github.com/dzencot/angular-testing-library

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。