Develop Reference

Install offline Bootstrap in Angular

I don't have any way to have internet on my pc and I want to install Bootstrap in my Angular project by downloading it and calling it in my index.html so i can use it offline. Can't use npm i or anything related to internet besides downloading the Bootstrap zip
I just put its folder in "src" and called it with:
<link rel="stylesheet" href="src\bootstrap\css\bootstrap.min.css">
<script src="src\bootstrap\js\bootstrap.min.js"></script>
This isn't working, should I download also popper.js and Jquery? Or should I change something in Angular.json?

Try using assets folder for static files.So move your files to assets and change links like
<link rel="stylesheet" href="assets\bootstrap\css\bootstrap.min.css">
<script src="assets\bootstrap\js\bootstrap.min.js"></script>
Also you will need to add jquery as well

Put the files in the assets folders. It's better to import those files in angular.json instead of index.html. You will also have to include JQuery and popper as in official bootstrap documentation:
Many of our components require the use of JavaScript to function.
Specifically, they require jQuery, Popper.js, and our own JavaScript
plugins.
"styles": [
"src/assets/bootstrap/css/bootstrap.min.css""
],
"scripts": [
"src/assets/jquery/remainingpath...",
"src/assets/popper/remainingpath...",
"src/assets/bootstrap/js/bootstrap/bootstrap.min.js"
]

Angular 2- how to use external lib

I am new with Angular and Angular 2, and I would like to use the following external lib in my project:
http://angularjs.jqueryrain.com/draw-polygons-image-angularjs-canvas/
To use this lib, I have put the following line in my index.html file before angular:
<script src="./lib/angular-canvas-area-draw.js"></script>
But I have the following error:
Uncaught ReferenceError: angular is not defined
at angular-canvas-area-draw.js:3
at angular-canvas-area-draw.js:234
How should i resolve this problem?

Assuming by your tags, you are trying to use an AngularJs plugin inside an Angular application, that won't work (Or at least it would be pretty hard to get it running by using the upgrade adapter and some zonejs hacking). Try to find the plugin for Angular instead of AngularJs.
But if your tags are misleading and you're using AngularJs than make sure AngularJs in included before the plugin.
<script type="text/javascript" src="./lib/angular.min.js"></script>
<script src="./lib/angular-canvas-area-draw.js"></script>

Move your dependencie into .angular-cli.json file under scripts like this
"scripts": [
....,
"./lib/angular-canvas-area-draw.js"
],
from the latest angulae cli you have to add all external files(css and js) under the script and style tag in the angular-cli.json file

Adding external libraries in Angular2

I am starting my adventure with Angular2 and I've read lots of tutorials, but there is one thing I am concern about. Lets say we have two views - one with report and one with upload image.
First view will be handled by - let's say 'ReportComponent' and on html template it will use 'Chart.js' library
Second view will be handled by 'UploadMediaComponent' and on html template it will use 'Dropzone.js'
How to include this javascript libraries on html? In most tutorials I've read the only way to resolve it is to include both libraries in the index.html page (which is consistent with single page application pattern). But in the other hand - do we really need load hundreds of external libraries at once and beggining of loading the app even if we need to use it only in one view (one component)? Let's say I just need to use 'Dropzone.js' on only one view, do I need to load it on every html view on client side?

You could add file in your angular-cli.json configuration file.
Example :
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/highcharts/highcharts.js",
"../node_modules/chart.js/dist/Chart.js",
"../node_modules/chart.js/dist/Chart.min.js"
]
directly add all JS build will generate script bundled version , Not needed any imports

You could add file in your angular-cli.json configuration file.
Example :
"assets": [
"path/Dropzone.js" ,
"path/Chart.js"
],
Then directly include file to ReportComponent
<script src="/Chart.js"></script>
and UploadMediaComponent
<script src="/Dropzone.js"></script>

Have you tried to use bower or npm ? after you set it and install the libraries you need with bower install package it adds them to your html the libraries automatically.

Ext JS 6 - Charts are not found despite including ext-all.js

