Angular 2 import 3rd party library - node.js

I try to import 3rd party library synaptic.
Library is writed in java script, and i have .d.ts file.
I did:
npm install synaptic --save
npm install #types/synaptic --save
import * as synaptic from 'synaptic' in my component
And i still get:
GET http://localhost:3000/synaptic 404 (Not Found)"
Can you help me?

When angular compiles the it won't keep the traditional JS routes. After your import you should be able to access the 3rd parties features in the component.
Try syanptic : Syanptic
and then do whatever you want with this.syanptic

Related

bootstrap and npm - How do I import only the "reboot.scss" file in my project?

I've started a simple playground project where I only have installed bootstrap (with npm install bootstrap), and the scss compiler package (with node install nose-sass).
I only need the reboot.scss code at the moment.
I would like to import it in my custom scss file and then start writing my bespoke scss code.
My scss file is in /src/scss/style.scss.
And I'm trying to import the bootstrap reboot file, which is /node_modules/bootstrap/scss/bootstrap-reboot.scss.
In my /src/scss/style.scss I wrote:
#import "../../node_modules/bootstrap/scss/bootstrap-reboot";
I need the reboot style from bootstrap. Is there a better way to do it?
Yep, you are correct.
Check this out: this is the documentation on how to do exactly what you mention.
https://getbootstrap.com/docs/4.0/getting-started/theming/#importing

How to Import nodes modules in react native

hope you're doing well.
I'm new at react native and i'm stuck with a problem while trying to import a node module.
I need to create an app that will get orders from the API of a Wordpress Website with WooCommerce.
I first created a project with the command create-react-native-app picking then npm install. It's creating a structure like this in the project folder named picking:
node_modules
App.js
app.json
App.test.js
etc....
Then I installed the package woocommerce-api with npm install woocommerce-api --save (https://www.npmjs.com/package/woocommerce-api). This package allow me to do request to the WooCommerce API easier.
I want to not put the config to the WooCommerce API in the App.js, so I created a folder src and a folder woocommerce with a file api.js (should I write it with the first letter in uppercase ?) in it and I added import Api from 'picking/src/woocommerce/api'; in my App.js.
So now the structure is
node_modules
src
-- woocommerce
-- api.js
App.js
app.json
App.test.js
etc....
The problem is that I can't achieve to import the WooCommerceAPI module from woocommerce-api, no matter what I set in path to get the module.
There is the file api.js at the moment :
import WooCommerceAPI from '../../woocommerce-api';
var Api = new WooCommerceAPI({
url: 'http://localhost/mysite',
consumerKey: 'ck_xxxxxxxxxxxxxxxxxxxxxxxxxx',
consumerSecret: 'cs_xxxxxxxxxxxxxxxxxxxxxxxxxxx',
wp_api: true,
version: '/wc/v2',
queryStringAuth: true
});
export default Api;
And I get the error :
Unable to resolve module '../../woocommerce-api' from etc ...
I can't find what is the problem and why this is not working. If you could help me on this, it would be very nice.
Have a nice day everyone :)
EDIT: I changed the line for the import to import WooCommerceAPI from 'woocommerce-api'; and I got a new error : Metro Bundler has encountered an internal error, please check your terminal error output for more details, but there is nothing in the terminal except Failed building JavaScript bundle.
EDIT2: I downgrade node from 9.4 to 8.0.0 and restart the project. I got the same error but in the terminal i now get this in yellow/orange : Problem checking node_modules dependencies: Unexpected end of JSON input
Okay, so I find a workaround. In fact, the import is working. For some reason that i don't know, this is the npm package that is not working and make the app crash.
So I removed the package woocommerce-api and I create a file in src/woocommerce called woocommerce-api.js, then I copied the content of this https://github.com/minhcasi/react-native-woocommerce/blob/master/WooCommerceAPI.js that is the same as the one in the npm package and I pasted it in my woocommerce-api.js. I import it in my api.jsfile and "voilĂ " !
Seems to work fine.
As you install woocommerce-api in your project there is no need to place the location like ../../woocommerce-api.
just change ../../woocommerce-api to woocommerce-api and your project should work.

How to include ts-topojson into Angular2 app?

How would I import ts-topojson into an Angular2 project so I get Typescript typings? I installed the module using npm and tried to include with a simple import statement but the linter said it couldn't find 'topojson'.
import { Topojson } from 'topojson';
This is my first Angular2 project so I'm very new at this so I could possibly be missing a crucial step.
You could install the package #types/topojson with npm install #types/topojson --save-dev.
Now you can use topojson the following way within a component:
import {topology, feature, ...} from 'topojson';
Or with:
import * as t from '#types/topojson';
Try the following:
Make sure the script is loaded into your scripts in .angular-cli.json.
At the top of a file you want to use the library, add declare let Topojson: any;.
Now you can use Topojson without the TS compiler yelling at you, because it will be implied that it's loaded as a script and made available to you during runtime.

Ionic 2 Resources | Third Party Libraries

I want a code highlighter for my ionic v2 (rc4) project. I tried prismjs .
As said in Ionic 2 Resources | Third Party Libraries , I did the following steps:
npm install prismjs --save
npm install #types/prismjs --save
then add import 'prismjs'; in my typescript file & In declarations.d.ts declare module '*'; already is there.
in html
<pre><code class="language-javascript">var data = 1;</code></pre>
but its not working. Am I missing something? Please help me.
As far as I know, the css will not get included that way.
Can you try to copy the css of the prismjs library into your assets folder and include it in your index.html?

Trying to use axios to make API call in a React/Phoenix App (using Brunch)

I'm trying to make use of the axios library to call some API endpoints.
My project setup is a Phoenix app (with brunch for asset management) and a React app (all in the web/static/js directory)
Most npm modules are ok, I do:
npm install --save _module-name_
Then I add the module to the brunch-config.js into the npm whitelist array.
Which I've done with axios, so it doesn't complain that it cannot find the library.
However, when I try and use axios e.g axios.post
I get the following error in the JS Console:
Cannot find module "axios/lib/adapters/xhr"
It's like brunch isn't loading in the axios dependencies (even though I can see that file if i navigate to node_modules/axios/lib/adapters
Has anyone had this issue (with any npm module and brunch/phoenix) and if so how do you go about fixing it?
Update
It seems to be a wider spread problem with brunch.
I also cannot use "React-Bootstrap" I get a similar error where it cannot find the sub-dependencies....
I had the same issue and updated brunch to the latest (2.7.5 at the time), which resolved my issue.
See https://github.com/brunch/brunch/issues/1136

Resources