使用Angular-CLI正确配置脚本

Question

Let's say I have a project which uses these JS libraries:

• main.js which has to be loaded in all pages
• joe.js which is a npm package to be loaded in all pages
• bob.js which is an old-style 3rd party JS library with no module defined to be loaded in all pages
• max.js which is a CommonJS library to be loaded on-demand in some components

So far, I succeded in:

• including main.js in the scripts property of angular-cli.json
• the same as above for joe.js using relative paths ( ../node_modules/joe/dist/joe.js )

so they end up in the generated bundle that is loaded on every page.

I had instead a lot of problems with the other two. So far I've managed to include bob.js in the bundle by wrapping it in a self-executing function:

(function() {
    // old code of bob.js
 })();

but why? And I'm totally clueless on how to include/bundle max.js ...

Answer 1

For main, joe and bob.js you should do this:

To have the scripts available everywhere you can use the src/assets folder in your angular-cli folder structure.

And then include your scripts with:

<script src="assets/my-script.js"></script>

As an option you can get those dependencies from node_modules to src/assets with a webpack.

For most cases using CDN is better option than all this.

---

As for max.js you i would create a service to conveniently inject it:

import { Injectable } from '@angular/core';

@Injectable()
export class MaxService {

 lib: any;
 constructor(){
  this.lib = require('max.js');
 }

}