[問卦] Angular 18,分享當前網頁的網址連接?

ruthertw 發表於 2024/6/5 下午8:59:38

看板Gossiping標題[問卦] Angular 18,分享當前網頁的網址連接?作者

ruthertw

(督人無數就是我)時間Jun 5 20:59:38 2024推噓 1 推:3 噓:2 →:3

PTT推薦

公司長官說他很熟javascript,

他跑去跟客戶承諾, 鬆一下:https://www.youtube.com/watch?v=4bIR6Xt768g

然後依照客戶要求,

其中一項,

是要開發分享當前網頁的網址,

也就是分享當前網頁網址連接到社群網站或APP的功能.

應該就是:https://reurl.cc/4r8Y7D

左手邊"分享本文"的功能.

鈣磷量!

公司裡面只有一位員工,

8年前寫過javascript,

公司長官要他用最新框架Angular 18,

跟其他同事一起寫完這項功能.

該同事問長官有什麼套件可以用?

長官說,

你自己查,

別問我啦!

我們有查到javascript套件,

可是沒人會用,

也猜不出 https://reurl.cc/4r8Y7D

左手邊"分享本文"的功能,

是用什麼套件寫的?

再拿套件去問長官,

阿長官你不是說你好熟javascript?

知不知道到底是哪個套件?

長官說,

他要下班去跟老闆用餐,

叫我們自己弄出來...

該位同事說他從Angular官方教學架好站,用ChatGPT,硬刻出以下內容:

[index.html]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A18</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js"></script>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<div ng-controller="MainController">
<button ng-click="shareOnFacebook()">Share on Facebook</button>
</div>
<script src="app.js"></script>
</body>
</html>

[app.js]
angular.module('myApp', [])
.controller('MainController', ['$scope', '$location', function($scope,
$location) {
$scope.shareOnFacebook = function() {
var currentUrl = $location.absUrl();
var facebookShareUrl =
'https://www.facebook.com/sharer/sharer.php?u=' +
encodeURIComponent(currentUrl);
window.open(facebookShareUrl, '_blank', 'width=600,height=400');
alert("yes!")
};
}]);

