Angular-cli: How to add external libs to webpack.2 , angular-cli 1.0.0-beta11

[pitops]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Mac OSX El Capitan

1. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:

1.0.0-beta.11-webpack.2

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

I am trying to add charts.js to angular 2 RC5. But after doing npm installs and referencing the script directly into index.html like this

it does not get picked up and gives error of not found in console. What is the way to load external scripts in newest version?

1. The log given by the failure. Normally this include a stack trace and some
   more information.
2. Mention any other details that might be useful.

---

Thanks! We'll be in touch soon.

[reflog]

you need to do a "import * as charts from 'charts'" or similar somewhere in your code for webpack to pick it up. don't add it to index.html

for styles - you'll have to 'require()' them or put them into index.html.

[rbj325]

@reflog Can you expand on the two styles options?

[reflog]

1. let style = require("library/dist/lib.css"); @Component({styles: [style], encapsulation: ViewEncapsulation.None})
2. store stylesheet in public/ folder and reference it in index.html

[LunicLynx]

The import * as charts from 'charts' does not work for me.

I'm getting the following error:

ERROR in [default] C:\Users\XXXXX\Source\Repos\XXXXXX\src\main.ts:5:23
Cannot find module 'chart'.

[reflog]

That was an example, just add your library name..

On Fri, Aug 12, 2016, 18:43 LunicLynx [email protected] wrote:

The import * as charts from 'charts' does not work for me.

I'm getting the following error:

ERROR in [default] C:\Users\XXXXX\Source\Repos\XXXXXXsrc\main.ts:5:23
Cannot find module 'chart'.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/1668#issuecomment-239481704,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGtNHqqlHv2Iux3wTW9gxyLvstCZZhcks5qfJSRgaJpZM4JjHuy
.

[LunicLynx]

I know, i tried it with that lib just to make sure it's not an issue with my lib.

[LunicLynx]

It seems that the libs need to full fill some kind of requirement too to work in that way.
It would be nice if the angular-cli team does not expect us to know the webpack-paradigm. This was done in a file previous to webpack, that file is gone now. And the only solution i found was copying the files to the public folder, which can't be the right solution.
So if you know the requirements please be a bit more thorough. :)

[pitops]

Um it does not work i can confirm, also i am talking about the angular 2 implementation of chartjs which can be found here "http://valor-software.com/ng2-charts"

which says the following

You can install ng2-charts using npm

npm install ng2-charts --save

You need to install and include Chart.js library in application via html or webpack bundler (more options can be found in official chart.js documentation)

npm install chart.js --save

Important: Embedding Chart.js in application is mandatory!

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

any insight?

[LunicLynx]

@pitops are you using typescript?

[pitops]

@LunicLynx yes!

[adamduren]

@pitops Any way it's related to the bug I reported? https://github.com/angular/angular-cli/issues/1624 Basically I am able to import the JS but the path to all the statics become relative to the root so things like images do not load.

[westonpace]

I'm getting the following error:

ERROR in [default] C:\Users\XXXXX\Source\Repos\XXXXXXsrc\main.ts:5:23
Cannot find module 'chart'.

If you upgrade to typescript@next and then run tsc by hand with --traceResolution then you can get some helpful debug output (where it is looking, what kind of error it is). This error means that either typescript cannot find you npm installed chart package or it cannot find typings for the package.

[LunicLynx]

I know that too. I Even fixed the typescript error, but then I get the same error from webpack. Which makes sense because webpack is not interested in typings. But anyway I probably missed something.
So I will wait until the documentation is updated for third party library.
Thank you for responding, appreciated!

Sent from my iPhone

On 12 Aug 2016, at 19:54, Weston Pace [email protected] wrote:

I'm getting the following error:

ERROR in [default] C:\Users\XXXXX\Source\Repos\XXXXXXsrc\main.ts:5:23
Cannot find module 'chart'.

If you upgrade to typescript@next and then run tsc by hand with --traceResolution then you can get some helpful debug output (where it is looking, what kind of error it is). This error means that either typescript cannot find you npm installed chart package or it cannot find typings for the package.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[pitops]

@adamduren um the difference with my situation is that the part where i reference the script directly from the index.html file it is not loaded, the npm install part does work and gets imported fine.

[iamyojimbo]

if using webpack, then pretty much all libraries should be able to be included with a simple const jQuery = require('jquery') and nothing more. Not even typings.

[filipesilva]

The two parts of this problem are being tracked separately:

• global css https://github.com/angular/angular-cli/pull/1633
• global js https://github.com/angular/angular-cli/issues/1717

I'd like to add that @iamyojimbo's suggestion is really good. We're doing some testing and it might be what we recommend in the README.

[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._}