I'm developing a little app which uses Angular and Browserify. When I declare a new module I expect to Angular be already loaded in window, so I use
var angular = window.angular
and so on. This work well, but since I'm requiring a third part module (ngReact) declared as
require('ngReact')
I get this message on the console:
WARNING: Tried to load angular more than once.
How can avoid it?
Related
I'm attempting to make use of this library: https://github.com/MagicTheGathering/mtg-sdk-javascript in an Angular2 application.
Unfortunately, I've been going in circles trying to load it into my application.
Firstly, on the TypeScript side if I import it using:
import { } from 'mtgsdk';
there are no types to load into the {}.
If I attempt to load it using something similar to:
import * as mtg from 'mtgsdk'
I'm unable to because it says that it's unable to find a module named mtgsdk.
I've installed the module using
npm install --save mtgsdk
Also, npm installs work fine for other modules.
The application compiles fine if I load it in using require via something similar to this:
var mtg = require('mtgsdk');
Taking that approach, I'm able to compile and launch but in the browser I get a number of errors about modules that it can't find. I figure they are prerequisites for the sdk that didn't get loaded so I start bringing them in via package.json.
For every one that I bring in, I then have to go to systemjs.config.js and add an entry pointing to the module's entry point and often have to specify a default extension using blocks like this:
pointer
'mtgsdk': 'npm:mtgsdk/lib/index.js',
'request-promise': 'npm:request-promise/lib/rp.js',
'ramda': 'npm:ramda/dist/ramda.js',
'emitter20': 'npm:emitter20/index.js',
'bluebird': 'npm:bluebird/js/browser/bluebird.js',
'request': 'npm:request/index.js'
default extension
'request-promise':
{
defaultExtension: 'js'
}
I'm not sure if that's the right approach though because the more dependencies I add, the more that I end up requiring. At one point I had literally gotten up to 50 extra dependencies added because every time I launched, the browser console would find more that were needed.
Is there any easier way to load all of these in?
Also, some of them (such as tough-cookie and request-promise-core) were very problematic to load and I couldn't get the browser console to stop complaining about them. Finally, some of them seemed very basic such as url, http, https. Those seem like they should already be present.
Using systemjs was utilized in the previous versions of Angular 2, However Angular 2 has evolved to Angular 4, with super new features like Angular CLI.
I recommend your use Angular CLI, with #angular/cli.
Importing Node modules
Since mtgsdk is a node-module, you can easily import it using
import * as mtg from 'mtgsdk'
However for your program to compile, you must install a type definition for it. or declare one for it in /typings.json or your app might not build.
Importing Client Scripts
For client scripts like firebase.js you won't need to add client scripts as entries in systemjs.config.js again.
Using #angular/cli, you would easily add them in the scripts[] array in your angular-cli.json for automatic compilation.
Then access them like this
declare const firebase: any;
Here is a quickstart tutorial to set up Angular with #angular/cli.
Is it possible prevent angular instance inject into global (window) scope when being required and bundled with webpack for example or any other module bundler?
I have found that current main javascript file in angular npm package is:
require('./angular');
module.exports = angular;
My webpack entry file contents is:
import angular from 'angular';
// my custom code goes here
So, the main webpack task is to prevent leaking variables to global scope, but if I try to log angular in Chrome DevTools like this:
console.log(angular); // => Object {version: Object, callbacks: Object}
I will see, that angular instance is injected. Any ideas to prevent this?
Additional info:
Angular.js version - 1.6.0-rc.0
Webpack version - 2.1.0-beta.27
Update.
It looks like it's hard coded into the published NPM code to assign the global Angular variable to the window object no matter what:
angular = window.angular || (window.angular = {})
So there's no direct way to prevent it from happening. You could always delete window.angular after you load it, but no promises that won't affect the library.
I'm trying to clear memory of previous module of my app which Im not going to use after I've routed to a different location.
So for example my "WebApp" is my main angular module of my app which has dependency of "catalogApp", "PaymentApp", etc modules. I want to remove the previous module as and when I route from 1 module to another.
So, Can we remove/delete module?
I am not sure about deleting modules as such. But you can use ocLazyLoad to lazy load modules only when they are required.
Hi I'm trying to recreate Golden Layout angular complex application https://golden-layout.com/tutorials/angular-complex.html as a electron application, so basically I just did the quick start example of electron http://electron.atom.io/docs/latest/tutorial/quick-start/ and did all the logic of golden layout on my index.html but it send to me this error:
jQuery is missing as dependency for GoldenLayout. Please either expose $ on GoldenLayout's scope (e.g. window) or add "jquery" to your paths when using RequireJS/AMD
As indicated in this answer you need to load jquery in the following way (before including golden-layout):
<script>window.$ = window.jQuery = require('./path/to/jquery.js');</script>
If I understand correctly, the issue occurs because jquery 'detects' that it is running in a requireJS environment and load $ and jQuery in modules (not window)
I am trying to implement server-side rendering for my reactjs application.
I am using webpack to build reactjs application, enhanced-resolve to handle importing of jsx files in nodejs.
My application depends on third party libraries like enquire.js.
When react application tries to import enquire.js on nodejs, it fails with error
ReferenceError: window is not defined
Since window object is not available nodejs
how to handle libraries that use window for server side rendering ?
I haven't used Webpack yet. However, I had similar issue using browserify and I solved it by creating two builds: one for browser one for node.js with list of modules to ignore. You could achieve the same effect by adding to webpack config:
{
plugins: [
new webpack.IgnorePlugin(/file\.js$/)
]
}
Then you have to make sure that you are not making any calls to enquire.js by checking if require() returned false value or object with module functions.
Well this is quite old question still if some one is looking at it.
Try
if (typeof window === 'undefined') {
global.window = {};
}