I have an angular application with defined services. and I also have a couple of libraries defined. what I can't do is use an application service within one of my libraries.
src
app
service
myappservice.service.ts
project
mylib
src
lib
mylibservice.service.ts
when I try to import "myappservice" into "mylibservice" it gives me this error:
... is not under 'rootDir' .... 'rootDir' is expected to contain all source files.
mylibservice.service.ts
import { MyAppService} from 'src/app/services/myappservice.service';
#Injectable({
providedIn: "root",
})
export class ObjectTypesService {
...
constructor(
private myappservice: MyAppService
) {
...
Can someone help me with to use this service within my library?
You can build your lib module, publish it to npm and add it in package.json via npm.
You can build your lib module and instead of publishing it to npm you can import .tgz file in package.json.
You can use some monorepo that already solve this problem like https://nx.dev/ . In this solution you store all libs and app in same git repo and you can import libs to apps without publishing it to npm after every change. This has dowside because you must build every time app and all libs.
Is posible build lib in this monorepo as npm package too. If you need use it in other app that is outside monorepo or in app from monorepo as npm dependency.
Related
created an angular application, ionic application and a custom library in workspace, able to import library files into angular application but not into ionic application.
My question is - I have a library in some folder of my local system. Can I use this library in my application without making the package published in npm. How to use a module in my application without publishing it
You could git push it and then add it to your package.json like this:
"dependencies": {
"cordova-plugin-local-notification": "git+https://github.com/katzer/cordova-plugin-local-notifications.git"
}
(that's an actual working import in one of my projects - the imported library is not mine)
If your library is local, you can reference it from your tsconfig.json at the root of your project :
{
"compilerOptions": {
"paths": {
"your-lib-name": ["path/to/your/lib"]
}
}
}
Then, everything exported from your library will be available in your project.
import { SomeClass } from 'your-lib-name';
I have the following directory structure
./app1/app1.js
./app1/package.json
./app1/node_modules
./app2/app2.js
./app2/package.json
./app2/node_modules
./shared/share.js
Both app1 and app2 pull in share.js
// app1.js
const share = require('../shared/share.js')
share.js uses a module defined in both app1 and app2's package.json
// share.js
const toml = require('toml')
When running node app1.js
Error: Cannot find module 'toml'
How can I share the share.js file between these apps? I'd prefer not to use symlinks if possible.
One of the solutions that you could use here would be using yarn workspaces.
That would allow you to share your packages across apps so you can have structure like:
- project1
-- package.json (deps for project1)
- project2
-- package.json (deps for project2)
- sharedPackage
-- package.json (deps for shared)
- package.json (your root of project deps where you define workspaces)
And now you are able to use your shared package as regular dependency!
Somewhere inside you project1/package.json
"dependencies": {
"sharedPackage": "1.0.0"
}
And use it in project project1/index.js
const shared = require('sharedPackage');
shared.doSomething();
Yarn will know about your dependencies inside of your workspaces, so it will let you include them and do all of the linking without pain. More to that you can even publish your shared package to some package registry (NPM/Github/whatever) and make it just a package.
That will do the work, but if you are looking for some more scalable solution to manage dependencies I'd really recommend to try lerna or rush.
I am trying to add wavesurfer to my application. I did exactly according to the instructions. at: https://www.npmjs.com/package/wavesurfer.js
After I did bower install I had wavesurfer.js folder inside my node_modules
import WaveSurfer from 'wavesurfer.js';
Theoretically WaveSurfer class should be available on my component. But after I include above code I have this error
Uncaught Error: Could not find module wavesurfer.js
at requireModule (loader.js:58)
at reify (loader.js:41)
at requireModule (loader.js:69)
at Class._extractDefaultExport (ember-resolver.js:390)
at Class.resolveOther (ember-resolver.js:122)
at Class.superWrapper [as resolveOther] (ember.debug.js:17407)
at Class.resolve (ember.debug.js:4597)
at Registry.resolve [as resolver] (ember.debug.js:4437)
at resolve (ember.debug.js:2109)
at Registry.resolve (ember.debug.js:1715)
I killed almost a week on this.
How can I make that class available for my component
Thanks
Well, open your ember-cli-build.js and import the library as follows:
// if you used npm then:
app.import('node_modules/<path-to-wavesurfer.js>');
// if you used bower then:
app.import('bower_components/<path-to-wavesurfer.js>');
depending on which package manager you used to install the dependency.
I did a quick search and found this shim: https://github.com/chrism/ember-cli-wavesurfer-js-shim, which probably includes the lib into the build. However, doesn't seem to be working with up-to-date Ember.
If you are not building your Ember app via ember-cli, you could try adding the library into your index.html file
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/wavesurfer.min.js"></script>
and assign it a container <div id="waveform"></div> as explained at wavesurfer-js.org
What is the proper workflow to include the library to angular 4.0 and use it inside a component?
My steps:
yarn add mathjs
Then there should be a way to injects js libraries in one of the build lifecycles so the angular4 component can use it. JHipster utilizes Webpack and Yarn.
Then I tried to add to Component (docs):
import { mathjs } from "./mathjs";
and
var math = require('mathjs');
Those were not working. What am I missing?
UPDATE:
It seems like mathjs uses older approach suggesting var math = require('mathjs'). Maybe it is similar to JQuery question in some way...
UPDATE2
This is a great question and I'm glad you ask because I wish I had what I'm about to write the first time I encountered this little problem. This is a typescript/javascript and webpack issue before it is an angular issue. I definitely am planning a writeup on my blog soon as possible.
Your Scenario:
You run
npm install mathjs
Now you try to use math.js from a component:
Find math.js dist js file (node_modules/mathjs/dist/math.js) and reference like this
import {mathjs} from "../../node_modules/mathjs/dist/math";
But you get error message saying "set --allowJS". You do that like this:
Set --allowJS in config (tsconfig.json)
{ "compilerOptions": {
"allowJs": true, ...
Now you get:
ERROR in ../node_modules/mathjs/dist/math.js (12209,13): Unreachable
code detected.
Looking in the math.js source, you see that it is an old school module but there is no root wrapper function (one function to bring them all and in the darkness bind them..) (more on that later).
Solution: install a typings file for the target lib (#types/mathjs)
First, check to see if you can get #typings files for your module here
https://microsoft.github.io/TypeSearch/
Grab mathjs typings file from npm (https://www.npmjs.com/package/#types/mathjs) and Run npm install to add the typings .d.ts files to the target lib's node_modules directory
npm install --save #types/mathjs
Add your type ref correctly
import * as mjs from "mathjs"
Use it like this:
console.log("e was: " + mjs.e);
I have the complete solution for the math.js lib on my github here
https://github.com/res63661/importOldJSDemoWithTypings/
More:
For examples look no further than your own angular project. CLI creates node_modules folder each time you run npm install after creating a new project with ng new . Dig down into here and note the d.ts files for many of the .js files.
When messing with typings or defining your own (.d.ts files) be sure to restart your server between builds as the typings don't seem to update currently on the fly
Further reading:
http://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html
https://angular.io/guide/typescript-configuration#typescript-typings
https://microsoft.github.io/TypeSearch/
Lastly:
If you are in a pinch and this is not working for you, I did have success creating a custom wrapper for a different (much smaller) module by wrapping it in a master export type
export var moduleNamer = (function(){
//module implementation
}());
then dumping the .js file local to my component and then referencing it as follows:
//reference like this from your component:
import {moduleNamer} from "./source"; //from source.js
--rich
I did this way and it worked for angular9.
First install npm package mathjs.
npm install mathjs
Then import in your component or directive.
import { round } from 'mathjs'
You may test with this.
console.log(round(math.pi, 3) )
Try to include the script into index.html:
<script src="./assets/math.js" type="text/javascript"></script>
Then add this into your component file:
declare const math;
You can then use math in your component:
ngOnInit(): void {
console.log(math.sqrt(-4););
}
Meteor application directory layout:
imports/
api/
collections/
MyCollectionFile.js
packages/
mypackage/
mypackageMain.js
I can export anything from the package file and use it inside the application, that's ok. But how can I use "import" in the package, like the other way around?
// mypackageMain.js
if (Meteor.isServer) {
require ('/imports/api/collections/MyCollectionFile.js');
};
OR
import '/imports/api/collections/MyCollectionFile.js';
I tried using the path '../../imports/api/collections/MyCollectionFile.js' but it simply does not work. I can not access this file from a package.
I get the following Error for both the import and the require:
W20160618-23:25:59.486(3)? (STDERR) Error: Cannot find module '../../imports/api/collections/MyCollectionFile.js'
W20160618-23:25:59.487(3)? (STDERR) at require (packages/modules-runtime/.npm/package/node_modules/install/install.js:85:1)
Figured out that this was not possible.
However, moving the collections to a package and exporting them would make the collections available to other packages and the application.
I've also been running in to this issue and have found two solutions, both are sub-par though.
Install the thing you want to import as a npm package. $npm install --save ./imports/<the thing>.
Use npm link to create a link to the thing you want to import.
Both solutions require that you have a package.json in the directory you want to import and both won't be transpile the code and just run it against the provided version of node.
A possible solution for the transpile issue would be using a loader plugin, or somehow provide a additional configuration to System.js to tell it to transpile the code on import.