Unable to use instamancer in Angular CLI project

[bwyyoung]

I am trying to use instamancer as part of an Angular project. When I try to compile angular and run the website with the instamancer node module, it gives me the below error:

ERROR in ./node_modules/instamancer/src/api/api.ts Module build failed (from ./node_modules/@ngtools/webpack/src/index.js): Error: /Volumes/SD_CACHE/PHPStorm/dmsolutions-angular/node_modules/instamancer/src/api/api.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv). at AngularCompilerPlugin.getCompiledFile (/Volumes/SD_CACHE/PHPStorm/dmsolutions-angular/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:912:23) at plugin.done.then (/Volumes/SD_CACHE/PHPStorm/dmsolutions-angular/node_modules/@ngtools/webpack/src/loader.js:41:31) at process._tickCallback (internal/process/next_tick.js:68:7)

I tried editing my tsconfig.json like the error recommended, but it remains unresolved as it asks me to include more and more files from Instamancer, which results in more errors reported.

My machine information:

• OS: MacOS 10.11 El Capitan
• Instamancer version 1.4.2
• Node version 10.16.2
• NPM version 6.10.3
• Angular CLI: 8.2.2
• Angular: 8.2.2

To reproduce this error, I tried replicating the ES2018 Typescript example in an angular service, but it is unable to compile with "ng build".

Is Instamancer incompatible with Angular?

[Adam Smith]

Are you trying to use the instamancer package in the browser, or with an server that the browser connects to?

[bwyyoung]

I am using the instamancer package in a server that the browser connects to. It is an angular app created with NG create.

[bwyyoung]

https://github.com/bwyyoung/DMSolutions_MEAN
Here is the project with the source code I developed so far. It seems instamancer does not play well with angular.

[Adam Smith]

I'm not really familiar with Angular and can't get your example running without setting up mongo etc. but isn't this running instamancer in the browser?

[bwyyoung]

Yes, I think so. Sorry. I am a beginner at both Instamancer and Angular, and maybe you have ideas on how best to run this.

[Adam Smith]

Well again, I'm not really familiar with angular so I can't tell you how it works best in that ecosystem.

Basically, instamancer needs to run an instance of chrome in order to work, which means it has to run on a server, not in a browser with webpack like it appears to be in your example. For most packages this isn't the case, however most if not all instagram api packages can't be run in a browser because of how restricted browsers are when making http requests.

To run it on a server you need to set up express or something like it, and then the browser can communicate with AJAX. The server will run instamancer and send the results to the browser.

[bwyyoung]

Thank you sir for responding so quickly and frequently.

Ok. I already have Express and Node setup on server side. Would you have an example of how to run Instamancer on server side with express?

[Adam Smith]

Here's a quick example:

const express = require('express')
const app = express()
const port = 3000
const instamancer = require('instamancer')

async function getPosts(tag) {
    const hashtag = instamancer.hashtag(tag, {total: 5, silent: true});
    const posts = [];

    for await (const post of hashtag) {
        posts.push(post);
    }

    return posts;
}

let cachedPosts = []

async function getCached() {
    cachedPosts = await getPosts("puppies");
}
setTimeout(getCached, 3000)

app.get('/cached', async (req, res) => {
    res.send(JSON.stringify(cachedPosts));
})

app.get('/live', async (req, res) => {
    const posts = await getPosts(req.params["tag"]);
    res.send(JSON.stringify(posts));
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Visiting localhost:3000/cached will return a list of posts that's updated once every 5 minutes, and visiting localhost:3000/live?tag=your_tag_here will fetch them on-demand.

You have to wait 30-seconds to a minute for the cached posts to appear, and you'll have to wait about as long for something to be returned on the live endpoint. That should get you started.

[bwyyoung]

Ok Sir. Thank you. I will try it.