[app.component.ts]
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
export class AppComponent {
title = 'sshare!';
constructor() {
(window as any).fbAsyncInit = function() {
FB.init({
appId : '123456789',
cookie : true,
xfbml : true,
version : 'v11.0'
});
};
(function(d, s, id){
let js: HTMLScriptElement, fjs = d.getElementsByTagName(s)[0] as
HTMLScriptElement;
if (d.getElementById(id)) {return;}
js = d.createElement(s) as HTMLScriptElement; js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
if (fjs && fjs.parentNode) {
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'facebook-jssdk'));
}
shareOnFacebook() {
FB.ui({
method: 'share',
href: window.location.href,
}, function(response: any){});
}
}

[app.module.ts]
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ShareButtonsModule } from '@ngx-share/buttons';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ShareButtonsModule.withConfig({
debug: true
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

[app.component.html]
<style>
:host {
--bright-blue: oklch(51.01% 0.274 263.83);
--electric-violet: oklch(53.18% 0.28 296.97);
--french-violet: oklch(47.66% 0.246 305.88);
--vivid-pink: oklch(69.02% 0.277 332.77);
--hot-red: oklch(61.42% 0.238 15.34);
--orange-red: oklch(63.32% 0.24 31.68);

--gray-900: oklch(19.37% 0.006 300.98);
--gray-700: oklch(36.98% 0.014 302.71);
--gray-400: oklch(70.9% 0.015 304.04);

--red-to-pink-to-purple-vertical-gradient: linear-gradient(
180deg,
var(--orange-red) 0%,
var(--vivid-pink) 50%,
var(--electric-violet) 100%
);

--red-to-pink-to-purple-horizontal-gradient: linear-gradient(
90deg,
var(--orange-red) 0%,
var(--vivid-pink) 50%,
var(--electric-violet) 100%
);

--pill-accent: var(--bright-blue);

font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

h1 {
font-size: 3.125rem;
color: var(--gray-900);
font-weight: 500;
line-height: 100%;
letter-spacing: -0.125rem;
margin: 0;
font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe
UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
}

p {
margin: 0;
color: var(--gray-700);
}

main {
width: 100%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
box-sizing: inherit;
position: relative;
}

.angular-logo {
max-width: 9.2rem;
}

.content {
display: flex;
justify-content: space-around;
width: 100%;
max-width: 700px;
margin-bottom: 3rem;
}

.content h1 {
margin-top: 1.75rem;
}

.content p {
margin-top: 1.5rem;
}

.divider {
width: 1px;
background: var(--red-to-pink-to-purple-vertical-gradient);
margin-inline: 0.5rem;
}

.pill-group {
display: flex;
flex-direction: column;
align-items: start;
flex-wrap: wrap;
gap: 1.25rem;
}

.pill {
display: flex;
align-items: center;
--pill-accent: var(--bright-blue);
background: color-mix(in srgb, var(--pill-accent) 5%, transparent);
color: var(--pill-accent);
padding-inline: 0.75rem;
padding-block: 0.375rem;
border-radius: 2.75rem;
border: 0;
transition: background 0.3s ease;
font-family: var(--inter-font);
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.4rem;
letter-spacing: -0.00875rem;
text-decoration: none;
}

.pill:hover {
background: color-mix(in srgb, var(--pill-accent) 15%, transparent);
}

.pill-group .pill:nth-child(6n + 1) {
--pill-accent: var(--bright-blue);
}
.pill-group .pill:nth-child(6n + 2) {
--pill-accent: var(--french-violet);
}
.pill-group .pill:nth-child(6n + 3),
.pill-group .pill:nth-child(6n + 4),
.pill-group .pill:nth-child(6n + 5) {
--pill-accent: var(--hot-red);
}

.pill-group svg {
margin-inline-start: 0.25rem;
}

.social-links {
display: flex;
align-items: center;
gap: 0.73rem;
margin-top: 1.5rem;
}

.social-links path {
transition: fill 0.3s ease;
fill: var(--gray-400);
}

.social-links a:hover svg path {
fill: var(--gray-900);
}

@media screen and (max-width: 650px) {
.content {
flex-direction: column;
width: max-content;
}

.divider {
height: 1px;
width: 100%;
background: var(--red-to-pink-to-purple-horizontal-gradient);
margin-block: 1.5rem;
}
}
</style>

<main class="main">
<div class="content">
<div class="left-side">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 982 239"
fill="none"
class="angular-logo"
>
<g clip-path="url(#a)">
<path
fill="url(#b)"
d="M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215
159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675
21.602-64.311h1.227l21.602
64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71
7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465
1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074
14.81 4.992
24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91
0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046
4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147
0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145
2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554
8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845
7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383
9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101
3.109-9.165
0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565
0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7
7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.5822.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137
9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91
6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884
4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118
9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637
0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537
1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191
12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736
9.573 12.764 4.174 3.027 9.41 4.582 15.629
4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7
6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855
0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0
7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0
8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091
3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841
162.169c-7.61
0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801
0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637
4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027
7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782
1.963-1.309 3.027-3.273
3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955
0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183
10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909
10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0
11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455
12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719
3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828
1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145
14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854
3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419
1.145-7.037 1.636-2.619.491-5.155.9-7.692
1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355
1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.8829.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643
18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038
5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164
3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 00-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655
9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077
39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933
33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039
62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0
7.937 165.115Z"
/>
<path
fill="url(#c)"
d="M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215
159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675
21.602-64.311h1.227l21.602
64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71
7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465
1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074
14.81 4.992
24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91
0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046
4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147
0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145
2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554
8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845
7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383
9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101
3.109-9.165
0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565
0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7
7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.5822.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137
9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91
6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884
4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118
9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637
0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537
1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191
12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736
9.573 12.764 4.174 3.027 9.41 4.582 15.629
4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7
6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855
0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0
7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0
8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091
3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841
162.169c-7.61
0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801
0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637
4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027
7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782
1.963-1.309 3.027-3.273
3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955
0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183
10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909
10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0
11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455
12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719
3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828
1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145
14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854
3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419
1.145-7.037 1.636-2.619.491-5.155.9-7.692
1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355
1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.8829.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643
18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038
5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164
3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 00-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655
9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077
39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933
33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039
62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0
7.937 165.115Z"
/>
</g>
<defs>
<radialGradient
id="c"
cx="0"
cy="0"
r="1"
gradientTransform="rotate(118.122 171.182 60.81) scale(205.794)"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FF41F8" />
<stop offset=".707" stop-color="#FF41F8" stop-opacity=".5" />
<stop offset="1" stop-color="#FF41F8" stop-opacity="0" />
</radialGradient>
<linearGradient
id="b"
x1="0"
x2="982"
y1="192"
y2="192"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#F0060B" />
<stop offset="0" stop-color="#F0070C" />
<stop offset=".526" stop-color="#CC26D5" />
<stop offset="1" stop-color="#7702FF" />
</linearGradient>
<clipPath id="a"><path fill="#fff" d="M0 0h982v239H0z" /></clipPath> </defs>
</svg>
<h1>Hello, {{ title }}</h1>
<p>Congratulations! Your app is running. </p>
</div>
<div class="divider" role="separator" aria-label="Divider"></div>
<div class="right-side">
<div class="pill-group">
@for (item of [
{ title: 'Explore the Docs', link: 'https://angular.dev' },
{ title: 'Learn with Tutorials', link:
'https://angular.dev/tutorials' },
{ title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
{ title: 'Angular Language Service', link:
'https://angular.dev/tools/language-service' },
{ title: 'Angular DevTools', link:
'https://angular.dev/tools/devtools' },
]; track item.title) {
<a
class="pill"
[href]="item.link"
target="_blank"
rel="noopener"
>
<span>{{ item.title }}</span>
<svg
xmlns="http://www.w3.org/2000/svg"
height="14"
viewBox="0 -960 960 960"
width="14"
fill="currentColor"
>
<path
d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33
23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5
56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"
/>
</svg>
</a>
}
</div>
<div class="container">
<h1>Hello, {{ title }}</h1>
<p>Congratulations! Your app is running. </p>
<button (click)="shareOnFacebook()">Share on Facebook</button>
<share-buttons [include]="['facebook']" [theme]="'modern-light'"
[showText]="true"></share-buttons>
</div>
<img width="30" height="30" alt="Line" src="facebook.svg"/>
 
</a>
<a
href="https://twitter.com/angular"
aria-label="Twitter"
target="_blank"
rel="noopener"
>
<img width="26" height="26" alt="Line" src="twitterx-50.svg" />
</a>
</div>
</div>
</div>
</main>
<router-outlet />

[app.component.scss]
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Arial, sans-serif;

h1 {
font-size: 2rem;
margin-bottom: 1rem;
}

button {
padding: 0.5rem 1rem;
font-size: 1rem;
cursor: pointer;
}
}

[tsconfig.app.json]
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": ["facebook-js-sdk"]
},
"files": [
"src/main.ts",
"src/main.server.ts",
"server.ts"
],
"include": [
"src/**/*.d.ts"
]
}

TMD!!!!!!!!!!!!!!!

一堆錯誤呀!!!!!!!!

Application bundle generation failed. [1.214 seconds]

X [ERROR] NG8001: 'share-buttons' is not a known element:
1. If 'share-buttons' is an Angular component, then verify that it is
included in the '@Component.imports' of this component.
2. If 'share-buttons' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' tothe '@Component.schemas' of this component to suppress this message. [plugin
angular-compiler]

