Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

How do I use a global function from a custom framework in an Angular component?

I have a custom framework that is loading fine with my Angular app. I can access its global functions via the Console when the app is running, but I cannot figure out how to access them from within a component's TS file. I get an error that foo is not found, for example. How can I use this function in an Angular component as I would outside Angular?

To call the example function from the custom framework, I use this: `foo.url.smoothScroll('#custom-id');

Example Global Function from Custom Framework

;(function (foo, $, undefined) {
  foo.url = {
    smoothScroll: function (hash, speed) {
      var $target = $(hash);
      speed = speed || 500;
      var $viewport = $('html, body');

      $viewport.one('scroll mousedown DOMMouseScroll mousewheel keyup touchstart', function (e) {
          if (e.which > 0 || e.type === 'mousedown' || e.type === 'mousewheel' || e.type === 'touchstart') {
            $viewport.stop();
          }
      }); 

      setTimeout(function () {
        $viewport.animate({
          scrollTop: $target.offset().top
        }, speed);
      }, 0);
    }
  }
}(window.foo = window.foo || {}, jQuery));

4 Answers

It looks like I can access this by adding the following to the top of my component's TS file:

declare var foo: any;
Adam Beer
Adam Beer
11,314 Points

I am not prefer Angular but I guess this is not a nice solution. I'm thinking about that Angular and jQuery are not beautiful together. BTW I found this, hope this help!

Thanks, Adam. I already have jQuery declared, so this suggestion does not help.

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,704 Points

Is this just an issue of TypeScript complaining that this variable doesn't exist, when you know that it will in fact exist at run time when the other library is loaded on the page? This might be the strategy you're looking for: https://stackoverflow.com/questions/34985552/typescript-import-vs-declare-var-with-type-definitions

I am not sure how this will help. The custom framework I am using cannot be installed via npm and is hosted elsewhere, so there is no possibility of tweaking it to work with the app. There should be a way to use a framework that is not npm-installable with Angular that does not require a rewrite of the existing framework or a new framework entirely.

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,704 Points

Is this custom framework going to be loaded into the browser? What exactly is the error you're getting, is it a compiler error from TypeScript or a runtime error?

The custom framework is loaded into the browser; this is why the command foo.url.smoothScroll('#custom-id') works when I type it in the console. Think of it as a custom Bootstrap framework with a CSS and JS file that is loaded.

I am getting this error:

ERROR in src/app/app.component.ts(19,5): error TS2304: Cannot find name 'foo'.