I am trying to import a module from a generated Angular library bundle located inside a vendor subfolder under src/.
index.html
<head>
...
<script type="text/javascript" charset="utf-8" src="./vendor/example/bundles/example.umd.js"></script>
</head>
Nevertheless, I am having some troubles importing module from this in my app.module.ts. Please, any idea of how to do it?
It seems that #angular/core and #angular/common peerDependencies of angular library should also be bundled inside script to work correctly.
I will appreciate any kind of help
You shouldn't add a <script> tag that refers to a local file because this local file won't be included in the build.
Instead, use the scripts configuration section of the angular.json file, like this:
"scripts": [
{ "input": "src/vendor/example/bundles/example.umd.js" }
]
This will embed the example.umd.js file inside a dedicated file of the Angular's build. As it's packaged as UMD, an object will be attached to window which contains the API of the library you are importing.
In order to stop TypeScript for complaining about a non-existent variable, just add this: declare var example; (replace example with the real name of the global object).
Related
index.html
<html class="wide wow-animation" lang="en">
<body>
<app-root></app-root>
<!-- Javascript-->
<script src="assets/js/core.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
The error displayed at the console
The hierarchy of my files
--> The template is displayed but neither navbar nor carousel works .
External javascript files should be added to the angular.json file under "scripts":
"scripts": [
"assets/js/core.min.js",
"assets/js/script.js"
]
Official docs: https://angular.io/guide/workspace-config#style-script-config
From the docs:
An array entry for the styles and scripts options can be a simple path string, or an object that points to an extra entry-point file. The associated builder will load that file and its dependencies as a separate bundle during the build. With a configuration object, you have the option of naming the bundle for the entry point, using a bundleName field.
The bundle is injected by default, but you can set inject to false to exclude the bundle from injection. For example, the following object values create and name a bundle that contains styles and scripts, and excludes it from injection:
Finally, you are using jQuery, which I would avoid in Angular if at all possible. You're proabably going to encounter some issues along the way.
I have a webpack bundled widget that I pack into a single file using webpack, and can use as follows:
<script type="text/javascript" src="my-bundle.js"></script>
<script type="text/javascript">
(function() {
MyBundle.render();
}) ();
</script>
This works fine, but I want to use this widget in my main Rails app. So I've copied the my-bundle.js file into my main project directory and required it.
When I run webpack on my main app, I can see that the code in my-bundle is being included in the resulting js file, but I cannot access the code. i.e. calling MyBundle gives a not defined error.
How can I access it?
EDIT - it looks like I can just use script-loader to run the my-bundle.js file once (which defines a MyBundle function). This doesn't feel like the best way to do it though
I'm trying to add an external js file into my Angular2 project by adding the record to my angular-cli.json file.
I've added a file to the [scripts] array as below:
"scripts": ["https://as-identitydemo--c.na50.visual.force.com/resource/1495420277000/salesforce_login_widget_js"],
all the other posts that i've read refer to using this format for something that's either hosted locally, or installed in the node_modules etc..
How can I include an external js library and utilize that in my project?
You should import the library in your index.html in the head tag.
Second you have to make the library visible to your Angular project. That means you need the typings. You can either search https://github.com/DefinitelyTyped
for already existing types or add the types to the typings.d.ts file.
Example:
In your page (outside of the Angular app) you might have a javascript global variable:
var testVar = 'testvalue';
Then in the typings.d.ts you can make this variable globally accessible by adding
declare var testVar:string;
Then you can access this variable in the whole Angular project like that:
console.log(testVar);
The same you can do with functions in external libraries.
Here is a Plunk that shows that (without having a typings file). Hope this helps.
I'm using Browserify to access a Node module from an index.html file (hosted on Google App Engine)
I import the module in a "main.js" file, as I see is the standard in the Browserify documentation, as follows:
var request = require('request');
var fs = require('fs');
I then bundle this up into a bundle.js file using the following command:
browserify main.js -o bundle.js
This successfully produces the required bundle.js file. I then include this at the top of the header in my index.html as follows:
<HEAD>
<script src="/scripts/bundle.js"></script>
<script src="/scripts/util/loader.js"></script>
<!-- More scripts below here -->
A script within the body of index.html then makes a call to a function within loader.js which uses the line
request('api.my-url.com/world').pipe(fs.createWriteStream('/resources/myMap.json'));
Which I use to attempt to create a file containing the contents of the response. However, when I deploy this on GAE, and access index.html, I am greeted by the error message:
loader.js:15 Uncaught ReferenceError: request is not defined
at loadWorld (loader.js:15)
at Object.create ((index):55)
If I try and move the request() call up into the script in index.html I get the same problem, but if I move the line into main.js, I no longer get this issue.
I assume this is down to a personal misunderstanding of Javascript, but I can't seem to figure out why the request object is not available in index.html after bundle.js has been included in index.html via a script tag.
Many thanks to anyone who can shed some light on the situation, thanks.
When you create a browserify bundle, it is intended to be the application's "entry-point". But it seems that here you have your entry-point in index.html, so what you want is to bundle a standalone library.
Browserify has an option called --standalone to do this, which generates a UMD bundle instead: https://github.com/substack/browserify-handbook#standalone
You invoke it in much the same way, but specify what name (in the global namespace) the UMD bundle should be given. Eg.
browserify foo.js --standalone mylib > bundle.js
Now when you include <script src="bundle.js"></script> in your html, subsequent scripts will have be able to reference the mylib object.
Here's an example of using the --standalone option:
https://github.com/joshwnj/react-visibility-sensor/tree/master/example-umd
https://github.com/joshwnj/react-visibility-sensor/blob/master/package.json#L9
Also, if you want something like request that can be used in the browser, https://www.npmjs.com/package/xhr has a very similar API.
I am using react starter kit for client side programming. It uses react and webpack. No index.html or any html to edit, all js files. My question is if I want to load a vendor js lib from cloud, how to do I do that?
It would be easy to do that in a html file. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
However, in js file, it only uses npm installed packages. How can I import the above lib with no html file? I tried import and require, they only work for local files.
update 10/21/15
So far I tried two directions, neither is ideal.
#minheq yes there is a html file sort of for react start kit. It is html.js under src/components/Html. I can put cloud lib and all its dependencies there like this:
<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
<script src="/app.js"></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>
Good news is it works, I don't need do anything else in js file, no import or require. However, now I have two jquery libs loaded in different ways. One in here, the other through npm and webpack. I wonder it will give me trouble later. The react-routing I use give me 'undefined variable' error if I type a none home path in browser window due to the server side loading I guess. So this solution is not very good.
Use webpack externals feature. This is documented as: link. "You can use the externals options for applications too, when you want to import an existing API into the bundle. I.e. you want to use jquery from CDN (separate tag) and still want to require("jquery") in your bundle. Just specify it as external: { externals: { jquery: "jQuery" } }."
However, the documentation I found a few places are all fussy about how to do this exactly. So far I have no idea how to use it to replace <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> in html.
externals is not intended to let you do this. It means "don't compile this resource into the final bundle because I will include it myself"
What you need is a script loader implementation such as script.js. I also wrote a simple app to compare different script loader implementations: link.
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
You can create a script tag in your JS as
$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))
There is one html file that is definitely being used to serve to users with your js bundle attached. Probably you could attach the script tag into that html file
Use webpack's externals:
externals allows you to specify dependencies for your library that are
not resolved by webpack, but become dependencies of the output. This
means they are imported from the environment during runtime.
I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.
In this other post, I have posted my solution: https://stackoverflow.com/a/62603539/8650621
In other words, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.