I made:
npm install ng2-bootstrap --save
then opened angular-cli-build.js and added this line
vendorNpmFiles: [
..................
'ng2-bootstrap/**/*.js',
....................
]
Wrote in src/system-config.ts
const map:any ={
..................
'ng2-bootstrap': 'vendor/ng2-bootstrap',
....................
}
and
const packages: any = {
'ng2-bootstrap': {
format: 'cjs',
defaultExtension: 'js',
main: 'ng2-bootstrap.js'
}
};
But without the link from cdn
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I can't use styles Bootstrap. Can I do something with it?
ng2-bootstrap module is a bundle of Angular 2 components and directives which replaces the default bootstrap javascript. This means you don't need to include bootstrap javascript and jQuery in your Angular 2 application.
This module does not include bootstrap css. You will still need to include it in some way and the easiest solution is to add the cdn in your application. ng2-bootstrap will work perfectly with the default bootstrap css.
To include the bootstrap css you will need to add the following line to src/index.html:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Related
I'm trying to add mmenu.js to a Laravel 8 project. I've installed it using NPM, but I'm having trouble including it in the project.
Right now, in bootstrap.js I have this:
import Mmenu from 'mmenu-js';
window.Mmenu = Mmenu;
There's no detailed documentation on the site for how to install on Laravel, so any help would be appreciated!
You can include in your project by writing code in the head section of page.
Following is the example to put menu in your project.
<link href="path/to/css/mmenu.css" rel="stylesheet" />
<script src="path/to/js/mmenu.js"></script>
<!-- Fire the plugin -->
<script>
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "#my-menu" );
}
);
</script>
I recently started using bootstrap installed from npm and i have trouble importing the js file though
this is my main js file and where i want to use all the tools
import * as bootstrap from '../node_modules/bootstrap/dist/js/bootstrap.min.js';
console.log(bootstrap);
my main .html file (where i put my js file)
<script src="Js/js_main.js" type="module"></script>
When i run my page the tools/plugins dosen't work so... Is there a way to save this tools/plugins into your own js file like sass? or which is the best way to use them?
As I understood this, you are using bootstrap via npm to create html and js page. You are trying to get object of bootstrap js file but that is not the appropriate approach because it does not return anything.
You can use the absolute path of "../node_modules/bootstrap/dist/js/bootstrap.min.js" in your html page so that bootstrap will be available in your html page.
<!doctype html>
<html lang="en">
<head>
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<!-- Custom styles for this template -->
<style>
body {
padding-top: 5rem;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
</style>
</head>
<body>
<!--MAIN HTML LAYOUT-->
</body>
</html>
Actually now in Bootstrap 5 is possible import the esm version of Bootstrap like that for example (code in the src/index.js file and node_modules folder on the same level of the js folder):
import * as bootstrap from '../node_modules/bootstrap/dist/js/bootstrap.esm.min.js'
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
In this way there is a problem with the path of Popper.js dependency.
You can open the bootstrap.esm.min.js and replace the import of Popper with:
import * as Popper from '../../../#popperjs/core/dist/esm/index.js'
The advantage in this way is that I can import only the component I want namely:
import {Popover} from '../node_modules/bootstrap/dist/js/bootstrap.esm.min.js'
but remember that each import is an http request thereby you have to use webpack for example and in that case becomes more simple handle the project (in a different slightly different way from here).
I'm trying to use a chart component from Syncfusion in a simple application I'm developing.
It's pure JS, no Angular, no React, no TypeScript. I've not even used NPM
My problem is that I'm not able to import the necessary files to make the chart component works!
Following the documentation founded here
https://ej2.syncfusion.com/javascript/documentation/chart/es5-getting-started/
I've added a systemjs.config.js in my folder /_assets/systemjs.config.js and I've configured this way:
System.config({
paths: {
'syncfusion:': './_assets/vendors/Syncfusion/#syncfusion',
},
map: {
app: 'app',
//Syncfusion packages mapping
"#syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"#syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
"#syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
"#syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
"#syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
"#syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
"#syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
"#syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
"#syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
"#syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
"#syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
"#syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
"#syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
"#syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
,
},
packages: {
'app': { main: 'app', defaultExtension: 'js' }
}
});
It talks about "app" but I don't have an app variable... I'm not using Angular neither React.
In the folder /_assets/vendors/Syncfusion/ I've inserted all the scripts files of Syncfusion:
Then in my HTML page I've added:
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="/_assets/js/systemjs.config.js"></script>
but when I run the page from the local dev web server I get:
Test:94 Uncaught ReferenceError: ej is not defined
We have analyzed your query. And we have prepared a sample based on your requirement. To render EJ2 charts, you need to just refer the following scripts. There is no need to config the system.cofig as like the configuration you have done. We have already change the documentation from our side. It will be refreshed in the month of June.
Please find the below code snippet to achieve this requirement,
<head>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="line-container" align="center"></div>
<script>
var chart = new ej.charts.Chart({
//Initializing
});
chart.appendTo('#line-container');
</script>
</body>
Sample link: https://stackblitz.com/edit/3ugmn8?file=index.html
Kindly revert us, if you have any concerns.
Regards,
Baby.
We have analyzed your query. If you want to load only chart scripts instead of loading entire scripts. You can refer the charts and its dependency scripts alone.
Please find the below code snippet to achieve this requirement,
<head>
<script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-svg-base/dist/global/ej2-svg-base.min.js"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var chart = new ej.charts.Chart({
// Other customization
});
chart.appendTo('#container');
</script>
</body>
Sample for your reference can be found from below link,
chart sample
Kindly revert us, if you have any concerns.
Regards,
Baby.
I am trying to port angular 2 tutorial with Django backend
Here is my html file
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="/static/main.js"></script>
<script src="/static/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/static/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="/static/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="/static/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/static/node_modules/systemjs/dist/system.src.js"></script>
<script src="/static/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/static/node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('/static/app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
I found out that System.js is not working in
System.import('/static/app/main')
I have to use
System.import('/static/app/main.js')
and add .js manually to all my non 3rd libraries import for the angular app to work.
The interesting thing about this is that I don't have to add .js to
'angular2/core'
'angular2/platform/browser'
since System.js automatically resolves the import as long as I add .js extension manually to all the import for files I wrote.
But if I set
System.defaultJSExtensions = true;
I dont' have to add .js to my files anymore but System.js loses its capability to import all libraries in node_modules and instead try to use default django dir
http://localhost:8000/myApp/angular2/platform/browser.js
Can someone give me some guidance?
Thanks
I think you misunderstand what defaultJSExtensions configures. The latter simply allows to add the js extension when importing modules:
System.defaultJSExtensions = true;
// requests ./some/module.js instead
System.import('./some/module');
This applies if the module wasn't previously and explicitly registered using System.register.
The angular2.dev.js file contains modules for Angular2 core (registered explicitly with System.register). Including the file with a script element simply makes them available for imports.
If you want to use instead single JS files of Angular2 from node_modules/angular2 (for example core.js, ...), you need this SystemJS configuration:
System.config({
defaultJSExtensions: true,
map: {
angular2: 'node_modules/angular2/src',
rxjs: 'node_modules/rxjs'
},
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
What is important above is the map block to tell SystemJS where to find modules with names that start for example by angular2/.
In this case, no need to import Angular2 bundled JS files (angular2.min.js, ...).
I'm currently using the gulp-usemin pluign, however I'm struggling with one thing: using the images the package provides!
<!-- build:css lib/css/main.min.css -->
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.css">
<!-- endbuild -->
The font-awesome bower package also comes with the fonts:
bower_components/font-awesome/fonts/**.*
I currently compile my css with the usemin plugin:
gulp.task('usemin', function() {
return gulp.src('src/index.html')
.pipe(usemin({
css: [minifyCss(), 'concat'],
}))
.pipe(gulp.dest('dist/'));
});
Right now this scans my HTML with the above build paths, and successfully minifies it.
However the problem I have, is that now my font-awesome CSS is looking for the fonts in the wrong place, as they're no longer in the same directory.
How do I fix this?
Figured this out by finding this question: Can you remove a folder structure when copying files in gulp?
My task is now uses gulp-rename:
gulp.task('copy-bower_fonts', function() {
return gulp.src(paths.bower_fonts)
.pipe(rename({
dirname: '/fonts'
}))
.pipe(gulp.dest('dist/lib'));
});
The fonts from the packages which look for ../fonts/ now points to a correct location.