2017-10-18 3 views
0

Ich habe die quick start gefolgt und machte eine funktionierende Hallo Welt Webpart.Sharepoint SPFX - externe Javascript laden Problem

Ich möchte die Twitter-Widgets enthalten, so habe ich die Führung, gefolgt auf Hinzufügen externer JavaScript, this von git-Hub verbunden ist

ich fügen Sie folgendes zu meinem config.json

"externals": { 
    "widgets":"https://platform.twitter.com/widgets.js" 
}, 

und ich importiere mit

import 'widgets'; 

Aber ich bekomme die folgenden Fehler

***Failed to load component "ab3668f3-39a2-4b40-a307-a1bea4023df9" (TwitterWebPart). 
Original error: ***Failed to load URL 'https://platform.twitter.com/widgets.js' for resource 'widgets' in component 'ab3668f3-39a2-4b40-a307-a1bea4023df9' (TwitterWebPart). There was a network problem. 
This may be a problem with a HTTPS certificate. Make sure you have the right certificate. 

Die URL https://platform.twitter.com/widgets.js funktioniert gut.

Antwort

1

Sieht so aus, als gäbe es hier 2 Probleme.

This may be a problem with a HTTPS certificate. - dieser Fehler scheint von Twitter-Ende zu sein, und wir können nichts dagegen tun.

Zweitens ist die widgets.js nicht AMD. Also, Sie müssen es ein bisschen anders laden.

Referenz - Loading a non-AMD module

diese Probleme zu beheben, habe ich heruntergeladen https://platform.twitter.com/widgets.js Datei lokal und in einem anderen Ordner hinzugefügt.

Danach modifizierte ich die config.json wie folgt:

"externals": {  
     "widgets": { 
      "path": "scripts/widgets.js", 
      "globalName": "twttr" 
     } 
    }, 

Hier habe ich einen Ordner scripts an der Wurzel der Lösung und fügte hinzu, die JS-Datei dort genannt erstellt.

Ändern Sie bitte Ihre Import-Anweisung und fügen Sie sie ersetzen, wie unten:

require("widgets"); 

Als Inhalte in die Seite, Ihre Twitter-Feed wird nicht angezeigt injiziert wird, fügen Sie den Follow-Code Ihre Tweets laden

public constructor() { 
    super(); 
    let w= require("widgets"); 
    setTimeout(() => w.widgets.load(), 0); 
} 

Meine ist Ordnerstruktur wie folgt:

enter image description here

Nun, ruck schluck servieren, es wird richtig funktionieren.