Running/Loading angular applications with Jquery on existing pages

Ok, this article is not about using jquery inside angular2 application. This is an article about (if by some reason), you have a need to inject your angular application inside a fragment or a section of a page. Meaning it’s just a part of a more global application (don’t ask why).


  var serverUri = 'https://somerherewherethescriptsarehostedCDN/';
  //it will usually be just these but you never know
  myCss = [

  myScripts = [

  myAppRootComponent = '<app-root></app-root>';

  $(document).ready(function () {

    $.each(myCss, function (key, item) {
      // add the compiled css (this is with ng build --prod).
      $('head').append('<link rel="stylesheet" href="' + serverUri + item + '" type="text/css" />');
	//add the approot tag to point where the application should bind
	//load scripts by specific order
    var d1 = loadScripts(myScripts,serverUri).done(function () {
      //do something else
	function loadScripts(scripts, uri) {
      var deferred = jQuery.Deferred();

      function loadScript(i) {
        if (i < scripts.length) {
            url: uri + scripts[i],
            dataType: "script",
            cache: true,
            success: function () {
              loadScript(i + 1);
        } else {
      return deferred;


What you may be forgetting:

1.Don’t forget to include the base href in header and also jquery

    <base href="/">
    <script src=""></script>

Leave a Reply

Your email address will not be published. Required fields are marked *