Using external javascript in .net core angular application

Question

I am trying to use an external js library in my .net core angular app. I just don't know whats the standard way to reference a js file in an angular component. Where to place its reference and all that. I don't want any floating declarations. Any help.

I see some solutions referring to angular cli file. But there is no such file in solution. Is there a way to generate the file?

In newer versions of angular, I believe it's called `angular.json` — user184994, Jun 16 '18 at 22:17
It also depends how you created your application. Did you use angular cli or did you create a new .NET Core Web Application using Visual Studio templates? — ssougnez, Jun 16 '18 at 22:18
I created the project with VS templates..and I cant see angular.json either.. — Jajan, Jun 16 '18 at 22:36
And how did you configure angular? I would advice you to create your ASP.NET Core project with Visual Studio selecting "Empty" or "Web API", then use angular-cli to create your angular app inside, except if you're referring to angularjs? Please give us more information, otherwise we won't be able to help you. — ssougnez, Jun 16 '18 at 22:40
I used the basic angular template which scaffolds the first 5 component and views.. — Jajan, Jun 16 '18 at 23:02

score 0 · Answer 1 · answered Jun 16 '18 at 23:17

The best way would be to install your external library using npm/yarn and importing it in the TypeScript file where you need it. For example, if you want to use "lodash":

yarn add lodash -S

Then in a file where you need the library:

import * as lodash from "lodash"

However, if you can't import the library in any of your file (maybe because you're just using a plugin of jQuery or something), then you have to define a "scripts" property in your angular.json/angular-cli.json file as explained in here.

score 0 · Answer 2 · answered Jun 17 '18 at 00:00

Hopefully, the following helps. Instead of using the global variable directly in any service or component, I found it easier to maintain the third party dependency if we could hook into angular bootstrapping. Ex.

@NgModule({
  providers: [{
    provide: APP_INITIALIZER,
    useFactory: ThirdPartyFactory,
    deps: [ThirdPartyService],
    multi: true
  }]
})
export class AppCommonModule {}

export function ThirdPartyFactory(service: ThirdPartyService) {
  return () => service.init();
}

Since the factory uses a promise, you can code a function inside the ThirdPartyService that wraps the third party global variable.

This solution takes a bit of time to implement. But the good side is that it's more manageable and portable to another module or application. The reason I mentioned APP_INITIALIZER is that you can do all the above before the app starts. Otherwise, the service ThirdPartyService itself will do the trick.

score 0 · Answer 3 · answered Jun 17 '18 at 01:55

If you're using Webpack, you can define externals:

module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  }
};

Then, you can import the external when needed:

import $ from 'jquery';

$('.my-element').animate(/* ... */);

Whatever external library you're using, you need to find out what the global exported symbols is (for example, for jQuery, its just 'jQuery'.

Using external javascript in .net core angular application

3 Answers3