CODEWITHSUNDEEP
aureliaaurelia-fetch-client
software_writer
software_writer

Reputation: 4468

Add dependencies to Aurelia project

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?

Upvotes: 0

Views: 1926

Answers (3)

4imble
4imble

Reputation: 14416

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.

Upvotes: 0

Carlos Alvarez
Carlos Alvarez

Reputation: 51

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)

    });
  }
}

Upvotes: 0

LStarky
LStarky

Reputation: 2777

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';

Upvotes: 2

Related Questions