Integration with IONIC

[asamarcos]

Hi, great directive you build, congrats. I'm trying to integrate it into IONIC (www.ionicframework.com) and it works fine on development, but as as soon as I try to build a production output, it fails.

I've followed all the steps from installation, except for systemjs.config.js which IONIC team says is not needed because webpack would automatically detect and setup everything.

The error is this:

`Module build failed: Error: ENOENT: no such file or directory, open '/home/arthur/ionicProjects/p-app/node_modules/jw-bootstrap-switch-ng2/src/index.js' at Error (native)

Module build failed: Error: ENOENT: no such file or directory, open '/home/arthur/ionicProjects/p-app/node_modules/jw-bootstrap-switch-ng2/src/directive.js'

`

Which seems to indicate systemjs.config.js is needed, cause it's looking for js files on /src folder, not /dist folder.

Do you have an ideia on what I need to do to get the library running?

[JulioWar]

Hello @asamarcos

Thanks for using my directive. I never work with IONIC before, so please give me some time to figure it out what is happening. If you share some of your code that you are using for import this library could be useful.

Are you using a Boilerplate?

[asamarcos]

Hi Julio, thanks for looking into it. Instalation process is very straighfoward, I have requested the library through npm:

npm install jw-bootstrap-switch-ng2 --save

Included this on my app.module.ts file:

`import {JWBootstrapSwitchModule} from 'jw-bootstrap-switch-ng2';

@NgModule({ declarations: [ ... ], imports: [ ... JWBootstrapSwitchModule ... ], bootstrap: [IonicApp], entryComponents: [ ... ], providers: [ ... ] }) export class AppModule { } ` And finally I call the directive directly from a template html file:

<bSwitch item-end [switch-size]="switchCfg.size" [switch-off-text]="switchCfg.offText" [switch-on-text]="switchCfg.onText" [switch-on-color]="switchCfg.onColor" [switch-handle-width]="switchCfg.handleWidth" [switch-animate]="switchCfg.animate" [(ngModel)]="toggle_status" (onChangeState)="toggleAnswer($event)"> </bSwitch>

If I run this in the emulator:

ionic cordova run android --device

Everything goes as it should. But when I try the --prod flag:

ionic cordova run android --device --prod

The error I reported shows up and process shuts down.

To see the error I've shown you must add this to the main app package.json:

"config": { "ionic_purge_decorators": false, "ionic_manual_treeshaking": false }

Otherwise the process fails but with an error message masked by js optimization.

[JulioWar]

Can you try something for me please. Go to the node_modules directory search for this library, then change the package.json file and add this line:

   "module": "./dist/index.js",

Try to run the app in production mode and let me know if something change

[asamarcos]

Sure.

I added this to the end of node_modules/jw-bootstrap-switch-ng2/package.json

... "typings": "./src/index.ts", "url": "https://github.com/JulioWar", "version": "1.0.5", "module": "./dist/index.js" }

And I got this error:

Error: Error encountered resolving symbol values statically. Could not resolve jw-bootstrap-switch-ng2 relative to /home/arthur/ionicProjects/pose-app/src/app/app.module.ts., resolving symbol AppModule in /home/arthur/ionicProjects/pose-app/src/app/app.module.ts, resolving symbol AppModule in /home/arthur/ionicProjects/pose-app/src/app/app.module.ts at syntaxError (/home/arthur/ionicProjects/pose-app/node_modules/@angular/compiler/bundles/compiler.umd.js:1550:34) at simplifyInContext (/home/arthur/ionicProjects/pose-app/node_modules/@angular/compiler/bundles/compiler.umd.js:23870:23) at StaticReflector.simplify (/home/arthur/ionicProjects/pose-app/node_modules/@angular/compiler/bundles/compiler.umd.js:23882:13) at StaticReflector.annotations (/home/arthur/ionicProjects/pose-app/node_modules/@angular/compiler/bundles/compiler.umd.js:23331:41) at NgModuleResolver.resolve (/home/arthur/ionicProjects/pose-app/node_modules/@angular/compiler/bundles/compiler.umd.js:13883:70) at CompileMetadataResolver.getNgModuleMetadata (/home/arthur/ionicProjects/pose-app/node_modules/@angular/compiler/bundles/compiler.umd.js:14473:60) at addNgModule (/home/arthur/ionicProjects/pose-app/node_modules/@angular/compiler/bundles/compiler.umd.js:23050:58) at /home/arthur/ionicProjects/pose-app/node_modules/@angular/compiler/bundles/compiler.umd.js:23061:14 at Array.forEach (native) at _createNgModules (/home/arthur/ionicProjects/pose-app/node_modules/@angular/compiler/bundles/compiler.umd.js:23060:26)

[JulioWar]

@asamarcos

I made an update for this library. try to update the library and should work.

Please close the issue if the solution works

[asamarcos]

You Sir @JulioWar, are awesome!

[09:23:45] build prod finished in 41.93 s

Thank you very much!