Despite that I included ext-all.js file in my index page; getting error like below when I try this online Guage chart example provided by Sencha
http://myapp.com/widget/polar.js?_dc=1436970370848 404 (Not Found)
Uncaught Error: [Ext.create] Unrecognized class name / alias: widget.polar

The charts are in a separated package:
Sencha Charts are not included in the Ext JS library by default. In
order to include the charts package, simply add “charts”
(“sencha-charts” if working with Ext JS 5.x) to the requires block
in your Sencha Cmd generated application’s {appRoot}/app.json file.
Adding a package name to the requires array directs Cmd to make the
package available to your application.
https://docs.sencha.com/extjs/5.1/components/introduction_to_charting.html

"requires": [
"charts"
],
This should be uncommented from your app.json

In Extjs 6, you have to include sencha charts by uncommenting
"requires": [
"sencha-charts"
],
in app.json and the run sencha app watch command in sencha cmd through application folder.
It works for me, hope this will be helpful to you :)

I had exactly same problem in rendering polar charts.Found out below solution:
Add below in application.js
requires: ['Ext.chart.*']

In addition to uncommenting "required" : 'Charts' ('charts' for ExtJS 6, and 'sencha-charts' for ExtJS 5) that works well for Sencha Cmd projects, I see that you include ext-all.js files by yourself. Probably you need to find them... you can find all files there ->
https://cdnjs.com/libraries/extjs/6.2.0 All ExtJS files, used for including. That may be used for online linking (in jsfiddle.net, for example). Write at the end 6.1.0, 6.0.0, 5.1.0 or any version you need.
Found within this linkage example https://www.sencha.com/forum/showthread.php?303990-Is-there-a-free-GPA-CDN-for-ExtJS-6-l&p=1115697&viewfull=1#post1115697
In jsfiddle - https://jsfiddle.net/Elunyfay/7v0uo2w6/7/
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all-debug.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/theme-triton-debug.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/charts-debug.js"></script>
<link type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/classic/resources/charts-all-debug.css">
...

For ExtJS 6.x using open tooling - you have to install charts module manually
npm install #sencha/ext-charts
(do not use -g flag because Sencha CMD searches for files in the source folder)
and than add
"requires": [
"charts"
],
to your app.json file.

Missing something trying to get bootstrap included into meteor as a local git submodule

I'm trying to install a local copy of bootstrap into a meteor project to make it easier to customise it.
I was using the bootsrap-3 smart package and it was working pretty well, so removed that, created the directory tree and files described in Use Twitter Bootstrap 3 RC1 with Meteor and executed meteor add bootstrap which displayed the text from the summary string, but, no bootstrap is included in the project.
I added bootstrap with
git submodule add git://github.com/twitter/bootstrap.git public/bootstrap
and adjusted the paths appropriately in the packages/bootstrap/package.js file (even tried absolute paths to try and get it to work).
package.js looks like
Package.describe({
summary: "Load locale bootstrap scripts"
});
Package.on_use(function(api) {
api.add_files('../../public/bootstrap/dist/js/bootstrap.min.js', 'client');
});
I'm missing something, but struggling to find it.
Peter

You could stick to the standard way of creating packages by just putting Bootstrap 3's css, fonts, and js directories at the top-level of your package directory, and link to them like this in package.js:
api.add_files('css/bootstrap.css', 'client');
api.add_files('js/bootstrap.min.js', 'client');
...
If you care about the icons, add the fonts the same way. Then, create an override css file which loads last, overriding the paths to the icons in the Bootstrap css. An example of this override file is in Meteor's official Bootstrap 2 package, here. Also see the package.js file from the same, here (though I think you could skip using NPM to concatenate the path names).

One easy way to add bootstrap is just to place the files in your client directory, probably at client/lib. That is the simplest way if you are going to maintain and customise the files yourself. You will probably want both the .css and .js from bootstrap.
For a package, I would look at bootstrap3-less. It can be added with meteorite and gives you the less files which you can customise. If that doesn't suit you then you can at least see how the package.js there looks and how the package is organised.