Application Background: My application is built up using ASP.net MVC(.net framework 4.6) and several Angular 4 mini SPAs
Shared view _Layout.cshtml have one mini SPA to show shopping basket contents and it is referenced using:
<script src="~/apps/shopping/inline.2785c74270c160e8df55.bundle.js"></script>
<script src="~/apps/shopping/polyfills.35726d60cdf25fecc5f1.bundle.js"></script>
<script src="~/apps/shopping/vendor.4918fe9ed7ea45b90ec8.bundle.js"></script>
<script src="~/apps/shopping/main.4d6729c54eca7c31dbba.bundle.js"></script>
Another view Order.cshtml have another SPA and it is referenced using:
#section scripts{
<script src="~/apps/userorder/inline.2a63d25fd80947ce8bb4.bundle.js"></script>
<script src="~/apps/userorder/polyfills.35726d60cdf25fecc5f1.bundle.js"></script>
<script src="~/apps/userorder/vendor.ec246c0701440a3e2ce3.bundle.js"></script>
<script src="~/apps/userorder/main.46be1befa8a20148f402.bundle.js"></script>}
Error
All looks good when I am at home view because on that page only 1 SPA is loaded
When I go to order view, I see below error in console window because now 2 SPAs have been loaded but still it works functionally.
I have already tried this and this
I am using Angular 4 with Angular CLI. Could anyone help me to get past this error, please?
I commented out import statement for zone in polyfill.ts and it worked like a charm.
Related
How do you get web animations working in ionic 2 for iOS? I have seen talk about the web animations polyfill, however have not found an easy to follow guide on it's implementation. Any help would be appreciated. Thanks!
Just like you can see in Angular2 docs
Angular animations are built on top of the standard Web Animations API
and run natively on browsers that support it.
For other browsers, a polyfill is required. Grab web-animations.min.js
from GitHub and add it to your page.
So copy the web-animations js code and paste it in a new file located, for instance, in assets/js (new folder).
Then add it to the index.html file, as the first script tag from the body:
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- Web Animations polyfill -->
<script src="assets/js/web-animations.js"></script>
<!-- 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>
I am making a web app for my company (internal use only) that will monitor some production machines and display various production metrics. On the page I have 2 charts in separate containers. I also have jQueryUI dialog functionality triggering on when the that contains the chart is clicked so that I can change which work center is being montired.
I can build and display the charts without issue, but, if I click anywhere on the page (inside or outside the containing div's) and have the debugger open (Firefox with Firebug), Highcharts will generate an exception indicating that : a is undefined. This is making it excessively hard to debug. Can anyone explain what exactly this function is monitoring and under what conditions it SHOULD fire?
This error is being generated from the highcharts.js file and appears to be coming from the following function, although this is probably a helper function and the real issue is somewhere else:
ha(a){
return Ca(a)?
a:[a]
}
I am obtaining the latest release of the HighCharts API using:
<script type="text/javascript" charset="utf8" src="http://code.highcharts.com/highcharts.js" ></script>
<script type="text/javascript" charset="utf8" src="http://code.highcharts.com/highcharts-more.js" ></script>
<script type="text/javascript" charset="utf8" src="http://code.highcharts.com/modules/exporting.js" ></script>
I am trying to put together a fiddle that shows the error, but replicating the form and functionality is proving difficult (internal application with quite a bit of AJAX that displays corporate information).
How and where to put your own JS files in JQueryMobile web applications?
Some suggestions I found:
only in the first page of the web app, usually index.html
inside the JQM page
Which one is better approach?
After your jQuery Library and BEFORE your jQuery mobile library. I place all my script tags at the end of the body...but that's not a must...
<script type="text/javascript" src="jQuerySource.js">
<script type="text/javascript">
/*Your stuff*/
</script>
<script type="text/javascript" src="jQueryMobileSource.js">
Why?: Because when you're building your jQM application you're going to want your event bindings to be defined before jQuery mobile gets initialized and fires the 'mobileinit' event and your first page's 'pageinit' event.
Just put your script after the JQM script tag
Yeah, that's all
It is a good idea to use jQueryMobile javascripts from Google CDNs because of following reasons:
1. You can directly include minified version in your pages.
2. You save bandwidth cost
3. Most importantly there are good chances that the JS might already be loaded on your user browser's. Because many other web apps use them.
So you should use
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
So, if all your code is inside document.ready() ; you can use it at end [ which loads the page faster]
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery.Validate/1.7/jQuery.Validate.min.js"
type="text/javascript"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"
type="text/javascript"></script>
I am using data annotations to display the error message. In Firefox its working fine, but in IE its not displaying the error message in the client side.
from the below link JQuery 1.6 $('form').validate() not working in IE7 & IE8, I came to see that
Jquery Validate does not currently work with jQuery 1.6 in IE6, IE7,
and IE8.
I am using jquery UI autocomplete,Datepicker in my project. So if i change the jquery version from 1.6.2 to jquery 1.5.2 my validation works fine, but my autocomplete starts failing.
how to solve this? any thoughts?
jQuery.validate 1.8.1 is release for 2001 may to be resolve this problem for ie, I integrated with my MVC 3 project with client side validation and it works perfect for me.
I've built an mvc application which contains some jquery code. When I run the app from my ide, everything works perfectly. When I publish to the server and open the page, the jquery does not work. I get object expected errors.
Could this be due to my file mappings? here is a sample of my mapping in the app -
<script type="text/javascript" href="../../Scripts/jquery-1.3.2.js"></script>
I published the app to iis7 successfully, but the jquery is broken. I did publish to an application within an existing web site.
Any thoughts?
You may be experiencing problems with your relative path.
You can try this, which is a path from the application root:
<script type="text/javascript" href="/Scripts/jquery-1.3.2.js"></script>
Or this C# solution:
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>" type="text/javascript"></script>