stevepapa/angular2-autosize

Cannot find module 'angular2-autosize'.

Opened this issue · 7 comments

dunice-kryuchkov commented

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 commented

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

htrex commented

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

fivedoor commented

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 commented
fivedoor commented

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 commented

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 commented

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 😯