Generic Scenario
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>.
This will throw Uncaught TypeError: $(...).popover is not a function.
My Scenario
I have application which consumes other application and it is consumed bye somother application.
i.e) A = "my_app"
A consumes B(angular app) by adding the script file of app B in app A
A is consumed by C by making api call
- I have jquery and bootstrap in app A. The app C can make request with jquery and bootstrap as optional.
- app A consumes app B where app B is having another jquery which is not optional. The app B works well when I add the scripts in HTML.
- But when I lazyload app B script dynamically cause Uncaught TypeError: $(...).popover is not a function. Because the app B jquery Loaded after Bootstrap.
Solutions Tried:
- Used jquery.noConflict in app A. Works well when app B added using Lazy load also.
- The problem arises when app C consumes app A. it throws $ is not a function in thier app
Problem facing: I cant ask the app B and app C team to change code. How can i handle this?