Cannot find module 'angular2-autosize'.

[dunice-kryuchkov]

After npm i angular2-autosize, and adding it to appmodule with: import { Autosize } from 'angular2-autosize'; Compiller return error: "app.module.ts(10,42): error TS2307: Cannot find module 'angular2-autosize'."

If we import with directory 'angular2-autosize/angular2-autodize', compiller not send error, but web-page return "error: angular2-autosize 404 (Not Found)"

[bialad]

The solution proposed by @MatthewMerrill in #20 worked for me

[htrex]

I'm seeing this error and the solution proposed by @MatthewMerrill in #20 worked for me too

[fivedoor]

Environment:

angular2-autosize@1.0.1
npm 3.8.9
typescript: ^2.0.3
@angular/common: ~2.1.1

I was getting the compilation error : error TS2307: Cannot find module 'angular2-autosize'.

I have followed the suggested fixes from @MatthewMerrill #20 and tried variations on these

But I'm still getting the following error on load : new-form: 48 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/angular2-autosize/angular2-autosize

Apologies if there's something glaringly obvious I'm missing. Really appreciate any pointers to resolving. Thanks

Further details:

tsconfig:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "target": "ES5",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "declaration": true
  },
  "exclude": ["node_modules"]
}

app.module:

import { NgModule }                         from '@angular/core';
import { BrowserModule }                      from '@angular/platform-browser';
import { ReactiveFormsModule }                from '@angular/forms';
import { FormsModule }                              from '@angular/forms';
import { HttpModule }                         from '@angular/http';

import { AppRoutingModule, routedComponents } from './app-routing.module';
import { AppComponent }                     from './app.component';
import { DataService }                      from './data.service';
import { FormComponent }                    from './form.component';
import { NewFormComponent }                 from './new-form.component';
import { CampaignResolve }                  from './campaign.resolve';
import { CampaignSearchComponent }          from './campaign-search.component';
import { FormEditorComponent }              from './form-editor.component';
import { CanDeactivateGuard }               from './can-deactivate-guard.service'; //not used

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

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
  //  Autosize

  ],
  declarations: [
    AppComponent,
    routedComponents,
    FormComponent,
    NewFormComponent,
    CampaignSearchComponent,
    FormEditorComponent,
    Autosize

  ],
   providers: [
    DataService,
    CampaignResolve,
    CanDeactivateGuard //not used
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule {
  constructor() {
  }
}

[MatthewMerrill]

Where is your node_modules folder relative to your src folder and what version npm are you using?

On Apr 11, 2017 8:17 AM, "fivedoor" notifications@github.com wrote:

Environment:

angular2-autosize@1.0.1 npm 3.8.9 typescript: ^2.0.3 @angular/common: ~2.1.1

I was getting the compilation error : error TS2307: Cannot find module 'angular2-autosize'.

I have followed the suggested fixes from @MatthewMerrill https://github.com/MatthewMerrill #20 https://github.com/stevepapa/angular2-autosize/issues/20 and tried variations on these

But I'm still getting the following error on load : new-form: 48 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/angular2-autosize/angular2-autosize

Apologies if there's something glaringly obvious I'm missing. Really appreciate any pointers to resolving. Thanks

Further details:

tsconfig:

{ "compilerOptions": { "noImplicitAny": false, "module": "commonjs", "target": "ES5", "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true, "declaration": true }, "exclude": ["node_modules"] }

app.module:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http';

import { AppRoutingModule, routedComponents } from './app-routing.module'; import { AppComponent } from './app.component'; import { DataService } from './data.service'; import { FormComponent } from './form.component'; import { NewFormComponent } from './new-form.component'; import { CampaignResolve } from './campaign.resolve'; import { CampaignSearchComponent } from './campaign-search.component'; import { FormEditorComponent } from './form-editor.component'; import { CanDeactivateGuard } from './can-deactivate-guard.service'; //not used

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

@NgModule({ imports: [ BrowserModule, ReactiveFormsModule, FormsModule, HttpModule, AppRoutingModule, // Autosize

], declarations: [ AppComponent, routedComponents, FormComponent, NewFormComponent, CampaignSearchComponent, FormEditorComponent, Autosize

], providers: [ DataService, CampaignResolve, CanDeactivateGuard //not used ], bootstrap: [ AppComponent ] })

export class AppModule { constructor() { } }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/stevepapa/angular2-autosize/issues/22#issuecomment-293296939, or mute the thread https://github.com/notifications/unsubscribe-auth/AFAXIPTbM3sRSlpmMEcJKxM2bDb5rZOYks5ru5mjgaJpZM4MgRyx .

[fivedoor]

The node_modules folder sits in main folder as does the ‘app’ folder. The app.module.ts sits within the app folder. npm version is 3.8.9 thanks

[fivedoor]

Status update: I adjusted the import statement to the following and it seems to work now: import { Autosize } from '../node_modules/angular2-autosize/src/autosize.directive.js';

tbh this was more through trial and error than logic.
I had also toyed with updating the system.config.js without success - e.g. adding: 'angular2-autosize': 'npm:angular2-autosize/angular2-autosize.js',

Not quite sure why the above has resolved the issue. I guess having the .js extension added is not good practice amongst the .ts files? Sure there must be a more coherent fix or explanation if anyone can offer. Else, that's what has worked for me for the record. Thanks.

[kimbaudi]

My project structure is like this

.
├── node_modules
└── src
    └── app
        └── pages
            └── form
                └── form-elements
                    └── form-elements.module.ts

So in form-elements.module.ts, I'm doing import { Autosize } from '../../../../../node_modules/angular2-autosize/src/autosize.directive'; and it works :frowning:

---

Another option is to use the paths property in tsconfig.json to specify the path to angular2-autoresize relative to baseUrl

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

Now in form-elements.module.ts, I can do import { Autosize } from 'angular2-autosize'; and it works :hushed: