在Angular中导入外部模块功能

Question

I wrote an es6 module, with some exported functions, and uploaded it to npm (uplaoded its transpiled es5 code).

I'm trying to consume this package in an Angular project that uses SystemJS as a module loader (it's an hybrid app of AngularJS 1.5 and Angular 5.2, in the middle of a migration process).

I added to systemjs.config.js the new library, similar to how I added rxjs (directing it to its path under node_modules).

But when trying to use one of the module's public functions, IntelliJ doesn't know where to import it from (as it knows for example when using noop function of rxjs), and if I add the import statement manually (import { func-name } from 'package-name'), then TypeScript compiler throws an error.

Any suggestions? Do I need to change something in the module I published to npm, or in the way I'm trying to consume the module functions in Angular?

Thanks.

Angular code

systemjs.config.js:

map: {
      'app': './',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

      // other libraries
      'rxjs'                     : 'npm:rxjs',
      .
      .
      'my-package'               : 'npm:my-package/dist/my-package.js'
    },

my-component.component.ts:

import { func } from 'my-package';
.
.
.
ngAfterContentInit() {
    func();
}

TypeScript compiler error:

error TS2307: Cannot find module 'package-name'

Answer 1

It works now, after I changed the npm package to build a umd version.

And in systemjs.config.js:

'my-package': 'npm:my-package/dist/my-package.umd.js'

In addition, generating an index.d.ts file for my npm package (TypeScript Definition File), made IntelliJ to do automatic imports for the library's functions, and made tsc not to fail with "Cannot find module" error.