Search code examples
angularjsnpmangularsystemjs

importing 3rd party libraries in systemjs and angular2


I am pretty new to the typescript world and I am trying to get a 3rd party library working in my angular2 app. I am trying to use https://www.npmjs.com/package/marked in my app to parse markdown but it cant seem to find the module.

This guys seems to use it fine here in his angular 2 service https://github.com/AntJanus/angular2-markdown-app/blob/master/src/app/services/markdown.service.ts

But in mine my variable "md" is undefined. https://github.com/bautistaaa/angular2-contentful/blob/master/app/markdown-converter/markdown-converter.component.ts#L18

I read somewhere that the following is just referring to the d.ts file?

import * as marked from 'marked';

I noticed I can still use the intefaces in the d.ts files without this import as well so I am confused as to what that import does. I'm not sure if maybe its something I need to add to my systemjs config or what? Again I am completely clueless at the moment so any help would be GREAT!

heres my package.json as well

{
  "name": "portfolio",
  "version": "1.0.0",
  "scripts": {
    "start": "gulp serve",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.14",
    "contentful": "^3.3.5",
    "es6-shim": "^0.35.0",
    "marked": "^0.3.5",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "showdown": "^1.3.0",
    "systemjs": "0.19.25",
    "zone.js": "0.6.6"
  },
  "devDependencies": {
    "browser-sync": "^2.11.2",
    "concurrently": "^2.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-sass": "^2.2.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-tslint": "^4.3.4",
    "gulp-typescript": "^2.12.2",
    "tslint": "^3.7.1",
    "typescript": "^1.8.9",
    "typings": "^0.7.12"
  }
}

Solution

  • was a systemjs configuration problem.