AOT bugs

[doorman02]

Hi, thanks for this plugin. I am gettin some AOT bugs..

Error at node_modules/ng2-img-cropper/src/model/cropTouch.ts:1:9: 'DragMarker' is declared but never used. Error at node_modules/ng2-img-cropper/src/model/cropTouch.ts:2:9: 'CornerMarker' is declared but never used. Error at node_modules/ng2-img-cropper/src/imageCropperComponent.ts:1:82: 'Type' is declared but never used.

[surfercoder]

Hi there, I am running into a similar problem when I try to build my solution with the command: "ng build --prod --aot". I am using angular-cli version 1.0.0-beta.26 and the error message is the following:

ERROR in Type ImageCropperComponent in /Users/agustin/Documents/projects/surfercoder/arc10/node_modules/ng2-img-cropper/src/imageCropperComponent.ts is part of the declarations of 2 modules: ImageCropperModule in /Users/agustin/Documents/projects/surfercoder/arc10/node_modules/ng2-img-cropper/src/imageCropperModule.ts and ProfileModule in /Users/agustin/Documents/projects/surfercoder/arc10/src/app/login/leader/profile/profile.module.ts! Please consider moving ImageCropperComponent in /Users/agustin/Documents/projects/surfercoder/arc10/node_modules/ng2-img-cropper/src/imageCropperComponent.ts to a higher module that imports ImageCropperModule in /Users/agustin/Documents/projects/surfercoder/arc10/node_modules/ng2-img-cropper/src/imageCropperModule.ts and ProfileModule in /Users/agustin/Documents/projects/surfercoder/arc10/src/app/login/leader/profile/profile.module.ts. You can also create a new NgModule that exports and includes ImageCropperComponent in /Users/agustin/Documents/projects/surfercoder/arc10/node_modules/ng2-img-cropper/src/imageCropperComponent.ts then import that NgModule in ImageCropperModule in /Users/agustin/Documents/projects/surfercoder/arc10/node_modules/ng2-img-cropper/src/imageCropperModule.ts and ProfileModule in /Users/agustin/Documents/projects/surfercoder/arc10/src/app/login/leader/profile/profile.module.ts.

ERROR in ./src/main.ts Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/agustin/Documents/projects/surfercoder/arc10/src' @ ./src/main.ts 4:0-74 @ multi ./src/main.ts

ERROR in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js Module not found: Error: Can't resolve '/Users/agustin/Documents/projects/surfercoder/arc10/src/$$_gendir' in '/Users/agustin/Documents/projects/surfercoder/arc10/node_modules/@angular/core/src/linker' @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js 71:15-36 87:15-102 @ ./~/@angular/core/src/linker.js @ ./~/@angular/core/src/core.js @ ./~/@angular/core/index.js @ ./src/main.ts @ multi ./src/main.ts

I am just using the ImageCropperComponent and adding it to the declarations section. If I remove it, the solution does not build at all and using the ImageCropperModule the error is different but still not working AoT compilation.

By the way, it works with "ng build --prod" but the resulting bundled files are much more heavy about their sizes.

Thanks in advance for your help.

Best regards.

[Mihai-B]

I am using the angular cli beta 26 also. what does the parameter --aot do ?

[surfercoder]

Hi @Mihai-B, here you have the information about it taken from the official Angular 2 website: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#compile

But basically, prepares the application for production giving you much more lighter bundled files since it removes all unnecessary dependencies. It start checking all the used modules and dependencies and based on that structure it prepares the final bundle so the third-party libraries/modules you use, should be built with this in mind.

Thanks a lot for your help.

Best regards.

[cstefanache]

@surfercoder: there really a declaration of ImageCropperComponent in ProfileModule? (imageCropperComponent.ts is part of the declarations of 2 modules: )

also: do you get the same errors as @doorman02 ?

[cstefanache]

managed to reproduce it - fixing it right now

[surfercoder]

Thanks @cstefanache! I never got the same errors described by @doorman02 but I got a different one just using the module. Let me know if you want me to only use the module and show you the given error.

Best regards.

[cstefanache]

I managed to make it working on my side with no change to the library by importing ImageCropperModule in the app module as such:

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

import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; import {ImageCropperModule} from "ng2-img-cropper/index";

