Adding 3rd party libs #274

vlio20 · 2016-03-04T13:19:31Z

Hi,
I am trying to add moment (3rd party lib) to my project and could not find any mentioning on how to add 3rd party libs to the project which is generated via the cli.
I have asked the following question on SO:
http://stackoverflow.com/questions/35796961/angular-2-3rd-party-libs

Help will be much appreciated.

jkuri · 2016-03-04T13:27:24Z

Hi. We do currently not have a command for adding 3rd party lib, but it is coming soon.
At this moment please do the following:

npm install moment
copy moment.js from node_modules/moment to src/assets/js/moment.js
include assets/js/moment.js in your index.html
install the typings and import lib to your .ts file where you need it, please follow this
run ng serve and enjoy using moment :)

vlio20 · 2016-03-04T13:37:02Z

@jkuri , should I install typings from the src folder or from the root directory? should I also change the tsconfig.json file?

jkuri · 2016-03-04T13:43:52Z

Install typings from the root dir and you don't need to change any configuration. If any problem persist just say so.

jkuri · 2016-03-04T15:30:11Z

@vlio20 did you managed to solve this?

Brocco · 2016-03-04T15:42:12Z

FYI, looks like this question was also cross-posted to stack overflow

jkuri · 2016-03-04T15:58:56Z

No answer on the stack overflow does seem to be correct. I think we can close this issue Mike.

vlio20 · 2016-03-04T16:37:02Z

For some reason I can't make typescript stop throwing errors regarding the moment module.
Here is my scaffolding:
http://prntscr.com/ab5fkm
I have added:
<script src="assets/js/moment.js"></script>
to assets/js

And as you can see in the scaffolding there is a typings lib for moment.
Still getting this:

[DiffingTSCompiler]: Typescript found the following errors:
  app/angular-day-picker.ts (2, 25): Cannot find module 'moment'.
Error: [DiffingTSCompiler]: Typescript found the following errors:
  app/angular-day-picker.ts (2, 25): Cannot find module 'moment'.
    at DiffingTSCompiler.doFullBuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:202:29)
    at DiffingTSCompiler.rebuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:101:18)
    at DiffingPluginWrapper.rebuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/diffing-broccoli-plugin.js:87:45)
    at /Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/broccoli/lib/api_compat.js:42:21
    at lib$rsvp$$internal$$tryCatch (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
    at doNTCallback0 (node.js:430:9)
    at process._tickCallback (node.js:359:13)

@jkuri , as you can see I was not able to solve it. Any suggestions?

jkuri · 2016-03-04T16:40:08Z

Yes, you didn't installed typings correctly. You need to install both moment and github:DefinitelyTyped/DefinitelyTyped/moment/moment-node.d.ts#b090bcf9ba9f756ec8ff53e7707269729172a325 typings.

vlio20 · 2016-03-04T16:46:07Z

isn't it only typings install moment?

jkuri · 2016-03-04T16:47:44Z

Please follow the steps I provided and you will notice a link to yesterdays issue.

vlio20 · 2016-03-04T17:24:47Z

@jkuri, I have followed the instructions on the link you have provided and here is my typings.json:

{
  "ambientDependencies": {
    "moment": "github:DefinitelyTyped/DefinitelyTyped/moment/moment.d.ts#b090bcf9ba9f756ec8ff53e7707269729172a325",
    "moment-node": "github:DefinitelyTyped/DefinitelyTyped/moment/moment-node.d.ts#b090bcf9ba9f756ec8ff53e7707269729172a325"
  }
}

still the same error:

[DiffingTSCompiler]: Typescript found the following errors:
  app/angular-day-picker.ts (2, 25): Cannot find module 'moment'.
Error: [DiffingTSCompiler]: Typescript found the following errors:
  app/angular-day-picker.ts (2, 25): Cannot find module 'moment'.
    at DiffingTSCompiler.doFullBuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:202:29)
    at DiffingTSCompiler.rebuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:101:18)
    at DiffingPluginWrapper.rebuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/diffing-broccoli-plugin.js:87:45)
    at /Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/broccoli/lib/api_compat.js:42:21
    at lib$rsvp$$internal$$tryCatch (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
    at doNTCallback0 (node.js:430:9)
    at process._tickCallback (node.js:359:13)

I have restarted the server.

jkuri · 2016-03-04T17:29:36Z

Check if moment.js in index.html is included okay, you should see an error in developer console if not. Otherwise please wait till next week and you will get this done with ng install moment. Thanks.

vlio20 · 2016-03-04T17:33:14Z

its included like so:
<script src="assets/js/moment.js"></script>
if you like I have created this repo with this issue:
https://github.com/vlio20/angular2-cli-issue

jkuri · 2016-03-04T17:34:08Z

Okay, let me check it...

jkuri · 2016-03-04T17:47:25Z

Looks like you created this app a while ago. Install the new angular-cli with npm install angular-cli -g then create new app, new component and copy-paste the code you have written so far. This will be the fastest solution. But you will need to follow the steps (again). This is not working because we didn't have typings implemented in the default init not so far ago.

jkuri · 2016-03-04T17:50:27Z

The other solution would be to install the new angular-cli from npm and then in the project root dir run ng init, that will rewrite you files. Also, I don't see a reason why you deleted the config dir.

vlio20 · 2016-03-04T17:54:21Z

I will try and update this thread

vlio20 · 2016-03-04T22:04:56Z

yep, it is working thanks @jkuri.
Two questions:

what is the thirdparty directory?
is there any what to use css pre processors (Sass/ Less) without adding it manually?

jkuri · 2016-03-04T22:07:38Z

Great! Not yet, next week.

On Friday, 4 March 2016, Vlad Ioffe [email protected] wrote:

yep, it is working thanks @jkuri https://github.com/jkuri.
Two questions:

what is the thirdparty directory?

is there any what to use css pre processors (Sass/ Less) without adding
it manually?

—
Reply to this email directly or view it on GitHub
#274 (comment)
.

kovax · 2016-03-08T10:22:41Z

Hi Jan,

I have added the moment.js to the systems config like this:

    System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        }
      },
      map: {
        moment: 'assets/js/moment.js'
      }
    });

