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, ...).
Related
I am learning Rails 7 with the new default Importmap jsmp syntax. I have tried to follow what few tutorials are out there, but am still unable to get either jQuery or Stimulus to respond to a simple alert function on page load.
I started over with a bare-bones Rails 7 application, ran bundle install, followed by rails turbo:install, rails stimulus:install and created a Static controller to route to a Landing page at Static#Landing.
My `landing.html.erb' file contains:
<h2>Landing</h2>
<p>
<script>
document.write("Vanilla JS is working...");
</script>
</p>
I get the expected string output, so I know Javascript is enabled in the Browser.
My importmap.rb file contains:
# Pin npm packages by running ./bin/importmap
pin "application", preload: true
pin "#hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "#hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "#hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin "jquery", to: "library/jquery.js" #"https://ga.jspm.io/npm:jquery#3.6.0/dist/jquery.js"
pin "jquery-ui-dist", to: "library/jquery.js" #"https://ga.jspm.io/npm:jquery-ui-dist#1.13.1/jquery-ui.js"
pin "jqtree", to: "https://ga.jspm.io/npm:jqtree#1.6.2/lib/tree.jquery.js"
pin_all_from "app/javascript/controllers", under: "controllers"
The only lines I added were the 3 invoking a form of jQuery.
I next added the 3 import statements for jQuery, jQuery-ui-dist, and jqtree to the application.js file. The complete file contains:
// Javascript document
// Document Name: application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "#hotwired/turbo-rails"
import "jQuery"
import "jquery-ui-dist"
import "jqtree"
import "controllers"
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
// NOTE: make jquery global
window.$ = window.jQuery = jQuery;
$(function(){
window.alert("It looks like jQuery is too.");
});
export { application }
I next edited my app/assets/config/manifest.js file to include the following:
//= link_tree ../images
//= link_tree ../icons
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../javascript/library .js
//= link_tree ../../../vendor/javascript .js
However, even though inline <script>s work as outlined above, I get no response from either jQuery or Stimulus to the alert function in application.js. When I check my source code, I see the following:
<!DOCTYPE html>
<html>
<head>
<title>Testingjquery</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="LkQZA1mB-KU38K8S1lg_BMJWPx4HLonSyQ0s8W2vCotmw3aHIXZNDnPcJCtbgeXSTWrEuWJBZWlkOZcLe7Ru9w" />
<link rel="stylesheet" href="/assets/application-e0cf9d8fcb18bf7f909d8d91a5e78499f82ac29523d475bf3a9ab265d5e2b451.css" data-turbo-track="reload" />
<script type="importmap" data-turbo-track="reload">{
"imports": {
"application": "/assets/application-79a33b4392f09ada2a09f9c0b7de4d6479378090d98fa671caaef897dcec0de9.js",
"#hotwired/turbo-rails": "/assets/turbo.min-e5023178542f05fc063cd1dc5865457259cc01f3fba76a28454060d33de6f429.js",
"#hotwired/stimulus": "/assets/stimulus.min-b8a9738499c7a8362910cd545375417370d72a9776fb4e766df7671484e2beb7.js",
"#hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
"jquery": "/assets/library/jquery-58fa327d47526faff06ea7057a0022e9c42b2ca3a9aeea413f0e18176a63cd9f.js",
"jquery-ui-dist": "/assets/library/jquery-58fa327d47526faff06ea7057a0022e9c42b2ca3a9aeea413f0e18176a63cd9f.js",
"jqtree": "https://ga.jspm.io/npm:jqtree#1.6.2/lib/tree.jquery.js",
"controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
"controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
"controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
}
}</script>
<link rel="modulepreload" href="/assets/application-79a33b4392f09ada2a09f9c0b7de4d6479378090d98fa671caaef897dcec0de9.js">
<link rel="modulepreload" href="/assets/turbo.min-e5023178542f05fc063cd1dc5865457259cc01f3fba76a28454060d33de6f429.js">
<link rel="modulepreload" href="/assets/stimulus.min-b8a9738499c7a8362910cd545375417370d72a9776fb4e766df7671484e2beb7.js">
<link rel="modulepreload" href="/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js">
<script src="/assets/es-module-shims.min-d89e73202ec09dede55fb74115af9c5f9f2bb965433de1c2446e1faa6dac2470.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>
</head>
<body>
<h2>Landing</h2>
<p>
<script>
document.write("Vanilla JS is working...");
</script>
</p>
</body>
</html>
As you can see, jQuery is not being loaded at all and Stimulus is being loaded, but is unresponsive to any code references. I am new to Stimulus, intermediate with Javascript/jQuery and new to Rails 7. From what I have read, I like the conceptualization behind these radical shifts in Rails methodology, but so far, haven't been able to get it to work.
The files are all in their appropriate places according to the references to them. For illustration, this is my file tree:
-app
-assets
-config
-manifest.js
-javascript
-controllers
-application.js
...
-library
-jquery.js
-jquery-ui.js
-application.js
...
-config
-importmap.js
...
The final application.js file contains no code that I changed and is as follows:
import { Application } from "#hotwired/stimulus"
const application = Application.start()
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
// NOTE: make jquery global
window.$ = window.jQuery = jQuery;
export { application }
Granted, there are two application.js files that Importmaps/Stimulus/Turbo seem to rely upon, and perhaps I inserted some code into the wrong application.js file. If so, it was because the tutorials that I was following didn't specify or clarify which file to insert certain code into.
Does anyone see a fundamental error in my code or can suggest another approach? Thanks in advance.
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'm new to Laravel and whole framework stuff.
I do (may) understand a part of how the page rendered via laravel, but even after extensive search, I do not understand how laravel mix works.
Suppose that there is a page requires a global js and css library (lets specify jQuery and bootstrap)
Also the page requires custom js file like someJsTools.js.
Elementary speaking, in the past, those files referenced via <script src="blah"></script> and <link rel="blah" /> inside head tag and I used to it. In this env, all I have to do is specify those tags page by page.
// pageA requires jQuery.js, bootstrap.css and one CUSTOM JS file imatrouble.js
<head>
<link rel="stylesheet" herf="bootstrap.css"/>
<script src="jquery.js"></script>
<script src="imatrouble.js"></script>
</head>
//pageB requires jQuery.js, bootstrap.css and two custom js files.
<head>
<link rel="stylesheet" herf="bootstrap.css"/>
<script src="jquery.js"></script>
<script src="imatrouble.js"></script>
<script src="withimatroubleimadisasterlikewhateveryoucanimagine.js"></script>
</head>
PageA and PageB both requires common jQuery.js and bootstrap.css file. From what I learn, laravel Mix combine all js files into one and I don't get it here.
Problem 1 - One file do everything?
If it is true that "mix" things all together as one file, then how this one file could handle all of this different requirements seperatelly? I believe that my knowledge is wrong and its from my incorrect understanding of laravel mix and perhaps webpack mechanism.
Problem 2 - How can I manage all different page and every different situation?
Whether the problem above is originated from my missunderstanding or not, I cannot figure out what part of I (will) do could cause differences between pages. If mix only works for common global library, then all I have to do is just load custom js/css files manually. I currently assume that it is highly unlikely.
Please, someone help me to escape this chaos.
Have a good day.
It is purely based on your requirements. It depends on how you are customising your assets file.
For example :
Jquery, Angular,Bootstrap,Font Awesome is common for all your pages. So what I usually do is. I combine all css files to one file and all js files to one. Like below..
CSS mix
elixir(function(mix) {
mix.styles([
"libraries/bootstrap.css",
"libraries/font-awesome.min.css",
"custom/default.css",
], 'public/assets/css/common.css');
});
JS mix
elixir(function(mix) {
mix.scripts([
"libraries/jquery-1.10.2.js",
"libraries/bootstap.js"
"libraries/angular.js",
"libraries/angular-animate.js",
"custom/defaut.js"
], 'public/assets/js/common.js');
});
Suppose some pages need specific dependency[product, orders...etc]. For instance if product page needs wow.js, product.js and wow.css,product.css
CSS mix
elixir(function(mix) {
mix.styles([
"libraries/wow.css",
"custom/product.css",
], 'public/assets/css/product.css');
});
JS mix
elixir(function(mix) {
mix.scripts([
"libraries/wow.js",
"custom/product.js"
], 'public/assets/js/product.js');
});
So final laravel mix file looks like below
gulpfile.js
var elixir = require('laravel-elixir');
elixir.config.sourcemaps = true;
/**
* Global CSS MIX
*/
elixir(function(mix) {
mix.styles([
"libraries/bootstrap.css",
"libraries/font-awesome.min.css",
"custom/default.css",
], 'public/assets/css/common.css');
});
/**
* Global JS MIX
*/
elixir(function(mix) {
mix.scripts([
"libraries/jquery-1.10.2.js",
"libraries/bootstap.js"
"libraries/angular.js",
"libraries/angular-animate.js",
"custom/defaut.js"
], 'public/assets/js/common.js');
});
/**
* Product CSS MIX
*/
elixir(function(mix) {
mix.styles([
"libraries/wow.css",
"custom/product.css",
], 'public/assets/css/product.css');
});
/**
* Product JS MIX
*/
elixir(function(mix) {
mix.scripts([
"libraries/wow.js",
"custom/product.js"
], 'public/assets/js/product.js');
});
Now all your assets files are ready. Now you need to include wherever you want.
Suppose on your homepage you only requires common.js and common.css files.
homepage.blade.php
<head>
<link rel="stylesheet" href="{{ asset('assets/css/common.css') }}"/>
<script type="text/javascript" src="{{ asset('assets/css/common.js') }}"></script>
</head>
On the product page, you require both common and product assets file dependency. Include like below
product.blade.php
<head>
<link rel="stylesheet" href="{{ asset('assets/css/common.css') }}"/>
<link rel="stylesheet" href="{{ asset('assets/css/product.css') }}"/>
<script type="text/javascript" src="{{ asset('assets/js/common.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/product.js') }}"></script>
</head>
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">