@NgModule({ declarations: [ AppComponent, LoginComponent ], imports: [ BrowserModule, FormsModule, HttpModule, ImageCropperModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

can you please give it a try?

[surfercoder]

Hey @cstefanache, let me try it on the Mail AppModule. Right now I am using it in a Feature Module as the following:

import { NgModule } from '@angular/core';

import { ImageCropperModule } from 'ng2-img-cropper'; import { ModalModule } from 'ng2-bootstrap';

import { ProfileComponent } from './profile.component'; import { ProfileRoutingModule } from './profile.routing.module'; import { ProfileService } from './profile.service'; import { SharedModule } from '../../../shared';

@NgModule({ declarations: [ProfileComponent], exports: [ProfileComponent], imports: [ImageCropperModule, ModalModule.forRoot(), ProfileRoutingModule, SharedModule], providers: [ProfileService] }) export class ProfileModule { }

And the error is quite similar to previous one:

ERROR in Type ImageCropperComponent in /Users/agustin/Documents/projects/surfercoder/arc10/node_modules/ng2-img-cropper/src/imageCropperComponent.ts is part of the declarations of 2 modules: ImageCropperModule in /Users/agustin/Documents/projects/surfercoder/arc10/node_modules/ng2-img-cropper/src/imageCropperModule.ts and ProfileModule in /Users/agustin/Documents/projects/surfercoder/arc10/src/app/login/talent/profile/profile.module.ts! Please consider moving ImageCropperComponent in /Users/agustin/Documents/projects/surfercoder/arc10/node_modules/ng2-img-cropper/src/imageCropperComponent.ts to a higher module that imports ImageCropperModule in /Users/agustin/Documents/projects/surfercoder/arc10/node_modules/ng2-img-cropper/src/imageCropperModule.ts and ProfileModule in /Users/agustin/Documents/projects/surfercoder/arc10/src/app/login/talent/profile/profile.module.ts. You can also create a new NgModule that exports and includes ImageCropperComponent in /Users/agustin/Documents/projects/surfercoder/arc10/node_modules/ng2-img-cropper/src/imageCropperComponent.ts then import that NgModule in ImageCropperModule in /Users/agustin/Documents/projects/surfercoder/arc10/node_modules/ng2-img-cropper/src/imageCropperModule.ts and ProfileModule in /Users/agustin/Documents/projects/surfercoder/arc10/src/app/login/talent/profile/profile.module.ts.

ERROR in ./src/main.ts Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/agustin/Documents/projects/surfercoder/arc10/src' @ ./src/main.ts 4:0-74 @ multi ./src/main.ts

ERROR in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js Module not found: Error: Can't resolve '/Users/agustin/Documents/projects/surfercoder/arc10/src/$$_gendir' in '/Users/agustin/Documents/projects/surfercoder/arc10/node_modules/@angular/core/src/linker' @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js 71:15-36 87:15-102 @ ./~/@angular/core/src/linker.js @ ./~/@angular/core/src/core.js @ ./~/@angular/core/index.js @ ./src/main.ts @ multi ./src/main.ts

I will give it a try on the AppModule but it should work with Feature Modules as ng2-bootstrap works based on given code example.

Thanks.

[cstefanache]

I think that your profile module is exporting the cropper as well

[franzus5]

Hi there!

I had the same problem with "declarations of 2 modules"

Solved: Just remove component from declarations in "imageCropperModule", like:

import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core';

// import { ImageCropperComponent } from './imageCropperComponent';

@NgModule({ imports: [CommonModule], declarations: [ // ImageCropperComponent ], exports: [ // ImageCropperComponent ] }) export class ImageCropperModule { }

[cstefanache]

Closing issue - related to #95

[kim-cph]

I have read all posts and try lot of stuff , but I still have the problem . what I can read it should be fixed in the latest version ?

what kind of info could should I supply to get a chance for help ?

my mistake , this worked. did not pay notice to the imageCropperComponent->ImageCropperModule

//import { ImageCropperComponent, CropperSettings } from 'ng2-img-cropper'; to import { ImageCropperModule } from 'ng2-img-cropper';

and then declarations: [ ... //ImageCropperComponent, to imports: [ ... ImageCropperModule,

[anilthakur29]

after that it showing error can not find image croppersetting , can not find imagecropperComponent in my profile component.

[tuliomarchetto]

Just a quick overview so anyone don't spend too much time like me trying sort this issue in Ionic:

1. import { ImageCropperComponent, CropperSettings } from "ng2-img-cropper"; as usual in you page.js
2. import { ImageCropperModule } from "ng2-img-cropper"; at your page.module. and put it on imports array
3. You must re run with ionic serve and of course, later ionic build --prod

Good Luck!