Problem with npm package to import autosize

[fredgate]

Here is my environment : angular2-autosize 1.0.1 angular 2.4.7 typescript 2.1.5 npm 3.10.10 Visual Studio 2015

My tsconfig :

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "noEmitOnError": true,
    "sourceMap": true,
    "removeComments": false,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true
  }
}

In my application module I want to import the autosize directive. I do as mentioned in the documentation :

import { Autosize } from 'angular2-autosize';

I get a compilation error :

error TS2307: Cannot find module 'angular2-autosize'.

According to typescript documentation about module resolution (see How TypeScript resolves modules section in official documentation), it seems normal as in the npm package of angular2-autosize, there is no typings entry in the package.json file, nor an index.ts file. It would be well to correct this problem, as it is very easy.

So to continue, i change my import to :

import { Autosize } from 'angular2-autosize/angular2-autosize';

as there is a angular2-autosize.ts file in the npm package. When I do that, my project compile but the resulting js file is not acceptable as it contains :

System.register("../../node_modules/angular2-autosize/src/autosize.directive", ["@angular/core"], function (exports_67, context_67) {
...
});

I think it is because the npm packages has two problems :

1. the package does not contain a javascript bundle file
2. the package.json file of the package should then reference this file in the entry named main

[MatthewMerrill]

Had same problem, typed out the relative route manually ('../../node_modules/angular2-autosize/angular2-autosize') and IntelliJ suggested the following which seems to work for me:

import {Autosize} from 'angular2-autosize/src/autosize.directive';

[sumithasudhakar]

getting error Runtime Error Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\Vipin\SampleApp\node_modules\angular2-autosize\src\autosize.directive.js' at Error (native).

Please suggest

[kimbaudi]

@MatthewMerrill - I think a better approach would be to use the paths property in tsconfig.json to specify the path to angular2-autoresize relative to baseUrl

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "angular2-autosize": ["node_modules/angular2-autosize/src/autosize.directive"]
    }
  }
}

This way, you can now do import { Autosize } from 'angular2-autosize'; and it works fine :grinning:

[jlherren]

@kimbaudi That's indeed much cleaner and works great for me. Since I already had "baseUrl": "src" in that file, I had of course to prepend ../ to the path of autosize.