Boostrap css doesn't work - javascript

I installed npm install bootstrap --save
and added (below) to index.html but the styles doesn't change.
<link rel="stylesheet"
href="node_modules/bootstrap/dist/css/bootstrap.min.css">
My code (in other file):
<button type="submit" class="btn btn-default">Submit</button>
Only when I add this (below) to index.html, all works but the first web's load is very slow:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Update: (More details)
The file bootstrap.min.css does exsist but the console says it cant find it.
Folders Strucure:
There is main folder is ang2project and inside it there are node_modules folder and src folder that contain the index.html
-angular2_projects
-node_modules
-bootstrap
-dist
-css
bootstrap.min.css
-src
-index.html

Related

Angular 6 : How to use css and js files from cshtml pages of mvc into Angular project

I am trying to migrate a MVC project into Angular 6.
I have css files and js files in chtml code which are used in the mvc application as below :
<link rel="stylesheet" href="~/OptumFiles/fonts-clientlibs-global.min.css" type="text/css">
<link rel="stylesheet" href="~/OptumFiles/optum-clientlibs-global.min.css" type="text/css">
<script async="" src="~/OptumFiles/analytics.js"></script>
<script async="" src="~/OptumFiles/js.js"></script>
Now i want to use these files in my angular project globally.
Things i have tried :
Created a folder FICAssets in the Angular project.
Added files in that folder.
Added their reference in index.html file.
Code in index.html :
<body>
<link rel="stylesheet" type="css" href="FICAssets/css/fonts-clientlibs-global.min.css">
<link rel="stylesheet" type="css" href="FICAssets/css/optum-clientlibs-global.min.css">
<script src="FICAssets/js/analytics.js"></script>
<script src="FICAssets/js/js.js"></script>
<app-root></app-root>
</body>
The problem is that iam still not able to load the files , getting 404 error.
Assets aren't magical, they need to be declared as such.
Open your angular.json file. Find the path
projects.YourProjectName.architect.build.options.assets
And from there, add your declared folder in it. It should keep the assets up when the project is complied.
open your angular.json.
add style in "styles": []
add script in "scripts": []
reference link :- https://www.truecodex.com/course/angular-6/how-to-include-external-css-and-js-file-in-angular-6-angular-7

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 handle all the minification / uglify process

I have a AngularJS application which I should deploy and I found that it is better to minify / uglify my javascript file for production.
I found different way to uglify my files like grunt for example.
But there is something I don't get...
I will minify/uglify those files then I will have a specific folder for those "production" files. OK
Then :
How should I use them in my index.html ?
How should I switch from dev to prod ?
What should be the structure of my website folder ? Should I still contain the not-uglified files ?
So I can explain it to you using gulp instead of grunt.
How should I use them in my index.html ?
You can put JS and CSS files in your html. In html we can specify comments saying which files need to be compiled together along with destination file using bower.
For example:-
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/angular-material/angular-material.css" />
<link rel="stylesheet" href="/bower_components/angular-ui-router-anim-in-out/css/anim-in-out.css" />
<link rel="stylesheet" href="/bower_components/video.js/dist/video-js.css" />
<link rel="stylesheet" href="/bower_components/angular-tooltips/dist/angular-tooltips.min.css" />
<link rel="stylesheet" href="/bower_components/nvd3/build/nv.d3.css" />
<!-- endbower -->
<!-- endbuild -->
Now if see the above css files are compiled into vendor.css while you run the gulp script. Now in gulp script you can provide the option for uglification and minification.
Similarly you can put js files also. Now this is how uglification and minification takes places.
gulp.src('app/*.html')
.pipe(assets)
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.minifyCss({
compatibility: '*'
})))
If you uglify/minify now you index.html has following:-
<link rel="stylesheet" href="/styles/vendors.css" />
How should I switch from dev to prod ?
You can keep a nested JSON file and create individual elements for dev,prod and local and keep required settings here and use them in gulp while compiling the project.
{
"dev": {
//required keys
},
"prod" :{
//required keys
}
What should be the structure of my website folder ? Should I still contain the not-uglified files ?
Your website structure can be as:-
app
scripts
styles
fonts
index.html
bower.json
gulpfile.js
another way is to use gulp-useref plugin, putting comments inside the html file to mark all js files and name the resulting bundle
in the html file
<!-- build:js bundle.js -->
<script src="js/jsfile1.js" ></script>
<script src="js/jsfile2.js" ></script>
<script src="js/jsfile3.js" ></script>
<!-- endbuild -->
in the gulpfile.js
gulp.task('build', function(){
gulp.src('app/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulp.dest('build'));
});
this will result a single minified js file bundle.js with proper reference in the html file

JS and CSS files not loading inside html

My folder structure looks like,
MyProject
|
webcontent
Inside webContent folder I am having my html, js,CSS files.
Here I am loading the js & CSS files directly as below.
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
But I want to keep the js and CSS file in different folder and I need to call them where I want. But I am not getting where to place the js & CSS file and how to define the path inside html or jsp.
It depends on where they are and how you configure your web server. With a default configuration on nearly all web servers, if you want your scripts in a subdirectory of webcontent, then just add directory-name/ in front of the paths. E.g., for:
MyProject/
|
webcontent/
|
js/
jquery-1.0.2.js
jquery-ui.js
css/
jquery-ui.css
then
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
The search terms for this are "relative URL" and/or "relative path."
Suppose you have your css file in
WebRoot --> Css
folder then use below line in your html
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
I hope this helps you
for example, Your HTml file is in one folder and your CSS/js file is in a folder name "mystyle" inside HTML folder. You should address your CSS file LIKE this:
<link rel="stylesheet" href="mystyle/style.css" />
And if your file is in a folder "before" HTML folder, your address your css/js file like this:
<link rel="stylesheet" href="../mystyle/style.css" />

Categories

Resources