1

Unfortunately, with Angular there appear to be a lot of config files and base files required to make a project run. Rather than littering this page with code and making a big copy paste job, I have put it in a repo that can be cloned and run here. Or it can be run online in using StackBlitz here. StackBlitz also cannot resolve the "TFS" package that should be being included from the VSS Web Extension Package.

I am trying to use the VSS Web Extension SDK and Angular together in order to make a custom widget for my Azure Dashboard. (Please note that access to Azure is not required for this question)

I am unable to load the library I want to use at runtime and I am unsure of why.

I am getting the following error.

Uncaught ReferenceError: TFS is not defined
    at Object.TFS/Dashboards/WidgetHelpers (WidgetHelpers":1)
    at __webpack_require__ (bootstrap:79)
    at Object../src/app/app.component.ts (Binding.component.ts:14)
    at __webpack_require__ (bootstrap:79)
    at Object../src/app/app.module.ts (app.component.ts:76)
    at __webpack_require__ (bootstrap:79)
    at Object../src/main.ts (environment.ts:19)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (polyfills.ts:72)
    at __webpack_require__ (bootstrap:79)

I have a custom webpack config file to extend the default angular build webpack config that looks like

module.exports = {
    externals: [
        /^VSS\/.*/, /^TFS\/.*/, /^q$/
    ]
};

The externals were extracted from a project that seemed to have a webpack config file set up, called Generator VSTS Extension. Their config can be accessed here. I found this after I was having build issues at compile time.

The error is generated at run time from the app.component.ts file. When the lines that involve the library are commented out, there are no issues.

I'm quite new to both Webpack and Angular so I've probably made a mistake with extending the Angular builder but I am not sure. Does anyone have any suggestions on what I am doing wrong?

I have uploaded a minimal runnable example project to GitHub that can be downloaded and run as long as you have npm set up. You can get that here. Run with StackBlitz

Dan
  • 7,286
  • 6
  • 49
  • 114
  • Possible duplicate of [Angular Cli Webpack, How to add or bundle external js files?](https://stackoverflow.com/questions/38855891/angular-cli-webpack-how-to-add-or-bundle-external-js-files) – Reactgular Jun 27 '19 at 13:58
  • This SDK package that you're using supports module loading and TypeScript. I think you've just complicated everything for yourself. Have you tried just `npm install vss-web-extension-sdk` and then **import** the modules you need. Here you're doing a webpack thing, a **require** and using a *lib* folder. I don't think any of that is needed. – Reactgular Jun 27 '19 at 14:01
  • @Reactgular Thanks for the response. I don't think it is a duplicate of that question, as I have referenced the VSS js script in the scripts. Also the lib folder is only used to make referencing the specified scripts easier. It is similar to the "vendor" folder mentioned in the question you linked (2nd answer). I was looking to use angular as I quite like the way the framework works and would allow me to write the UI for the widget. However, as I mentioned in the question I am struggling with understanding the webpack thing to make the vss module work – Dan Jun 27 '19 at 18:49
  • @Reactgular I have looked at just using vss-web-extension-sdk and I have managed to get working samples with that, but I was hoping to mix the use of that module with a framework such as Angular – Dan Jun 27 '19 at 18:51
  • @Reactgular I did come across this [issue](https://github.com/Microsoft/vss-web-extension-sdk/issues/72) in the github page after posting this question. It seems to address the issue. Do you happen to know what a "loader" function is? I have been unable to work out what one is and how to implement it. Thanks again for any help you can offer – Dan Jun 27 '19 at 18:55
  • I'm not sure now. I read that issue, and he's saying that the bundles are disconnected. So you have to use a run-timer loader to install the JS library. That sounds anti-bundle to me, and I'm not sure how to make it work now. You might have do a custom Angular bootstrap to get this to work. That's kind of hard to explain to someone who's just starting with Angular. – Reactgular Jun 27 '19 at 19:23

0 Answers0