Angular-cli: How can I bundle third party js to dist dir?

[davyzhang]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Mac OSX
2. Versions. Please run ng --version. If there's nothing outputted, please
   run in a Terminal:
   node --version
   And paste the result here.
   angular-cli: 1.0.0-beta.5
   node: 6.2.0
   os: darwin x64
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   ng build --prod
4. The log given by the failure. Normally this include a stack trace and some
   more information.
5. Mention any other details that might be useful.

How can I bundle third party js installed by npm to dist directory ?

---

Thanks! We'll be in touch soon.

[davyzhang]

Thank you so much, I believe this worth a wiki page :p

On Thu, May 26, 2016 at 5:09 PM, Robert Ross [email protected]
wrote:

for example using showdown.min.js

npm install showdown

then in angular-cli-build.js, add

module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
...
'showdown/dist/*.+(js|js.map)'
]
});
};

then in system-config.js, add

const map: any = {
'showdown': 'vendor/showdown/dist'
};

const packages: any = {
'showdown':{
format: 'global',
defaultExtension: 'js',
main: 'showdown.min.js'
},
...
}

then in main.ts, add

import 'showdown';

it should work in develop mode

however there's a known issue: it won't work using ng build -prod
in this way no error returned, app stuck at loading

or you can change 'showdown/dist/*.+(js|js.map)' to
'showdown/dist/showdown.min.js' but angular-cli will return unable to
find .js.map file error

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
https://github.com/angular/angular-cli/issues/925#issuecomment-221818044

[thunderrun]

Actually i built a CDN for myself and end up with adding <script src="https://cdn....min.js"></script> at the bottom of index.html.
It seems this is the only solution currently. Hope Angular-CLI can fix it soon.

[davyzhang]

Yep, that's exactly what I am going to do.

[neilhem]

Install with npm & add path to your package in angular-cli-build.js, ommit node_modules in path

vendorNpmFiles: [
    ....
    'moment/moment.js',
]

[filipesilva]

You can find a step-by-step tutorial of how to add 3rd party libraries here: https://github.com/angular/angular-cli/wiki/3rd-party-libs

When doing production builds via ng build -prod, used vendor libraries will automatically be bundled and minified.

[GiuseppePiscopo]

As of today tutorial turned into a story at https://github.com/angular/angular-cli/wiki/stories-third-party-lib

[kavithamadhavaraj]

Angular CLI: 6.0.8 Node: 10.4.0 OS: linux x64 Angular: 6.0.4

For me, just including the 3rd party scripts in the index.html (usual way using script tag ) worked.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}