Add dependencies to Aurelia project

Question

I set up an Aurelia project using the minimal project given here.

Then I added the fetch-client using npm install aurelia-fetch-client --save command. It updated package.json to contain following:

"dependencies": {
    "aurelia-fetch-client": "^1.1.0"
  }

But when I added import {HttpClient} from 'aurelia-fetch-client'; to my app.js file and tried running the app, but got following error:

system.js:4 GET http://localhost:5000/aurelia-fetch-client 404 (Not Found)

How do I add that? Where does this project keep track of its dependencies? I have seen lots of tutorials which help setting up the fetch client in aurelia cli projects. How about the project given here?

Maybe you have to do `import {HttpClient} from './node_modules/aurelia-fetch-client'` — bigopon, Dec 21 '16 at 06:32
Thanks, I tried that, but the problem is my `node_modules` is outside `wwwroot`, and `aspnet` is serving `wwwrooot` folder so it can't access `node_modules`. — software_writer, Dec 21 '16 at 06:39
This article is not a production-ready set up. It is just a simple example of how the framework works. If you want to install modules and/or send your app to production, you should use `aurelia-cli` or one of the skeleton projects https://github.com/aurelia/skeleton-navigation/releases/latest instead — Fabio, Dec 21 '16 at 12:20
Thanks, I can stick to `cli`; btw is there any way for me to make it production-ready just so I can add a few dependencies? — software_writer, Dec 21 '16 at 15:16
In the end, what did you decide? Were you able to get this working? — LStarky, Dec 31 '16 at 13:41
Well, I was not able to add it to the minimal project above; I ended up using the skeleton Typescript project. — software_writer, Dec 31 '16 at 20:44

score 2 · Answer 1 · answered Dec 21 '16 at 12:37

2

First, follow Fabio Luz's advice above and actually install either aurelia-cli or a skeleton framework.

Then, I have found this next step to be one of the most common sources of confusion for most people who are learning Aurelia. After installing new modules via npm, you have to manually list them as a dependency in aurelia.json (in your aurelia_project folder). For example, you would list aurelia-fetch-client as follows:

"dependencies": [
  "aurelia-binding",
  "aurelia-bootstrapper",
  "aurelia-dependency-injection",
  "aurelia-event-aggregator",
  ...
  "aurelia-fetch-client",
  ...

After it is listed as a dependency, it will be included in the vendor.js bundle (in the CLI, by running au run --watch) so that it can be accessed by your application when you import it in individual components.

import {HttpClient} from 'aurelia-fetch-client';

answered Dec 21 '16 at 12:37

LStarky

2,740
1
17
47

2

Just to note, there is work currently happening to automate the process of modifying the `aurelia.json` file. – Ashley Grant Dec 21 '16 at 14:20
Yeah, I'm aware of and grateful for that work! If you're a part of it, thank you! – LStarky Dec 21 '16 at 14:21
I wish I could say I was, but I'm just the bearer of good news this time. – Ashley Grant Dec 21 '16 at 14:57
Thanks for the info, I faced the same confusion when I used `cli` before, in this project I couldn't find `aurelia.json` or similar config file. Is there any way for me to add that? – software_writer Dec 21 '16 at 15:21
You can't just add `aurelia.json` (even if you did, it would be ignored). You need to start with `npm install aurelia-cli --save` and it will be created. – LStarky Dec 21 '16 at 15:59

score 0 · Answer 2 · answered Nov 28 '17 at 03:21

For me it worked like this (using the project generated by the CLI):

npm i whatwg-fetch --save
npm i aurelia-fetch-client --save

add "aurelia-fetch-client" to dependencies in aurelia_project/aurelia.json

example of app.js:

import {HttpClient} from 'aurelia-fetch-client';

let client = new HttpClient();

export class App{
  activate(){
    client.fetch('http://...json');
    .then(response => response.json())
    .then(data =>{

    console.log(data)

    });
  }
}

score 0 · Answer 3 · answered Nov 29 '17 at 08:29

You can also install dependencies with the CLI itself.

It doesn't always get it 100% correct but can point you in the right direction if struggling.

For example au install aurelia-fetch-client

It will download the dependency, add to packages.json and attempt to create an entry for the bundling.

Add dependencies to Aurelia project

3 Answers3