include script not found using npm version of angulajs - javascript

I install angular via npm and in my public/index.html I do
<script src="/node_modules/angular/angular.js"></script>
And it's 404 in chrome console, any clue how can I include the script properly?

Your node_modules folder is very likely not publicly accessible.
You have different options to solve this, including
bundling your angular library with your code into a single script file, e.g. using webpack,
placing the angular.js file in the public folder next to your index.html and embedding it from there and
loading the angular library from a CDN, e.g.:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
Which option is the most suitable depends heavily on your use case.

I recommend to use a CDN to load AngularJS in your project:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
Recommend Reading: Why use a Content Delivery Network (CDN)?

Related

How to use bootstrap in create-react-app?

I just used create-react-app and ive been trying to use bootstrap. it doesnt work even after I npm install it.what should i do step by step This is my app do i need to write a "import" line
Go to this link on your browser https://react-bootstrap.github.io/getting-started.html
Copy the bootstrap CDN link under the stylesheet section and add it to you index.html file in your your project.
Yes, you do need to reference the files in your app. You can add the necessary <link .../> and <script ...></script> tags in your index.html file.
You could also look into using something like the react-bootstrap npm package instead.

Using CDN vs Installing library by NPM

I recently started using NPM, but I don't understand how the files in node_modules are added to my index.html.
Case 1: CDN
For example, if I want to use jQuery via CDN, it is so simple! I add the CDN link to a <script> tag on my index.html file and $ is immediately available.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('body').css('background','red');
});
</script>
</body>
</html>
Case 2: NPM
Now I'm trying to use node modules and npm rather than CDNs. I have done the following:
Created package.json by using npm init --yes
Installed the jQuery package with npm install jquery --save
Now, my project folder looks like this:
I have removed the script tag with the link to the jQuery CDN from index.html, but I don't understand how to add jQuery from node_modules?
I am doing this on a browser.
CDN
Use CDN if you are developing a website that will be accessible by public internet users.
CDN Benefits:
Will be cached on most browsers because it's used by a lot of other websites
Reduce the bandwidth
check for more benefits here
NPM
npm is a great tool to manage dependencies in your app using a module bundler.
Example:
assume using a webpack module bundler and jQuery is installed
import $ from 'jQuery'
...
var content = $('#id').html();
but the browser does not understand the import statement so you have to transpile the code with Webpack commands, the bundler will check all the used dependencies and bind them in a single file without any dependencies problems.
Useful links: Getting started with webpack
in addition to above, npm install packages to local also:
let your local IDE provide code intellisense and type-checking;
provide source code for (Webpack) bundling, which combines all the JavaScript files to be a (minified) single file, so no dependencies.
I might have misunderstood your question... But can't you just add this line to your index.html file?
<script src="node_modules/jquery/dist/jquery.min.js"></script>
I think you want to host jQuery yourself and use it within a web app running in the browser.
If so, you need to host this file - make it downloadable via the same web server you are using to host index.html.
If you are using Express, you might do something like this on the server side:
app.use('jquery', express.static(__dirname + '/node_modules/jquery/dist/'));
And then reference the file in index.html:
<script src="/jquery/jquery.js"></script>
See Express' manual for serving static files.
If you're not using Express, you need to consult your web server's stack manual. No way to guess unfortunately - I gave an Express.js example because this is probably the single most popular package like that for node.js.
It won't be "filed" unless you link the js file in your template (replacing the CDN one). A bundler output or your compiled and public js file needs to be linked instead of the CDN link URI.

Angular CLI bundling issue

I have started an Angular2 project using Angular-cli, everything is in working in order when I run ng-serve.
My problem is when view source in the browser I can see that it injects three bundles scripts.
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
But when I try and find them in my source there not there.
My end goal is to create a library of specific angular2 components that will sit in AWS-S3 as a single bundle script and a CSS bundle. Once i have this I would be including the library into multiple projects.
Use ng eject to expose webpack configuration. In that way you can modify it.

