Reputation: 1059
When I import external js into angular 4 one component, In every component it will load. How can I import that js file into only one component and how load it when only function call.
//custom component
import * as extjs from '../assets/extjs.js';
constructor(){
this.myfunction();
}
myfunction(){
extjs.extfunc();
}
Upvotes: 0
Views: 259
Reputation: 7004
The reason is when you import your module, it will be injected directly into the app.js
file of angular. So, all module can use it.
For instance, when you do this to another component:
declare var extjs: any;
console.log(extjs);
Your extjs
return exts api.
So I recommand you to use dynamic import, so your extjs will be ejected only when the component need to use it.
How to do it?
In the file tsconfig.app.json
into your folder src
, change the following line:
"module": "es2015"
With this line:
"module": "esnext"
It will allow you to make lazy loading script.
So in your component, just do this:
constructor(){
this.myfunction();
}
async myfunction(){
const extjs = await import('../assets/extjs.js');
extjs.extfunc();
}
Check your network tab into your dev tool, load this component or inject it into another component and you will see the chunk of extjs is generated.
Hope it helps you.
Upvotes: 1
Reputation: 185489
You would need something like a dynamic import
, so the import can be moved to the function and only executed when necessary. Currently, this is not really well supported, if at all.
Upvotes: 0