src/app/app.component.html:270:8:
270 │ <share-buttons [include]="['facebook']"
[theme]="'modern-...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error occurs in the template of component AppComponent.

src/app/app.component.ts:46:15:
46 │ templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~

X [ERROR] NG8002: Can't bind to 'include' since it isn't a known property of
'share-buttons'.
1. If 'share-buttons' is an Angular component and it has 'include' input,
then verify that it is included in the '@Component.imports' of this component.2. If 'share-buttons' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' tothe '@Component.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas'
of this component. [plugin angular-compiler]

src/app/app.component.html:270:23:
270 │ ... <share-buttons [include]="['facebook']"
[theme]="'modern-l...
~~~~~~~~~~~~~~~~~~~~~~~~

Error occurs in the template of component AppComponent.

src/app/app.component.ts:46:15:
46 │ templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~

X [ERROR] NG8002: Can't bind to 'theme' since it isn't a known property of
'share-buttons'.
1. If 'share-buttons' is an Angular component and it has 'theme' input, then
verify that it is included in the '@Component.imports' of this component.
2. If 'share-buttons' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' tothe '@Component.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas'
of this component. [plugin angular-compiler]

src/app/app.component.html:270:48:
270 │ ...de]="['facebook']" [theme]="'modern-light'"
[showText]="true">...
~~~~~~~~~~~~~~~~~~~~~~~~

Error occurs in the template of component AppComponent.

src/app/app.component.ts:46:15:
46 │ templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~

X [ERROR] NG8002: Can't bind to 'showText' since it isn't a known property of'share-buttons'.
1. If 'share-buttons' is an Angular component and it has 'showText' input,
then verify that it is included in the '@Component.imports' of this component.2. If 'share-buttons' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' tothe '@Component.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas'
of this component. [plugin angular-compiler]

src/app/app.component.html:270:73:
270 │ ...ok']" [theme]="'modern-light'"
[showText]="true"></share-buttons>
~~~~~~~~~~~~~~~~~

Error occurs in the template of component AppComponent.

src/app/app.component.ts:46:15:
46 │ templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~

Watch mode enabled. Watching for file changes...

同事崩潰中...

很明顯地這個方式不可行...

想要問,

有什麼Angular適合的套件可以完成這個功能?

有八卦嗎?

PS.

幫忙解決這個問題的大大,

必奉上重金P幣!!!