I was wondering if somebody could help me with this issue, which hopefully will not be complicated.
I am running a project using Angular4, and I want to use this component.
https://www.npmjs.com/package/range-datepicker
I've tried to run bower install range-datepicker, but if then I use the <range-datepicker> tag in my project it won't recognise it.
In addition, I've added
"range-datepicker":"0.0.13"
to my package.json file, and running npm install it installs it and I can see the files in node_modules.
However, I still cannot use the <range-datepicker>, so I was wondering if someone can help me with this issue. I don't know if maybe I should add some script or style in my angular.json file
That library does not provide an Angular component, but rather a WebComponent.
WebComponents are usable in Angular, but you need to take care of a few extra things.
I suggest that you look for documentation on using WebComponents in Angular.
Here's one link to get you started: https://www.sitepen.com/blog/2017/09/14/using-web-components-with-angular/
Related
I am currently working on making a web extension application(chrome app) and I want to use npm in my application. When I want to use npm on my computer, I had to simply download and install it on my computer. But if I want to put it into my application, I am not sure how to include this.
Like bootstrap, do I need to include a min.js file such as bootstrap.min.js?
(what I want to do with npm is to make a crawling to happen using cheeriojs!)
Is there anyone who knows how to include npm in this case?
Thanks in advance!! Any advice would be much appreciated! :)
npm is a package management tool. It has no place being in a Chrome extension.
If you want to use packages from NPM in a browser extension, then you'll typically want to use a tool like Webpack to transpile them from module format into a single ES5 file.
Note, however, that cheeriojs is:
Fast, flexible & lean implementation of core jQuery designed specifically for the server.
… and since you want to run this in a browser, you should probably just use jQuery!
I've built a custom style "skin" on top of bootstrap that I intend to use in multiple UI projects.
Rather than copying/pasting the UI styles/components (built using sass and typescript in my current Angular 5 project), I want to build an NPM package that I can install these styles and components I've built in new projects, thus allowing updates to be done to the NPM package (maybe extending the controls within for example) without breaking the UI's using them or needing to update files within.
I've never setup an NPM project before. I've found a number of examples of how to build NPM packages, for example https://codeforgeek.com/2014/08/how-to-create-nodejs-npm-package/ but it seems to be for vanilla JS in this example. I need an example which:
Builds on a dependency, in this case bootstrap
Is to be used in Angular (I'm using version 5)
Is installable and updatable via NPM or maybe Yarn
Has anyone any top tips on achieving the above? Or any really clear guides where someone has done this before?
I realise this question is relatively broad but really I just need some pointers to get started and I will document the process further when I have a better understanding.
Thanks in advance!
So you should move your theme into a separate project. Then all you have to do is run npm init in that directory and you have a npm.
As for sharing it between projects, I would create a repo on Github for this theme npm. Push all of your changes there. Then you can reference it in the package.json of all your projects by linking to the Github repo. Here is a good Stack question about how to do that.
Finally, if you want to develop your theme locally inside one of your projects, you can use npm link. Here are he docs on that.
Using Angular with an ASP.NET MVC project and ive moved the codebase to another path on my hard drive. When I build, I get errors complaining about not being able to find packages. I dont think this is so much of an Angular issue (using System.js module loader), but rather a Node issue related to finding packages.
The fix so far has been to simply delete everything in node_modules and get them again. Is there a way to avoid having to do this? Otherwise, if I check my code into our source control system and someone else pulls it down, they will run into this issue as well.
[update]
When I am making a copy of the project, it includes the node_modules as well. I intend to check in these into source control as well, so that we can control when packages get updated and the dependency issues that might be caused.
[update 2]
Well I think I need to go back and review what Im doing. I never liked the idea of keeping node_modules in source to begin with and if I can find a way to manage "breaking changes" due to package updates, then I can forego the mess and bloat from keeping node_modules in my source control system.
https://www.sitepoint.com/beginners-guide-node-package-manager/
When someone else pull the code or when you move your code in other folder YOU HAVE TO RUN A NPM NISTALL command .. so it can download the packages ..
if you have already downloded them ..don't worry to do a NPM INSTALL cause it takes them from the cache ....
for other people they need first time to download them for first time
Hope it helps you!!
I'd like to base an Aurelia project on this skeleton-esnext-webpack starter app:
https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-esnext-webpack
But my question is, how to exclude libraries from being bundled by easy-webpack? You can see the problem just by adding a typical server-side library like this Postgres client:
npm install pg-promise --save
Then when running npm start (you don't even have to reference pg-promise from your code) it will puke exceptions and there is no point trying to solve this as the correct solution is to exclude pg-promise from being bundled by easy-webpack. Any examples of how to solve this?
I know this is kinda late, but I came across this while trying to find the answer for the same problem. For anyone else experiencing this, you will find the answer here.
Basically, aurelia-webpack-plugin will import all the dependencies listed in your package.json. Luckily, there's a way around this and it's pretty simple. You only need to add:
"aurelia": {
"build": {
"includeDependencies": "aurelia-*"
}
},
inside package.json. If you are using one of the skeleton navigation starters, the aurelia key will already be there but you have to add "includeDependencies": "aurelia-* next to "resources" : []
I have the same problem that has already been documented on GitHub here. ui-tinymce references a number of dependencies which cannot be reached in my application.
GET http://localhost:8080/jspm_packages/github/tinymce/tinymce-dist#4.3.12/themes/modern/theme.min.js # angular.js:6084
tinymce.js:9426 Failed to load: /jspm_packages/github/tinymce/tinymce-dist#4.3.12/themes/modern/theme.min.js
I am able to use the workaround suggested in the github issue above, which changes the baseURL. This works fine in my development environment. However, when I run jspm bundle-sfx it does not pick up these dependencies and I am left in the same situation without templates or plugins.
What is the best way to address this? Can angular-ui-tinymce be broken down so that the dependent files are available in separate packages? Or should I just use gulp to get around this problem?
I tried using Gulp to concatenate the missing files, however this will not work because by default tinymce still expects the files to be at the relative locations which it uses in its own internal file structure.
I still think it would be helpful for Tinymce to provide separate packages for the most common themes, however I admit that there are a lot of themes and plugins so this would be a fair amount of work.
In the end the simplest thing to was to copy the theme and plugin files into the "correct" relative directories within my own source code. This way I can change the relative baseURL for tinymce and it will be correct when I run it in production as well as development environments.
This way I can run jspm bundle-sfx and it will bundle these files along with everything else. However you may have to import the files explicitly if you do not serve the area statically in your application. For example:
import 'sysadmin/app/tinymce/themes/modern/theme';