• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Adding The Aurelia Fetch Client Into An Aurelia CLI Project

Aurelia 1 · August 4, 2016

So you’re using the CLI to build your next Aurelia application and you want to use the Fetch client? You might have noticed by default it does not come configured with the Fetch client. Fortunately, adding it in is a piece of cake.

Firstly, we want to install the Fetch Client as well as a Fetch polyfill:

npm install aurelia-fetch-client whatwg-fetch --save

Now open up aurelia_project/aurelia.json

At the bottom in the bundles section, more specifically vendor-bundle.js look for the prepend section and add in the polyfill as this will be global and we want to include it before anything else. You might notice I put it above the RequireJS line.

"prepend": [
  "node_modules/bluebird/js/browser/bluebird.core.js",
  "node_modules/whatwg-fetch/fetch.js",
  "scripts/require.js"
],

Now e need to add into the dependencies section in the vendor bundle the reference to the aurelia-fetch-client dependency. I like things being in alphabetical order, so I put it above aurelia-framework.

"aurelia-fetch-client",

Now you can use the Fetch client in your apps import {HttpClient} from 'aurelia-fetch-client';

Dwayne

Leave a Reply Cancel reply

11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Peter
Peter
6 years ago

The URLSearchParams fix doesn’t work for me. Everything else does. Can I put this trivial interface declaration in a local file? If so, where should it go and how do I reference it in the typings.json file?

0
Peter
Peter
6 years ago

I ended up creating src/sundry-fixups and putting sundry fixups in it. Everything in the src folder is in scope so it’s not even necessary to declare dependency.

0
Eniep Yrekcaz
Eniep Yrekcaz
6 years ago

Thanks for the post. Everything worked for me as well except for the URLSearchParams fix.

I fixed it by adding
///
to the typings/index.d.ts file.

0
Eniep Yrekcaz
Eniep Yrekcaz
6 years ago

Not sure why the last comment didn’t work, possibly because it saw an html tag?
I added another reference to the typings/index.d.ts file where the path was ../node_modules/aurelia-fetch-client/doc/url.d.ts

0
Shane
Shane
6 years ago

Worked for me, I did have the same problem with URLSearchParams but by running typings install fixed the problem

0
WillT
WillT
6 years ago

Has something been updated? The typings install no longer works, cannot find it. I removed the dt~ and it did install something, but there’s a ton of errors.

0
WillT
WillT
6 years ago

The definition file got updated within the last few hours, and has a bunch of problems. I just copy and pasted an older version from July and it’s working. Not sure how to typings install the older version, no idea what version number to use.

0
Paul Harker
Paul Harker
6 years ago

I’m going to follow this post and WillT, I would love it if you see that the fix comes back on line

0
Dustin
Dustin
6 years ago

I assume typings is if you are using TypeScript right?

I’m using Babel and I can’t get any of this to work. `au run –watch` fails because it can’t fine `fetch.js`

0
Paul Harker
Paul Harker
6 years ago

I tried a lot of things, but I believe this was ultimately the solution:

REINSTALL AURELIA-CLI
`npm install -g npm`
`npm install -g aurelia-cli`
`npm install -g typescript`
`npm install -g typings`
`typings install`

UNINSTALL/REINSTALL aurelia-fetch client
`npm uninstall aurelia-fetch-client –save`
`npm install aurelia-fetch-client –save`

THEN INSTALL THE TYPINGS
`typings install dt~whatwg-fetch –global –save`

THEN YOU WILL WANT THE ReadableStream
`typings install dt~whatwg-streams –global –save`

That cleared all the aurelia-cli errors and does not rely on this (I was able to remove this completely) :
`”url”: “github:aurelia/fetch-client/doc/url.d.ts#bbe0777ef710d889a05759a65fa2c9c3865fc618″`

0
Paul Harker
Paul Harker
6 years ago

I installed again and ran into the URLSearchParams issue but found a great solution at: https://github.com/aurelia/fetch-client/issues/71

Contributor RomkeVdMeulen created a typings library add in for it. Use :
“`typings install github:RomkeVdMeulen/URLSearchParams –global –save“`

Worked great for me

0

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • Handling Errors with the Fetch API
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How To Paginate An Array In Javascript
  • Wild Natural Deodorant Review
  • How To Install Eufy Security Cameras Without Drilling or Using Screws

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz