How to install Twitter Bootstrap to an angular 2 project? - javascript

I have cloned the angular 2 seed project that provides fast, reliable and extensible starter for the development of my Angular 2 project.
Now, I want to install Twitter Bootstrap into my project. I followed the Angular docs:
Let's add the stylesheet.
Open a terminal window in the application root folder and enter the command:
npm install bootstrap --save
Open index.html and add the following link to the .
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
But Twitter Bootstrap classes are not working in my html files. And When I checked the source code from my browser, I found that my index.html file does not contain this line of code
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> even though I have added it to my index. I have tried to refresh the browser several times and I have searched for a configurable way to install Twitter Bootstrap to my project but nothing found.
Here is my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%= APP_BASE %>">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= APP_TITLE %></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- inject:css -->
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- endinject -->
</head>
<body>
<vynd-web-user-app>Loading...</vynd-web-user-app>
<script>
// Fixes undefined module function in SystemJS bundle
function module() {}
</script>
<!-- shims:js -->
<!-- endinject -->
<% if (ENV === 'dev') { %>
<script>
System.config(<%=
JSON.stringify(SYSTEM_CONFIG, null, 2)
%>)
</script>
<% } %>
<!-- libs:js -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>-->
<!-- endinject -->
<!-- inject:js -->
<!-- endinject -->
<% if (ENV === 'dev') { %>
<script>
System.import('<%= BOOTSTRAP_MODULE %>')
.catch(function (e) {
console.error(e,
'Report this error at https://github.com/mgechev/angular2-seed/issues');
});
</script>
<% } %>
</body>
</html>
And here is an overview of my project structure:
And here is the loaded index.html file in my browser:

The problem is in this part of code
<!-- inject:css -->
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- endinject -->
First, when I saw the <!-- inject:css --> and <!-- endinject --> comments in my index.html file, I thought that the team who are creating the angular 2 seed project provides those comments for us for more readable code and It is preferred to add every new css library between those two comments. But when I added the twitter bootstrap framework outside those two comments, it worked very well. Maybe every line of code that resides between the <!-- inject:css --> and <!-- endinject --> would be overridden by some automatically injected codes by some angular configuration files.

If you use angular-cli for your project my answer could be useful for you.
in root project directory run npm install --save bootstrap
edit .angular-cli.json - the file is in same location. Find here "styles" section
And add your bootstrap.css:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
I've added "../node_modules/bootstrap/dist/css/bootstrap.min.css", in my project. And now I can use all bootstrap classes.
P.S.
If you need not only bootstrap styles but some bootstrap scripts, just add into .angular-cli.json also script location in correspond section:
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js"
],

The route where you are loading the .css should be css/bootstrap/bootstrap.min.cs
Keep in mind that if you put ../ in your index.html, it will try to look in the parent folder where that file is, and since your css is in a folder in the same folder where you currently have the index.html try that.
Hope this helps

Related

Implement HTML CSS and Javascript Template in Angular 7

I purchased a template which includes HTML, CSS, and Javascript files for a static webpage. I'm trying to use these existing files in my Angular project so I can connect it with a Nodejs app to make it a full stack webpage with backend. However, when I tried to put these files into Angular, everything is broken and is not functioning as it would when I manually open the HTML files on Chrome.
I've tried creating components for each HTML pages and adding the CSS and Javascript files into assets folder. Then I went on angular.json and added each CSS files into the styles array and the Javascript files into scripts array.
The HTML files look something like this:
<!doctype html>
<html lang="en">
<head>
<!-- Basic Page Needs
================================================== -->
<title>Hireo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../../assets/css/style.css">
<link rel="stylesheet" href="../../../assets/css/colors/blue.css">
</head>
<body>
.........body code...........
<!-- Scripts
================================================== -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-3.0.0.min.js"></script>
<script src="js/mmenu.min.js"></script>
<script src="js/tippy.all.min.js"></script>
<script src="js/simplebar.min.js"></script>
<script src="js/bootstrap-slider.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/snackbar.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/counterup.min.js"></script>
<script src="js/magnific-popup.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
Anything you put in your assets folder will be available to the application, just remember to provide the relative/absolute path including assets.
If you have files in other folders or have specific errors (e.g. in the Network tab in Dev Tools), please provide more details that so I can advise. Until then, you can find most common solutions in https://lukasznojek.com/blog/2019/03/angular-cli-different-ways-to-include-assets/.
In your angular.json file add the static .html files to the assets array with their respective paths. You can then access the files i.e www.your-domain.com/your-static-file.html

React boilerplate doesn't load js files in the index.html

I'm testing React-boilerplate and I'm trying to load some javascript files in the app/index.html file:
<!doctype html>
<html lang="en">
<head>
<!-- The first thing in any HTML file should be the charset -->
<meta charset="utf-8">
<!-- Make the page mobile compatible -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Allow installing the app to the homescreen -->
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<script type="text/javascript" src="myJScriptFile1.js"></script>
<script type="text/javascript" src="myJScriptFile2.js"></script>
</head>
<body>
<!-- Display a message if JS has been disabled on the browser. -->
<noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
<!-- The app hooks into this div -->
<div id="app"></div>
<!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
</body>
</html>
This is the default index.html file. I'm running it with npm or yarn and the server console shows me no error, but my browser console keeps telling me:
Uncaught SyntaxError: Unexpected token <
Just like this, there is no more error. These javascript files work fine because I'm using them into another React based project, and I'm calling them into the index.html file as well. The console prints that error per file. If I trace the error it leads me to the correspond .js file.
After almost a week searching the web I couldn't find a solution. So that's it, does anybody have any idea on how to solve this?
Well, I'm answering myself. I needed a little bit more of research in webpack. I achieve this through webpack:
installed npm i add-asset-html-webpack-plugin -D
then, in the webpack config file, under plugins I added:
new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') })
and that's it.

Ionic 2: ReferenceError: webpackJsonp is not defined

I'm new to Ionic. I have started project with super template. But when I try to run the app in browser. It throws an error saying:
ReferenceError: webpackJsonp is not defined
at http://localhost:8100/build/main.js:1:1
I have tried putting vendor.js in index.html but that has not worked.
Here's the index.html file. I have removed vendor.js as it didn't work.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
Literally just went through the same thing as you are. I added the vendor.js script BEFORE the main.js in /src/index.html - now it runs locally.
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<script src="build/vendor.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
This is a breaking change in Ionic-App-Scripts
https://github.com/ionic-team/ionic-app-scripts/releases/tag/v2.0.0
src/index.html must be modified to include a new vendor script tag .
...
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script src="cordova.js"></script>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- all code from node_modules directory is here -->
<script src="build/vendor.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
...
Add vendor.js path within the script tag in < your application directory > /src/index.html
<script src="build/vendor.js"></script>
Also make changes in < your application directory >/src/service-worker.js File - Include vendor.js in the precache section:
// pre-cache our key assets
self.toolbox.precache(
[
'./build/main.js',
'./build/vendor.js', // <=== Add vendor.js
'./build/main.css',
'./build/polyfills.js',
'index.html',
'manifest.json'
]
);
I face the same issue when i started developing old ionic 2 project with ionic 3.
follow this steps works for me.
opne src\index.html
put this line
<script src="build/vendor.js"></script>
before
<script src="build/main.js"></script>
and after
<script src="build/polyfills.js"></script>
like this
<!DOCTYPE html>
...
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app>
</ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<script src="build/vendor.js"></script> <---- here
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
npm install -g ionic#v3.0.1
or
yarn add -g ionic#v3.0.1
Ionic version problem bro.
check the version.
npm install -g ionic#v3.0.1
npm install -g ionic#v2.0.1
npm install -g ionic#v1
I was working on a ReactJs project when I faced this error. This could be a case of missing dependencies from package.json file which eventually bubbles up in the form of error reported by OP. In our case a reference to omitJs npm package was missing. The moment I added below line in dependencies section of package.json file it all started to work:
"dependencies": {
.....other dependencies
"omit.js": "1.0.0"
}
I just have faced this issue, and the order of the files polyfills/vendor/main doesn't anything has to do in my case, but it was the size of the vendor.js file.
I did realize it because it works on my local machine, so, I did find that vendor.js was 5MB, so, I builded again the app using --prod parameter:
ionic cordova build ios --prod

yeoman webapp: Minified JS for multiple HTML pages

