在 angular 项目中使用 GoogleChromeLabs pinch-zoom

Question

I just started learning angular and I'm working on a project in which I want to add a pinch-zoom functionality. I found this library on github https://github.com/GoogleChromeLabs/pinch-zoom and I figured it is a perfect fit for my needs. As I am new to angular and front end technologies in general, so I need some help in setting it up. I have run the following command to install the package npm install --save-dev pinch-zoom-element (as per the readme file). I want to use it in a component html to be able to zoom in on a canvas.

<pinch-zoom>
  <canvas id="imageStream" width="320" height="240"></canvas>
</pinch-zoom>

But ehn building the project ( npm run build ) I get the following errors:

ERROR in 'pinch-zoom' is not a known element:
1. If 'pinch-zoom' is an Angular component, then verify that it is part of this module.
2. If 'pinch-zoom' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ion-item>

[ERROR ->]<pinch-zoom>
  <canvas id="<imageStream" width="320" height="240"></canvas>
</pinch-zoom>
")

My componenent's .spec.ts file contains the CUSTOM_ELEMENTS_SCHEMA

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ImageStreamComponent } from './image-stream.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

describe('ImageStreamComponent', () => {
  let component: ImageStreamComponent;
  let fixture: ComponentFixture<ImageStreamComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ImageStreamComponent ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      providers: [
        { }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ImageStreamComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

I also tried importing the module where I am using it, in the component's .ts file

import { PinchZoom } from 'pinch-zoom-element';

But I get the same errors when building the project with this additional one:

error TS2305: Module '"../../../node_modules/pinch-zoom-element/dist"' has no exported member 'PinchZoom'.

12 import { PinchZoom } from 'pinch-zoom-element';

I find this weird because if you look in the package source files you see the class exported with that name. Any feedback would be greatly appreciated!

Answer 1

If 'pinch-zoom' is a Web Component

and this is the case

then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

You should add this to the .module.ts file where you have declared your component, not in the .spec.ts file.