Load external libraries from CDN with angular-cli

I would like to use the angular-cli to build an app that bundles my app code but does not include the Angular2 framework or other large external JavaScript libraries in the bundled code. I would like to load these libraries from a CDN when the page loads. Is there a way to do this?
Also, is there a way to do this while preserving the benefits of a local build where only the parts of the Angular2 framework that I am using gets loaded?
I saw this question, but it was for SystemJS and I don't think it applies to Angular-cli: How to load angular2 using CDN and SystemJS
You simply need to add the appropriate <script src=""> tags pointing to the CDN to the index.html file.
Remember to remove the .js files from angular-cli.json so they don't get bundled with the app.
Currently, you can't do that for the Angular 2 js files itself, they are automatically bundled with your app. Though the latest updates enable the web servers and browsers to cache the vendor files, so they don't get redownloaded on every visist to your app but only when the hash changes.
When creating an application with Angular, version 2 or greater, uses a build system that only includes the portions of the Angular platform you use. Templates can be compiled at build time, allowing the build process to remove the template compiler from your bundled payload. Finally the build process does tree-shaking with the help of static analysis of your code, which further removes from the payload bundle unused portions of the platform.
If you provide Angular from a CDN, it would need to be the kitchen sink, the entire platform. This would be huge and a detriment to your application.
You are much better off allowing angular-cli bundle the portions of the platform that you need. As the WebPack treeshaking plugin improves your bundle sizes will get smaller.
I would add your whole app to a CDN such as Akamai. For example (depending on how your app is structured) you could cache files such as the ones in the below list...
index.html
List item
application.css
application.js
templates.js
vendors.css
vendors.js
This would give even better performance than just caching the Angular framework files on the CDN.

What is the general method for including plugins installed via Bower?

Imagine I've just used bower install angular-date-range-picker to install a plugin I want in the root directory of my project.
Now typically all of my js files (angular project) are sitting in a folder called js on on the root directory of the project.
Here's where I feel I'm missing something. How do I include my nice new plugin into my project without tracing back through every dependency the bower command installed? I typically include all my scripts on the index.html with tags. I've copied the plugin js file out of the bower_components folder and into my js folder (which I now feel is wrong).
If this is an acceptable way to link to plugins then should I be linking directly to the bower_components folder and how do I include all of that plugin's dependencies without literally writing a script tag for each one? (And how do I know what it depends on, there are other plugins in that bower_components folder for instance).
Apologies if this question doesn't make any sense, I'm obviously missing some very important workflow knowledge and I don't know how to phrase the question to find want I want with Google.
You should be writing a script tag for each one. In most cases, check the corresponding github repo to see what dependency libraries are needed. In addition to this, a hint to see what file you should be referencing in your script tag will have an extension of .min. .min is a minified version of the library that removes whitespace and replaces large variable names.
Once your application is ready for production, there are a couple things you can do.
You may want to move to a Content Delivery Network (CDN) instead of referencing your files locally. The advantage of this is you'll have a reliable host hosting your library files.
Another option is to use either Grunt or Gulp, which has the ability to combine all of your dependancy files into one file. The advantage of this is having a much quicker load time of loading one file instead of multiple.
Content Delivery Network - Wikipedia
Grunt - Homepage
Gulp - Homepage
Usually it's configured something like this:
<!-- build:js ${contextRoot}/app/assets/scripts/modules.min.js -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/select2/select2.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
...
<!-- endbuild -->
to include script into index.html. Then during build process some grunt/gulp (grunt-usemin, for example) plugins can replace the entire section between <!-- build: --> comments with minified version of the files.
As said before, you can use Grunt with grunt-injector, it's been specially made for that and can be used to automatically inject bower dependencies into your index.html, as well as your other js/css files (you will need the wiredep dependency).
You will no longer have to worry about your files injection.

Categories

Resources