Which is the preferred approach?

jkuri · 2016-03-08T10:57:06Z

Hi @kovax you added it correctly. You can also include it via script tag in html, but I also use same approach as you.

imtiaz-emu · 2016-05-30T11:21:40Z

@jkuri, I want to add jquery-ui with angular-cli. I typed npm install jquery jquery-ui on my terminal and thus it adds a jquery folder in my node-modules. How can I add the js files with jquery-ui css files?

felipelopes6 · 2016-06-07T17:57:54Z

Hi. And if I want add manually script? how I need do? @jkuri

filipesilva · 2016-06-07T18:03:09Z

Heya @imtiaz-emu @felipel90 , you can find updated instructions in #1015

angular-automatic-lock-bot · 2019-09-05T22:40:48Z

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

vlio20 closed this as completed Mar 4, 2016

filipesilva mentioned this issue Mar 10, 2016

error with DI in unit tests #278

Closed

getglad mentioned this issue Mar 19, 2016

Compatibility with Angular2 CLI auth0/angular2-jwt#50

Closed

guillaumeleone mentioned this issue Mar 20, 2016

How to import a typescript module #327

Closed

jdell64 mentioned this issue Jun 3, 2016

Including a 3rd party lib #999

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding 3rd party libs #274

Adding 3rd party libs #274

vlio20 commented Mar 4, 2016

jkuri commented Mar 4, 2016

vlio20 commented Mar 4, 2016

jkuri commented Mar 4, 2016

jkuri commented Mar 4, 2016

Brocco commented Mar 4, 2016

jkuri commented Mar 4, 2016

vlio20 commented Mar 4, 2016

jkuri commented Mar 4, 2016

vlio20 commented Mar 4, 2016

jkuri commented Mar 4, 2016

vlio20 commented Mar 4, 2016

jkuri commented Mar 4, 2016

vlio20 commented Mar 4, 2016

jkuri commented Mar 4, 2016

jkuri commented Mar 4, 2016

jkuri commented Mar 4, 2016

vlio20 commented Mar 4, 2016

vlio20 commented Mar 4, 2016

jkuri commented Mar 4, 2016

kovax commented Mar 8, 2016

jkuri commented Mar 8, 2016

imtiaz-emu commented May 30, 2016

felipelopes6 commented Jun 7, 2016 •

edited

Loading

filipesilva commented Jun 7, 2016

angular-automatic-lock-bot bot commented Sep 5, 2019

Adding 3rd party libs #274

Adding 3rd party libs #274

Comments

vlio20 commented Mar 4, 2016

jkuri commented Mar 4, 2016

vlio20 commented Mar 4, 2016

jkuri commented Mar 4, 2016

jkuri commented Mar 4, 2016

Brocco commented Mar 4, 2016

jkuri commented Mar 4, 2016

vlio20 commented Mar 4, 2016

jkuri commented Mar 4, 2016

vlio20 commented Mar 4, 2016

jkuri commented Mar 4, 2016

vlio20 commented Mar 4, 2016

jkuri commented Mar 4, 2016

vlio20 commented Mar 4, 2016

jkuri commented Mar 4, 2016

jkuri commented Mar 4, 2016

jkuri commented Mar 4, 2016

vlio20 commented Mar 4, 2016

vlio20 commented Mar 4, 2016

jkuri commented Mar 4, 2016

kovax commented Mar 8, 2016

jkuri commented Mar 8, 2016

imtiaz-emu commented May 30, 2016

felipelopes6 commented Jun 7, 2016 • edited Loading

filipesilva commented Jun 7, 2016

angular-automatic-lock-bot bot commented Sep 5, 2019

felipelopes6 commented Jun 7, 2016 •

edited

Loading