Question

我正在使用angular4，我使用了a来使用社交分享按钮，它工作正常，但是当我发布我的项目时，它让我误以为： -

意外值中的错误'CeiboShare in E：/code/SportsFoundation/Gamification.Clients.Spa/node_modules/ng2-social-share/src/ng2-social-share.d.ts' 模块'AppModuleShared'声明 E：/code/SportsFoundation/Gamification.Clients.Spa/ClientApp/app/app.module.shared.ts'。请添加@ Pipe / @ Directive / @ Component注释。

我正在关注以下文章： - https://www.npmjs.com/package/ng2-social-share

在Angular 4中我们没有[指令]所以我在@ngModule的声明部分使用它

Answer 1

是的，您说得对，问题在于在构建大于 2 的角度版本的项目期间不支持包，因为指令不再是组件装饰器的一部分，即使您在模块声明中声明它，您的应用程序也支持在本地打包，但是当您构建用于生产的应用程序时，您最终会遇到错误。

您可以做的是删除包及其代码。

在您的打字稿文件上使用这些函数并从模板中调用它，您将获得与 ng2-social-share 给出的相同输出。

在此提供 5 个社交媒体分享 - Facebook、Pinterest、Twitter、GooglePlus、LinkedIn

  // Facebook share won't work if your shareUrl is localhost:port/abc, it should be genuine deployed url
  shareOnFacebook(shareUrl: string) {
    shareUrl = encodeURIComponent(shareUrl);
    window.open(`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`, 'sharer');
  }

  shareOnPinterest(shareUrl: string, img: string, desc: string) {
    shareUrl = encodeURIComponent(shareUrl);
    img = encodeURIComponent(img);
    desc = encodeURIComponent(desc);
    window.open(`https://www.pinterest.com/pin/create/button?url=${shareUrl}&media=${img}&description=${desc}`, 'sharer');
  }

  shareOnTwitter(shareUrl: string, desc: string) {
    shareUrl = encodeURIComponent(shareUrl);
    desc = encodeURIComponent(desc);
    window.open(`https://twitter.com/intent/tweet?url=${shareUrl}&text=${desc}`, 'sharer');
  }

  shareOnGooglePlus(shareUrl: string) {
    shareUrl = encodeURIComponent(shareUrl);
    window.open(`https://plus.google.com/share?url=${shareUrl}`, 'sharer');
  }

  // LinkedIn share won't work if your shareUrl is localhost:port/abc, it should be genuine deployed url
  shareOnLinkedIn(shareUrl: string, title: string, summary: string) {
    shareUrl = encodeURIComponent(shareUrl);
    window.open(`https://www.linkedin.com/shareArticle?url=${shareUrl}&title=${title}&summary=${summary}`, 'sharer');
  }

希望这会对您或其他人有所帮助。谢谢！

意外值'CeiboShare'请添加@ Pipe / @ Directive / @ Component注释

1 个答案: