我希望能够在 Angular 13 中使用新的 photoswipe 5 库,但是无法正常导入。
错误:无法找到模块 'photoswipe/lightbox' 或其相应的类型声明.ts。 他们的主页上有纯JavaScript、Vue和React的示例,但没有Angular的示例。有什么办法可以让它工作吗?
谢谢。
复现问题:
1. 安装Angular CLI
因为我们还没有将photoswipe.d.ts类型文件添加到与代码相邻的app.component.ts中。
错误:无法找到模块 'photoswipe/lightbox' 或其相应的类型声明.ts。 他们的主页上有纯JavaScript、Vue和React的示例,但没有Angular的示例。有什么办法可以让它工作吗?
谢谢。
复现问题:
1. 安装Angular CLI
npm install -g @angular/cli
- 创建新的Angular应用程序
ng new ng-photoswipe --style scss --routing false
- 检查应用程序是否正在运行
cd ng-photoswipe
npm start
- 安装photoswipe
npm install photoswipe --save
- 添加示例代码
将app.component.html中的HTML代码替换为:
<div class="pswp-gallery pswp-gallery--single-column" id="gallery--getting-started">
<a
href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg"
data-pswp-width="1669"
data-pswp-height="2500"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-200.jpg" alt="" />
</a>
<a
href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-2500.jpg"
data-pswp-width="1875"
data-pswp-height="2500" data-cropped="true" target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-200.jpg" alt="" />
</a>
</div>
将 app.component.ts 中的 ts 代码替换为
import { AfterContentInit, Component, NgZone } from '@angular/core';
import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipe from 'photoswipe';
import 'photoswipe/style.css';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterContentInit {
constructor(private ngZone: NgZone) {}
ngAfterContentInit(): void {
this.ngZone.runOutsideAngular(() => {
const lightbox = new PhotoSwipeLightbox({
gallery: '#gallery--getting-started',
children: 'a',
pswpModule: PhotoSwipe,
});
lightbox.init();
});
}
}
因为我们还没有将photoswipe.d.ts类型文件添加到与代码相邻的app.component.ts中。
declare module 'photoswipe';
- 再次尝试运行
npm start
在控制台中构建时,我遇到了以下错误
Error: src/app/app.component.ts:3:32 - error TS2307: Cannot find module 'photoswipe/lightbox' or its corresponding type declarations.
3 import PhotoSwipeLightbox from 'photoswipe/lightbox';
- 更多信息
从PhotoSwipe的packages.json中导出: https://github.com/dimsemenov/PhotoSwipe/blob/master/package.json
"exports": {
".": "./dist/photoswipe.esm.js",
"./lightbox": "./dist/photoswipe-lightbox.esm.js",
"./dist/photoswipe.css": "./dist/photoswipe.css",
"./photoswipe.css": "./dist/photoswipe.css",
"./style.css": "./dist/photoswipe.css"
},
我的问题:
- 为什么这里的导入(import)不起作用?
- 与其他框架(如vue、react或纯javascript导入)有何区别?(请参见photoswipe示例)
- 库的作者是否有所作为?
在编写此示例时,我解决了自己的问题。 添加缺少的类型和导入CSS解决了此问题。