How to load external script after Angular 2 loads - javascript

I have dynamic navigation bar which fetch data from API.
The problem is the list items in the navigation bar does not toggling consistently. It works sometimes and doesn't most of the time.
There are no script error in the console window, its clean.
The script for the navigation panel toggle is from the Metronic template itself in the file called layout.js
I am suspecting its because the layout.js loads before the angular renders in DOM sometimes. It that case the toggle doesn't work properly.
Any Suggestions please !
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="/systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="~/assets/layouts/layout/scripts/demo.min.js" defer type="text/javascript"></script>
<script src="~/assets/layouts/global/scripts/quick-sidebar.min.js" defer type="text/javascript"></script>
<script src="~/assets/layouts/global/scripts/quick-nav.min.js" defer type="text/javascript"></script>
#*<script src="~/Scripts/jquery-1.10.2.min.js"></script>*#
<script src="~/assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="~/assets/layouts/layout/scripts/layout.js" defer></script>
<!-- END THEME LAYOUT SCRIPTS -->

Try this:
Import the AfterViewInit from #angular/Core and implement it's function.
Make sure your layout.js is referenced in the scripts for your app in the angular-cli.json.
In your component.ts import your layout.js like this:
import {layout} from 'file/location/layout.js';
Edit your layout.js file to have its current code wrapped with this:
var extJs = (function() {
return{
getExtJs: function() {
//js code goes here
}
}
Back in your component declare a variable that refers to the one in layout.js:
declare var extJs: any;
Then call the layout.js function when the view has finished loading:
ngAfterViewInit(): void {
extJs.getExtJs();
}

Related

Why i cant import modules in JS

why i cant import my class when i am using the app.js in my html file?
In the console is always Cannot use import statement outside a module
Html snippet
<!-- Scripts -->
<!-- Bootstrap -->
<script src="assets/plugins/bs/bs.js"></script>
<!-- APP -->
<script src="assets/js/SmashTheHamster.js"></script>
<script src="assets/js/Elements.js"></script>
<script src="assets/js/Session.js"></script>
<script src="assets/js/app.js"></script>
code in app.js (there is this error Cannot use import statement outside a module) and yes i exported my modules with export defaut MODULE
import elements from "./Elements";
import SmashTheHamster from "./SmashTheHamster";
thx for help
You have to specify the type of the script tag using type="module"

Importing bootstrap js file

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).

How to import or use external JS files and functions in my angular web application

I want to integration external code (html, js and css files) into my angular web application.
in this external code, the HTML files is just like this:
index.html
<html>
<header>
</header>
<body>
</body>
<script src="app/components/landing-page/js/bootstrap.min.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>
<html>
as you see, there are several javascript files, and a funciton initComparisons() will be called.
If I only double click index.html, everything works fine. But I copy this html code in one component.html, that was not working. I can not see any animation.
I have googled some solutions,
and I have change my angular.json file just like this:
"scripts": [
"src/app/components/landing-page/js/imageComparisonSlider.js",
"src/app/components/landing-page/js/owl.carousel.min.js",
"src/app/components/landing-page/js/cbpAnimatedHeader.js",
"src/app/components/landing-page/js/theme-scripts.js"
]
and also import all js files in index.html in my angular web application
<script src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
and in the component.ts, I also do this:
import initComparisons from './js/imageComparisonSlider.js';
ngOnInit() {
this.isLoggedIn = this.authService.isLoggedIn;
initComparisons();
}
I added some code in stackblitz;
https://stackblitz.com/edit/angular-qowfwy?file=angular.json
but it was not working.
can somebody help me and give me some suggestion.
Best Regards,
Leo
If you want to use external js in your angular project you have to import in your angular.json in the "scripts": [] area that will be allow you to bring the js and make the build after without problem.
After putting the external scripts in angular.json (paths correct and everything), in component you should
declare const initComparisons;
// ...
ngOnInit() {
initComparisons();
}

Using Ember.js for Single Page Website (not really a web app)

I just want to try using Ember.js for a website I am doing (Disclaimer: I am a Java web developer, GWT).
So far what I have tried is to slap the whole body tag code into like this
<body>
<script type="text/x-handlebars">
<!-- The whole page -->
</script>
</body>
Now, I just want to take advantage of Ember.js stuff like components, models and validation for my website.
Here's a run down of the dependencies involved:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js" type="text/javascript"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Ember -->
<script src="js/libs/handlebars-v3.0.0.js"></script>
<script src="js/libs/ember-template-compiler-1.10.0.js"></script>
<script src="js/libs/ember-1.10.0.debug.js"></script>
<script src="js/app.js"></script>
app.js
App = Ember.Application.create();
App.Router.map(function() {
});
The thing is, when I put the body into a x-handlebars script the jQuery plugins (like bxslider, carousel, etc.) that used to work would not work with the stuff that was inside the script tag.
What could be wrong with my approach?
What is rendered in your <script type="text/x-handlebars">Script</script> is being rendered after your JQuery code has run. You can fix this by modifying using the didInsertElement event in your view or component to run any code that is needed to initialize the elements in the view that was rendered.
didInsertElement: function() {
this.$().DoStuff();
}
There are a number of other questions on StackOverflow - including, for instance, this one - addressing similar issues, so you should be able to adapt their approaches.

How to import a js file into view in mvc

I have below view with scripts at the end:
View:
(...)
// here my html items etc...
(...)
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
// here all my stuff
function sample1()
{
}
function sample2()
{
}
function sample3()
{
}
</script>
so what I want is to put all the code within into a js file and place it under /Scripts folder in mvc 4 so how to do this? In this script I refer to items in the view.
so after this change I have:
View:
(...)
// here my html items etc...
(...)
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.10.2.min.js)"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/Customs/MyCustomJsFile.js")">
</script>
Javascript file (under /Scripts folder):
MyCustomJsFile.js:
function sample1()
{
}
function sample2()
{
}
function sample3()
{
}
in runtime I am getting an error saying synatx error in MyCustomJsFile.js in the ie debug console so I click the error and first line is shown as error:
but my js file has not any script line....
The only thing that should be in your MyCustomScript.js file is the code you had between the <script> tags, not the tags themselves nor the <script> tag to include jQuery. jQuery should be included in your view on in your Layout and it should be included before your file.
For example, your view:
<script type="text/javascript" src='#Url.Content("~/Scripts/jquery-1.10.2.min.js")'></script>
<script type="text/javascript" src='#Url.Content("~/Scripts/Tests/MyCustomScript.js")'></script>
Your MyCustomScript.js file:
// here all my stuff
jQuery should really be included on your Layout since you will likely be using it on most, if not all, of your Views.

Categories