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:

[email protected]
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" ***@***.***> wrote: Environment: ***@***.*** 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 <#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 ***@***.***/core'; import { BrowserModule } from ***@***.***/platform-browser'; import { ReactiveFormsModule } from ***@***.***/forms'; import { FormsModule } from ***@***.***/forms'; import { HttpModule } from ***@***.***/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 <#22 (comment)>, 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 😦

---

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 😯