I'm playing around with the yeoman webapp generator and want to have multiple minified JavaScript files for my individual subpages for my page. However, the webapp concats all JavaScript files to one "big" main.js which does not match my setup.
In my setup, main.js is supposed to be some kind of common JavaScript file for all pages but each page should have an additional JavaScript file with stuff that only relates to this page. E.g.
index.html -> uses main.js
subpage1.html -> uses main.js and subpage1.js
subpage2.html -> uses main.js and subpage2.js
The result from gulp build is a big main.js that contains the main.js, subpage1.js and the subpage2.js which leads to errors: if I open subpage1.html, subpage2.js (the one that is included in the big main.js) might try to access HTML nodes that only exist on subpage2.html but not on subpage1.html.
E.g.:
subpage1.html includes the big main.js with subpage2.js
<script src="scripts/main.js"></script>
which contains subpage1.js AND subpage2.js, however if I do the following in subpage2.js
$('#IdThatOnlyExistsOnSubPage2').someMethod(...)
this fails of course.
How do I have to adjust the Gulpfile to solve this problem?
JS and CSS builds are generating with uglify (formerly known as usemin) you could find more advanced options and features from their documentation but I think you should separate build block by your needs.
If you have a common JS file for every page, you have to put them together for each pages and create new block for page specific files.
Here is example.
<!-- build:js scripts/main.js -->
<script src="config.js"></script>
<script src="app.js"></script>
<!-- endbuild -->
<!-- build:js scripts/page-dashboard.js -->
<script src="dashboard-charts.js"></script>
<script src="dashboard-widgets.js"></script>
<script src="dashboard-main.js"></script>
<!-- endbuild -->
Also you could do same thing for CSS file builds.
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="app.css">
<!-- endbuild -->
<!-- build:css style/page-dashboard.css -->
<link rel="stylesheet" href="dashboard-charts.css">
<link rel="stylesheet" href="dashboard-widgets.css">
<link rel="stylesheet" href="dashboard-main.css">
<!-- endbuild -->

How to import a js package in Angular 2 project?

I have an Angular 2 project and I would like to add a JavaScript package called bootstrap-slider and I have trouble understanding how I am supposed integrated the package in the project.
I started by adding the package to my node_modules by adding "bootstrap-slider" under dependencies in the package.json file and running "npm install". The entry in my package looks like this:
"bootstrap-slider": "^9.2.0",
I can see that a new folder with content for the slider has been added inside of node_modules. After looking up several guides and explanations I have tried the following in my index.html in order to properly import and use the JS package. My index html now looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= webpackConfig.metadata.title %></title>
<meta name="description" content="<%= webpackConfig.metadata.description %>">
<% if (webpackConfig.htmlElements.headTags) { %>
<!-- Configured Head Tags -->
<%= webpackConfig.htmlElements.headTags %>
<% } %>
<!-- base url -->
<base href="<%= webpackConfig.metadata.baseUrl %>">
<script src="../node_modules/bootstrap-slider/src/js/bootstrap-slider.js"></script>
<script>
System.config({
paths: {
bootstrap-slider: ‘../node_modules/bootstrap-slider/src/js/bootstrap-slider.js’
}
});
</script>
</head>
<body>
<app>
</app>
<div id="preloader">
<div></div>
</div>
<% if (webpackConfig.metadata.isDevServer && webpackConfig.metadata.HMR !== true) { %>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
<% } %>
<link
href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic'
rel='stylesheet' type='text/css'>
</body>
</html>
I have then tried running the example code (wihtout jQuery) on their github in one of the pages on my website to no end.
<input
type="text"
name="somename"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["short", "medium", "long"]'
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide"
>
I would like to know is how to add this JavaScript package and other packages in the future to my project. Any help is greatly appreciated!
I think it is more comfortable to keep a single package manager for your projects. If still you prefer using a specific package manager for your front-end runtime dependencies, I do not recommend using bower anymore, as it is getting deprecated. Use Yarn instead.
It is perfectly possible to include styles and scripts from node_modules if you are using angular-cli to set your project up. You can edit the .angular-cli.json file in your project and add as many styles or scripts to your angular application as necessary. In order to add styles and scripts you may add them to the app.styles and app.scripts arrays respectively:
{
...
"apps": [
{
...
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": ["../node_modules/bootstrap/dist/js/bootstrap.min.js"],
}
]
}
Angular-cli will include the styles and scripts you specify in .angular-cli.json inside the styles.bundle.js and scripts.bundle.js respectively. Both bundles will be automatically added to your Angular application for you.
I've never used bootstrap-slider, but already install many modules. Have you any error message in your Javascript console ?
Otherwise, to add module you have to do the following :
install it via npm or bower (like you have done or by execute : npm install bootstrap-slider )
import JS and CSS files in your index.html file (again, you have already done that)
import module in your module config, app.js, here is an exemple with ngRoute module :
angular
.module('myApp', [
'ngRoute'
]);

Categories

Resources