Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
chazel
Courses Plus Student 6,961 PointsHow 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
chazel
Courses Plus Student 6,961 PointsIt 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
11,314 PointsI 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!
chazel
Courses Plus Student 6,961 PointsThanks, Adam. I already have jQuery declared, so this suggestion does not help.
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 PointsIs 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
chazel
Courses Plus Student 6,961 PointsI 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
Front End Web Development Techdegree Graduate 84,735 PointsIs 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?
chazel
Courses Plus Student 6,961 PointsThe 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'.