I need to install angular 1.3.18 and 1.4.5 version of angular using bower in same project.Since some part of my code using angular 1.3.18 and some of its dependecy are also using 1.3.18, same case for other version as well.
If I am using only one version some part of code will get broken.
If I use below method
"dependencies": {
"angular": "1.4.5",
"angular": "1.3.18"
}
it is working fine ,After I minify and uglify the code for production only one version of angular is available and some part of code is broken.
Please suggest me a solution for this..
Just modify your bower.json as follows:
{
"dependencies": {
"angular": "~1.4.5",
"another_angular": "angular#1.3.18"
}
}
The another_angular package is now available in another_angular folder in your bower_components.
Note: The key another_angular can be changed at will (in the limits of an acceptable property name in JSON!), but beware that the destination folder will change accordingly.
While angular is not designed to have multiple versions running in the same window (they both assign to window.angular), it is possible using the hack described here:
Multiple versions of AngularJS in one page
The minification issue you are experiencing is most likely due to both versions of angular being assigned to the same global variable, window.angular, and your minifier is over-riding one assignment of that variable (for 1.3.18) with the other (for 1.4.5).
Related
I have been trying to build my gatsby (react) site recently using an external package.
The link to this package is "https://github.com/transitive-bullshit/react-particle-animation".
As I only have the option to change the props from the components detail, I cannot read/write the package file where it all gets together in the end as it is not included in the public folder of 'gatsby-build'.
What I have tried:
Editing the package file locally, which worked only on my machine but when I push it to netlify, which just receives the public folder and the corresponding package.json files and not the 'node-modules folder', I cannot make netlify read the file that I myself changed, as it requests it directly from the github page.
As a solution I found from a comment to this question, we can use the "Patch-Package" to save our fixes to the node module and then use it wherever we want.
This actually worked for me!
To explain how I fixed it: (As most of it is already written in the "Patch Package DOCS), so mentioning the main points:
I first made changes to my local package files that were giving the error.(For me they were in my node_modules folder)
Then I used the Patch Package Documentation to guide my self through the rest.
It worked after I pushed my changes to github such that now, Patch Package always gives me my edited version of the node_module.
When dealing with third-party modules that use window in Gatsby you need to add a null loader to its own webpack configuration to avoid the transpilation during the SSR (Server-Side Rendering). This is because gatsby develop occurs in the browser (where there is a window) while gatsby build occurs in the Node server where obviously there isn't a window or other global objects (because they are not even defined yet).
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /react-particle-animation/,
use: loaders.null(),
},
],
},
})
}
}
Keep in mind that the test value is a regular expression that will match a folder under node_modules so, ensure that the /react-particle-animation/ is the right name.
Using a patch-package may work but keep in mind that you are adding an extra package, another bundled file that could potentially affect the performance of the site. The proposed snippet is a built-in solution that is fired when you build your application.
I have a very old javascript code base and I do not want to use the modern way of compiling all of the javascript files into one using standard webpack because it is not possible due to the way the website code is written.
But I want to write new scripts using modern Javascript (e.g. Promises and Fetch) but still be able to support old browsers like IE11.
I have configured webpack and babel so it gets multiple entry javascript files and for each of them it does the classic transpiling/polyfilling using #babel/preset-env and corejs.
This works and polyfills every script based on the babel target config but it creates one issue. It encapsulates global variables/functions in the script so they are not accessible from other scripts which reference them (yes old javascript). Is there a way to disable this structural modifications?
Also I know I could use only Babel without Webpack for this but the problem is when I try to polyfill e.g. Fetch I have to use https://github.com/github/fetch which cannot be just used with Babel afaik.
Any help appreciated.
I think inevitably your refactorings are modernizing the code, and if you are not careful, one day you can end up bundling everything with webpack;)
The set up you describe, I achieved with with:
module.exports = {
entry: {
messages: "./src/messages",
"hello-world": "./src/hello-world",
},
output: {
library: {
type: "global",
},
filename: "[name].js",
},
};
every export from each file is put directly on window - if you load files in the right order, you can have invisible dependencies maintained across the codebase.
To this setup, you can add babel loader with presets as you stated in your question. Besides, you can tart doing the explicit imports across different files - even if function X is available on global scope, you can migrate some places to import/require it explicitly.
If you want to play with my code yourself, you can find it here:
https://github.com/marcin-wosinek/webpack-legacy/
and here is the example in action:
https://marcin-wosinek.github.io/webpack-legacy/
I know this sounds like a weird question, let me try explaining it further with examples:
First of all, I'm trying to add some functionality to JSDoc in a simple library. Let's call it jsdoc-extra.
When a project includes my library, it should also have jsdoc installed. I have listed jsdoc as a dependency on my own library as well.
jsdoc-extra > package.json
{
[...]
"dependencies": {
[...]
"jsdoc": "^3.6.6",
[...]
}
}
And let's suppose a "sample" project is trying to use my library (this is what I actually have running for now, installed from the file)
{
[...]
"dependencies": {
"jsdoc": "^3.6.6",
"jsdoc-cov": "file:../jsdoc-cov",
"jsdoc-ts-utils": "^1.1.2"
}
}
From my jsdoc-extra code I can search and find the sample/node_modules/jsdoc/jsdoc.js that is installed on the "client" application (sample), or use my own jsdoc-extra/node_modules/jsdoc/jsdoc.js instead when the first one is not available. I can then execute it with spawn
So far so good. However:
The "client" (sample project in this case) might be using some plugins on their jsdoc setup, like you can see in the previous code snippet, I have ts-utils installed as an example.
So when I'm inside the sample project, and try running:
node_modules/jsdoc/jsdoc-extra.js -c jsdoc.json
(jsdoc.json is the standard jsdoc config file that I just pass through to it)
I get this kind of errors:
(node:3961) UnhandledPromiseRejectionWarning: Error: ERROR: Unable to find the plugin "jsdoc-ts-utils"
It seems my app (jsdoc-extra) cannot use jsdoc-ts-utils that is installed on the client (sample) project, even when I run sample's own installed jsdoc.
I want to be able to execute it like this so the "client" project can execute jsdoc-extra without extra jsdoc configuration, it will use whatever it's already using for regular jsdoc operations.
I'm beginning to think that my best options is to actually write a jsdoc plugin...
I know this is a lot, and probably confusing, I'll gladly provide more info if you think it's necessary. Thanks!
I decided to close this and instead just write a jsdoc plugin. It's the easier way to hack into the data it generates to do what I want. My extra functionality will be tied in with the doc generation, which is not ideal, but I'll deal with it...
How can I change package alias to use in import?
I'll use ng2-bootstrap and it searches for #angular/core and I'm referencing it as angular2/core. It's crashing my screen!
Since Angular 2.0.0-rc.0, all dependencies have been in this new "#angular/" form rather than the "angular2/" one. If you want to revert back, you simply have to change your dependencies in your package.json file to the version of Angular 2 you want.
"dependencies": {
"angular2: "2.0.0-beta.17"
}
Angular 2.0.0-beta.17 is the latest version that uses the older angular dependency.
I am getting an error when I work with a version of Chart.js master that I compiled myself. I must be missing some kind of dependency that I've missed in the documentation. I have no clue what .js I need to include.
When I move my mouse-cursor over the chart I get a bunch of errors related to a missing Color library. Which one am I missing exactly?
TypeError: i.color(...).saturate is not a function
Edit:
I have created a JSFiddle here: http://jsfiddle.net/o9ebb5sq/
This piece of code does not show the problem (using Chart 2.0.0-Beta). This is why I copied this release into my software and tried again. The problem I am describing disappears.
I am running a master build (created using 'gulp build') Which makes me think the problem is either present in git master, or it is caused by my build environment.
I have installed the following npm packages before I ran gulp build
gulp 3.9.0
gulp-concat 2.6.0
gulp-connect 2.2.0
gulp-html-validator 0.0.5
gulp-jshint 1.12.0
gulp-karma 0.0.5
gulp-replace 0.5.4
gulp-size 2.0.0
gulp-uglify 1.4.2
gulp-util 3.0.7
semver 5.0.3
karma 0.13.14
inquirer 0.11.0
I expect that maybe I am missing something here or that one of the packages I've used to build Chart.js has an issue.
In the package.json on 2.0 they have included a new dependency "color": "git://github.com/chartjs/color" you will also need to include this. Odd thing is they alias this to a helper
color = helpers.color = function(color) {
if (!window.Color) {
console.log('Color.js not found!');
return color;
}
return window.Color(color);
},
So I would have expected for you to see the log unless you already have something in the global namespace named Color.