angular 2 - adding 3rd party libs

问题:

I am trying to start using angular 2 cli.
I want to use momentjs in my project so here is what I have done:
1. created project using angular cli.
2. run npm install --save moment
3. from src folder run typings init + typings install --save moment.
4. added moment to system modules:

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

5. added import * as moment from 'moment'; to my desired component.
6. running ng serve and getting:

[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)

Here is my tsconfig.json file:

{   "compilerOptions": {     "declaration": false,     "emitDecoratorMetadata": true,     "experimentalDecorators": true,     "mapRoot": "",     "module": "system",     "moduleResolution": "node",     "noEmitOnError": true,     "noImplicitAny": false,     "rootDir": ".",     "sourceMap": true,     "sourceRoot": "/",     "target": "es5"   },   "files": [     "typings/main.d.ts"   ],   "exclude": [     "typings/browser.d.ts",     "typings/browser"   ] }

What did I do wrong? I can't find in the docs a guide to add 3rd party libs.

回答1:

When including 3rd party libraries, there are two parts... the javascript code you want to execute, and the definition files to give the IDE all it's strongly-typed goodness.

Obviously, the first must be present if the app is to function. The easiest way to get that is to include the 3rd party library with a

now in your component where you want to use lodash , write this way

declare var _:any;  @Component({ }) export class YourComponent {   ngOnInit() {      console.log(_.chunk(['a', 'b', 'c', 'd'], 2));   } }

it worked for me :). I have used enormous 3rd party libraries in my angular2 project through angular-cli. Hope it will help you too

Edit:

If you dont get any npm for your third-party libraries. Make an assets folder under your src folder. Then you can add separate folders for js,css and images. Put your third-party js inside the js folder. Then you have to reference js file in your index.html like this way:

Now, when you do ng serve or ng build it will automatically update the public folder with your assets/js. Hope you understand the whole scenario :)

回答5:

If library you want to include is not in typings you have two ways to include it in an angular 2 application:

1. using npm: step a. install library using package manager

   step b. add path of the library to the map object in systemjs.config.js file.

example:

'jquery' : 'npm:jquery/dist/jquery.js', 'd3' : 'npm:d3/build/d3.js'

step c. import it in app.module.ts example:

import 'jquery'; import 'd3';

step d. declare it

example: declare var $: any;

declare var d3: any;

2. simply you can include that in script tag in index.html and declare it.

回答6:

The answer can be found in the following link: https://github.com/angular/angular-cli/issues/274#issuecomment-192490084

回答7:

I’m not currently using moment.js myself right now. So I’m not sure, but it seems to me that you are trying to use moment.js as a typescript module and maybe it is not a typescript module. I suggest another approach. Do not use moment.js as module to import but use a d.ts file instead. To accomplish this I’m use tsd: Open a cmd:

• npm install tsd -g

• Global ins