I started learning Angular and I'm following a tutorial. I tried putting the code as in the tutorial for the navigation-bar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
Recipe book
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> Recipe</li>
<li> Shopping list</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<ul class="dropdown-menu">
<li>Save data </li>
<li>Fetch data </li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
But all I get is this:
If I remove bootstrap, I do get the other items.
I used npm install bootstrap --save and #import "~bootstrap/dist/css/bootstrap.css"; in styles.css to use bootstrap.
EDIT:
I did not wanted to open a question with two problem, but after looking at the answers so far ill describe another problem I had:
I also installed Jquery using nmp install jquery --save and added to angular.json:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/tether/dist/js/tether.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
In this case, after removing #import "~bootstrap/dist/css/bootstrap.css"; from styles.css`, bootstrap is not working at all.
The only way i got bootstrap to work is as i described in the question.
EDIT 2:
I started a new project and followed #HDJEMAI s answer instructions.
I now still get the same page as in the picture but its now working through the rows added to styles and scripts in angular.json and not through the #import "~bootstrap/dist/css/bootstrap.css" in the styles.css file . But the problem is still that is not the same as in the tutorial even though the code is the same.
This is what he gets in the tutorial:
You have to install both bootstrap and JQuery:
npm install bootstrap jquery --save
Then you will find these files in your node module folder:
node_modules/jquery/dist/jquery.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js
Then you have to update your angular.json file:
In the architect, build section, or even test section if you want to see Bootstrap working as well when testing your application.
"styles": [
"styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
],
If you do not add the jquery.min.js script Bootstrap will not work.
Another requirement is popper.js if you need Bootstrap dropdown then you will need to install it and add the script file as well
npm install popper.js
Then add this script as well
"styles": [
"styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/popper.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Bootstrap dropdown require Popper.js (https://popper.js.org)
If you are adding the bootstrap path into the angular.json file, make sure it is the styles within the project\architect\build. Not the one in the project\architect\test.
{
"projects": {
"architect": {
"build": {
"styles": [
"node_modules/bootstrap/dist/bootstrap.min.css",
"src/styles.css"
],
"test": {
"styles": [
"src/styles.css"
],
First uninstall bootstrap. The next step is to install bootstrap by following command
npm install --save bootstrap#3 A
next go to styles.css and paste
#import "node_modules/bootstrap/dist/css/bootstrap.css"
I had the same issue. Below helped for me.
Stop the server and recompile using
ng serve
As I see, if you are following "Maximilian Schwarzmüller" course in UDEMY, make sure you have installed Bootstrap 3, not anything else. Use these commands in your project folder (the uninstall only if other version are installed).
npm uninstall --save bootstrap
npm install --save bootstrap#3
This will install it locally to your project.
I had Bootstrap4 installed (thinking the course would still work with 4 instead of 3) and using Bootstrap3 instead worked in this same project as your in the course (without popper and jQuery).
I've had a similar issue after installing bootstrap popper.js jquery I've manually removed bootstrap popper.js jquery folders from node_modules then I've done the following:
npm i bootstrap#latest jquery popper.js --save
going back to angular.json I've made sure I've included the following scripts under projects > architect > build :
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./src/styles.scss"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/popper.js/dist/popper.min.js"
],
It solved the problem for me.
On my end, I've solved this issue by adding the following into "style.css" file and it worked.
#import "~bootstrap/dist/css/bootstrap.css"
Add your angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"xtreme-admin-angular": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/xtreme-admin-angular",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/bootstrap.min.css"
//Your root depend this path
]
And rerun your project
Add this 3 links in your index.html file. You don't have to install bootstrap or jquery or update your angular.json file. Works as a charm.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
install npm install bootstrap#latest jquery --save
install npm install popper.js;
then go to Angular.json file (line no 47) change lines with this:
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/popper.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
],
After installation of bootstrap and adding it to angular.json file.
If bootstrap doesn't render, just change the port of development URL:
ng serve --port <your choice of port>
I think it is because of the problem with bootstrap, try this:
Step 1.
Inside .angular-cli.json file
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]
Remove "../node_modules/bootstrap/dist/css/bootstrap.min.css"
Step 2.
Go to styles.css
Import bootstrap by adding this line
#import "~bootstrap/dist/css/bootstrap.css";
These steps solved the errors I got during the building process.
Had same issues with bootstrap items using VS code editor. I tried ng build before ng serve and bootstrap items worked fine.
I’d start by checking both “styles” and “scripts” under “build” and “test” sections
Add this line in style.css and its gonna work.
#import "~bootstrap/dist/css/bootstrap.css";
Thanks
For me I had to do both, copy the node_modules jquery and bootstrap js files in angular.json
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
And copy #import "~bootstrap/dist/css/bootstrap.css"; in styles.css
I have also created a project following the video. This works for me
npm uninstall --save bootstrap npm install --save bootstrap#3
then in style array added like this
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
Please check all your .component.ts files, especially recipe.component.ts. Maybe there is CSS encapsulation tuning like
#Component({
selector: 'app-recipes',
templateUrl: './recipes.component.html',
styleUrls: ['./recipes.component.css'],
encapsulation: ViewEncapsulation.ShadowDom
})
If it is so. You should remove encapsulation property.
I had the same problem when using bootstrap in an Angular project. I correctly installed it and updated the angular.json file, but I forgot to import it into the global style sheet (styles.css). As a result, I included it in the global stylesheet. So, if your installation is correct and your angular.json is up to date, please try importing it in the global style sheet (styles.css) as shown below:
#import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
I'm hoping it works because it did for me when I had the same problem.
I check many way
"../"...
or
"./"...
or /
also I don't want to use in "style.css" because maybe want add some "js" files or "css" files that depend on "js" file
to this reason
the best way was
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
BUT restart your PC not only browser or IDE
Related
I want to use in my project both Angular Material & Bootstrap.
Everything works perfect if I use only Angular Material
and have in Angular.json file the following styles:
"styles": ["src/theme.scss", "src/styles.css"],
If I also install bootstrap#latest and change the style in Angular.json file to:
"styles": [
"src/theme.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
it seems that my app's style "breaks".
Isn't it possible to use Angular material for some features and bootstrap for some others?
After install #angular/material
added those files inside styles
"styles": [
"src/theme.scss",
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/#angular/material/prebuilt-themes/indigo-pink.css",
"node_modules/#matheo/datepicker/prebuilt-themes/indigo-pink.css"
],
I'm trying to learn tailwindCss but the documentation shows the latest version
https://tailwindcss.com/docs/installation
which I followed to set up my first project, but the issue here is when I apply the utility class to my project it's not working. Here is my code
<body>
<h1 class="text-lime-400">Hello World of Joy </h1>
<hr>
</body>
here is the link to the generated styles by tailwindcss
<link rel="stylesheet" href="/public/styles.css">
Assalamu'Alaikum. Thank you for your question. As you are beginning with tailwind I suggest you to use CDN first. In Installation you will find Play CDN where you will copy only
<script src="https://cdn.tailwindcss.com"></script>
and paste in your head section of HTML.
after that all tailwind css code will run.
But if you wish to use it by installing then i suppose you got a package.json file. where you should write a script to build your css. and you need to build css. if you change anything in tailwind.config.js then you will need to rebuild the css again to effect the changed variants.
{
"name": "dims-web-1.1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build-css": "tailwindcss build src/style.css -o public/styles.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"tailwindcss": "^2.2.19"
}
}
here in scripts "build-css" is my custom code to build css. to build the css.
in terminal you need to write
npm run build-css
and hit enter to get your css in your public.css
then tailwind utility classes will work fine.
Thank You
Is There any difference to import to an Angular project a CSS lib (eg bootstrap) considering the options below:
Angular.json (npm)
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
Angular.json (CSS file locally)
"styles": [
"assets/lib/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
styles.scss (CSS file locally)
#import "assets/lib/bootstrap/css/bootstrap.min.css";
I suggest the first solution, because:
All three will end up in main CSS bundle
But 2. and 3. will also have original bootstrap inside assets. Even though it's used in bundle, it won't be removed from assets - which are a part of a build as it is.
Also, if you update Bootstrap it's way easier doing so by NPM.
I want to use PrimeNG's FlexGrid and tried to simply copy the example:
<div class="p-grid">
<div class="p-col">1</div>
<div class="p-col">2</div>
<div class="p-col">3</div>
</div>
which was supposed to output the numbers 1 2 3 next to each other. Sadly it does not, but just output:
1
2
3
I am able to use PrimeNG's Button-styles. Yet, I ensured I imported the css-files mentioned in the Get-Started Guide. In my app.module.ts it says:
"styles": [
"src/styles.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
so these seem to be there. What did I do wrong?
You need to install the primeflex package.
npm i primeflex
Then add the following to the styles array in your angular.json file.
node_modules/primeflex/primeflex.css
Things should work as expected afterward.
You should run:
npm install primeflex --save
And add primeflex.css into your application
Inside angular.json file:
"styles": [
"node_modules/primeflex/primeflex.css"
],
After that run the app again and check if css class properties are loading inside the app like below:
I am including a stand-alone build module which uses .scss (SASS) into an existing Angular app set up with plain CSS. Is it possible to have these both next to each other and does it need any custom configuration for example in the angular-cli.json defaults section:
"defaults": {
"styleExt": "css? scss?"
}
Or is it only possible to use one of the two?
EDIT for Angular 6+
Found on GitHub page of Angular:
stylePreprocessorOptions is still supported. You will have to manually update the newly generated angular.json though. Its new place is inside the "options" block of the json.
An example config could look like this:
"options": {
"outputPath": "../webapp",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
{
"glob": "**/*",
"input": "src/resources",
"output": "/resources"
},
],
"styles": [
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
},
"scripts": []
}
Note the changed path.
ORIGINAL answer
Actually it just went fine out-of-the-box by having the "styleExt" set to "css". A bunch of components in a specific module were using SASS. I have a sass folder with variables and mixins and this setting in angular-cli.json was needed to have these scss files compiled / processed correctly:
"stylePreprocessorOptions": {
"includePaths": [
"sass"
]
}
The application renders fine with a mix of css and scss files. I assume this styleExt parameter is just there for the default component style (css, scss, less) file generation when adding components via angular-cli commands.
You can have both but you have to set your style extension to SASS or CSS only.
Now of if you want to use CSS or SASS in your component just use Angular CLI to generate component like
For CSS
ng g component my-component --style=css
For SASS
ng g component my-component --style=sass
So set style extension to SASS and use CSS extensions also in your project
I would recommend you change the styleExt to scss and your css files to scss because scss is a superset of css.