Dianas @DianaBirkelbach suggestion of adding the files as if they were css files in your ControlManifest is probably the best idea. I also do the same thing for Font Awesome.
<resources>
<css path="fonts/fa_solid_900.woff" order="2" />
<css path="fonts/fa_solid_900.woff2" order="2" />
<css path="fonts/fa_solid_900.ttf" order="2" />
</resources>
To make sure your component gets updated in the canvas app do the following.
Inside the Canvas App Editor.
* File -> Save -> Publish to make sure you have published your app
* File -> Close to complete close out your app in the editor. (* This is really important because the editor will never reload any changes unless you close and re-open the app.)
For your PCF Solution
* Increment the version attribute in the ControlManifest.Input.xml
* Increment the version property for the solution which imports the control.
* Import your solution with the component
Inside the Canvas App Editor.
*Open your app up again in the editor and you should be asked if you would like to upgrade the component. You can now test in the editor with your updated component.
*To make sure the app gets updated with your component updates make an arbitrary update to the app then do a File -> Save -> Publish to make sure you have published your app. (Note: Sometimes I don't see my changes reflected right away after publishing the app, i usually give it a minute or two and hit ctrl F5 a few times to do a full refresh.
Also just on a side note the best way i have found to then load your async javascript is by adding the script tag in your init and then doing an onload function to determine if it was loaded completely in the function that will utilize the script.
Add script during the init()
let headerScript: HTMLScriptElement = document.createElement("script");
headerScript.type = 'text/javascript';
headerScript.id = "BingMapsHeaderScript";
headerScript.async = true;
headerScript.defer = true;
headerScript.src=`https://www.bing.com/api/maps/mapcontrol?key=${apiKey}`;
headerScript.onload = () => {
this._bMapScriptIsLoaded = true;
}
this._container.appendChild(headerScript);
In the function which fire that utilizes the script you can use code like that below to ensure that the script was loaded.
public initMap(){
var self = this;
if (!this._bMapScriptIsLoaded) {
setTimeout(() => {self.initMap()}, 1000);
return;
}
...
}
--Rick
