Build error when trying to run in a device with 'ionic cordova android run'

[jayserdny]

I followed the latest version of this tutorial to make my own type of app based on this tutorial. The app does run with ionic serve command. However, when I try to run in a device, it throws the following error:

Error: ./api/server/collections/index.ts Module build failed: Error: ENOENT: no such file or directory, open '/Users/Jayser/Documents/aplicaciones/vendelo-comodo-app/api/server/collections/index.js' @ ./src/providers/listing/listing.ts 13:20-46 @ ./src/app/app.module.ngfactory.ts @ ./src/app/main.ts at new BuildError (/Users/Jayser/Documents/aplicaciones/vendelo-comodo-app/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28) at callback (/Users/Jayser/Documents/aplicaciones/vendelo-comodo-app/node_modules/@ionic/app-scripts/dist/webpack.js:123:28) at emitRecords.err (/Users/Jayser/Documents/aplicaciones/vendelo-comodo-app/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:269:13) at Compiler.emitRecords (/Users/Jayser/Documents/aplicaciones/vendelo-comodo-app/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:375:38) at emitAssets.err (/Users/Jayser/Documents/aplicaciones/vendelo-comodo-app/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:262:10) at applyPluginsAsyncSeries1.err (/Users/Jayser/Documents/aplicaciones/vendelo-comodo-app/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:368:12) at next (/Users/Jayser/Documents/aplicaciones/vendelo-comodo-app/node_modules/@ionic/app-scripts/node_modules/tapable/lib/Tapable.js:218:11) at Compiler.compiler.plugin (/Users/Jayser/Documents/aplicaciones/vendelo-comodo-app/node_modules/@ionic/app-scripts/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4) at Compiler.applyPluginsAsyncSeries1 (/Users/Jayser/Documents/aplicaciones/vendelo-comodo-app/node_modules/@ionic/app-scripts/node_modules/tapable/lib/Tapable.js:222:13) at Compiler.afterEmit (/Users/Jayser/Documents/aplicaciones/vendelo-comodo-app/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:365:9)

My webpack.config.js is the same as latest tutorial and also the tsconfig.json is the same file.

[darkbasic]

Works for me, so please try the following:

git clone https://github.com/Urigo/Ionic2CLI-Meteor-WhatsApp.git cd Ionic2CLI-Meteor-WhatsApp git checkout 3e2cdba0ef1f7d32eeb582e0c305d5dd6a607875 Then change your local IP to the one resolved by meteor.linuxsystems.it or put your-ip meteor.linuxsystems.it into /etc/hosts. npm install npm run meteor-client:bundle npm run api (in one shell) npm run ionic:serve (in another shell) Point your browser to http://meteor.linuxsystems.it:8100.

[jayserdny]

Happens the same happening to me when trying to run in a device. Runing ionic serve works fine. ionic cordova android run fails. Output is the following:

Error: ./api/server/collections/index.ts Module build failed: Error: ENOENT: no such file or directory, open '/Users/Jayser/Documents/React/Ionic2CLI-Meteor-WhatsApp/api/server/collections/index.js' @ ./src/pages/profile/profile.ts 17:20-46 @ ./src/pages/verification/verification.ts @ ./src/pages/login/login.ts @ ./src/app/app.component.ts @ ./src/app/app.module.ngfactory.ts @ ./src/app/main.ts,./api/server/models.ts Module build failed: Error: ENOENT: no such file or directory, open '/Users/Jayser/Documents/React/Ionic2CLI-Meteor-WhatsApp/api/server/models.js' @ ./src/services/phone.ts 75:15-36 @ ./src/app/app.module.ngfactory.ts @ ./src/app/main.ts at new BuildError (/Users/Jayser/Documents/React/Ionic2CLI-Meteor-WhatsApp/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28) at callback (/Users/Jayser/Documents/React/Ionic2CLI-Meteor-WhatsApp/node_modules/@ionic/app-scripts/dist/webpack.js:123:28) at emitRecords.err (/Users/Jayser/Documents/React/Ionic2CLI-Meteor-WhatsApp/node_modules/webpack/lib/Compiler.js:269:13) at Compiler.emitRecords (/Users/Jayser/Documents/React/Ionic2CLI-Meteor-WhatsApp/node_modules/webpack/lib/Compiler.js:375:38) at emitAssets.err (/Users/Jayser/Documents/React/Ionic2CLI-Meteor-WhatsApp/node_modules/webpack/lib/Compiler.js:262:10) at applyPluginsAsyncSeries1.err (/Users/Jayser/Documents/React/Ionic2CLI-Meteor-WhatsApp/node_modules/webpack/lib/Compiler.js:368:12) at next (/Users/Jayser/Documents/React/Ionic2CLI-Meteor-WhatsApp/node_modules/tapable/lib/Tapable.js:218:11) at Compiler.compiler.plugin (/Users/Jayser/Documents/React/Ionic2CLI-Meteor-WhatsApp/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4) at Compiler.applyPluginsAsyncSeries1 (/Users/Jayser/Documents/React/Ionic2CLI-Meteor-WhatsApp/node_modules/tapable/lib/Tapable.js:222:13) at Compiler.afterEmit (/Users/Jayser/Documents/React/Ionic2CLI-Meteor-WhatsApp/node_modules/webpack/lib/Compiler.js:365:9)

[darkbasic]

Did you try the exact same procedure I detailed in my previous post?

[jayserdny]

Yes, the same exact procedure you detailed in your post.

[darkbasic]

That's weird... can you please post your npm -g list --depth=0 along with your node version? OS?

[jayserdny]

For npm -g list --depth=0 I got the following results:

/usr/local/lib ├── @ ionic/app-scripts@3.0.0 ├── @ ionic/cli-plugin-proxy@1.3.2 ├── @ shoutem/cli@0.10.1 ├── bower@1.8.0 ├── cordova@7.1.0 ├── create-react-native-app@1.0.0 ├── firebase-tools@3.12.0 ├── ionic@3.13.0 ├── ios-deploy@1.9.1 ├── ios-sim@5.0.13 ├── meteor-client-bundler@0.3.0 ├── node-red@0.16.2 ├── npm@5.4.2 ├── react-native-cli@2.0.1 ├── react-native-git-upgrade@0.2.7 ├── typescript@2.5.2 └── vende@0.0.1 -> /Users/Jayser/Documents/aplicaciones/vende

npm ERR! peer dep missing: firebase@^2.4.0 || 3.x.x, required by geofire@4.1.2 npm ERR! missing: com.synconset.imagepicker@~2.1.8, required by vende@0.0.1 npm ERR! peer dep missing: ajv@>=5.0.0, required by ajv-keywords@2.1.0

The node version return by node -v is v8.7.0 and my OS is macOS High Sierra

Just in case, here is my Ionic info as well:

cli packages: (/node_modules)

@ionic/cli-plugin-proxy : 1.4.12
@ionic/cli-utils        : 1.13.0
ionic (Ionic CLI)       : 3.13.0

global packages:

          cordova (Cordova CLI) : 7.1.0 

local packages:

          @ionic/app-scripts : 3.0.0
          Cordova Platforms  : android 6.3.0 ios 4.5.2
          Ionic Framework    : ionic-angular 3.7.1

System:

          Android SDK Tools : 26.1.1
          ios-deploy        : 1.9.1 
          Node              : v8.7.0
          npm               : 5.4.2 
          OS                : macOS High Sierra
          Xcode             : Xcode 9.0 Build version 9A235 

Misc:

          backend : legacy

The app compiles correctly when using Ionic serve command. However, by using the commands Ionic cordova android run --prod --release --aot, Ionic cordova android run --prod --release, Ionic cordova android run --prod, and Ionic cordova android run gives the error. I also noticed that adding --livereload flag to any of these commands, the build is correctly done.

Here is more information regarding my files:

tsconfig.json from ionic:

{ "compilerOptions": { "allowSyntheticDefaultImports": true, "declaration": true, "baseUrl": ".", "emitDecoratorMetadata": true, "experimentalDecorators": true, "downlevelIteration": true, "lib": [ "dom", "es2015", "es2016" ], "module": "commonjs", "moduleResolution": "node", "paths": { "api/*": ["./api/server/*"] }, "sourceMap": true, "target": "es5", "skipLibCheck": true, "stripInternal": true, "noImplicitAny": false, "types": [ "@types/meteor", "@types/underscore", "@types/meteor-collection-hooks" ] }, "include": [ "src/**/*.ts", "api/**/*.ts" ], "exclude": [ "node_modules", "api/node_modules", "api" ], "compileOnSave": false, "atom": { "rewriteTsconfig": false } }

tsconfig.json from api folder:

{ "compilerOptions": { "allowSyntheticDefaultImports": true, "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "dom", "es2015" ], "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "target": "es5", "skipLibCheck": true, "stripInternal": true, "noImplicitAny": false, "types": [ "meteor-typings", "@types/meteor-publish-composite", "@types/meteor-collection-hooks" ] }, "exclude": [ "node_modules" ], "compileOnSave": false, "atom": { "rewriteTsconfig": false } }

[darkbasic]

Does cordova run android work for you? This is the command used in the guide and this is the one I tested.

[jayserdny]

This one works. However, it breaks the code because it loads without css. Also by using this command, how can I use the aot compiler and the other flags?

[jayserdny]

In addition, app compiles when I remove any reference to api folder in client side. I think the problem is related to resolution of paths. When webpack process start, it says that cannot find the index.js file in api/server/collections.

[darkbasic]

However, it breaks the code because it loads without css.

That's strange, I noticed no issues with that command and css.

[jayserdny]

I deleted everything and clear cache. Now it runs using this command. However, can you please try running the app using ionic cli commands? Should we reference this issue to ionic-app-scripts repo?

[darkbasic]

Ionic commands used to work I think, but I cannot test every single combination possible every time I update the tutorial, at least not unless we will have tests in place. You mentioned something about the api directory, so probably there is an issue with our alias in webpack.config.js: 'api': path.resolve(__dirname, 'api/server').

Should we reference this issue to ionic-app-scripts repo?

You are free to try, maybe they can help.

Regarding AOT, I didn't test it with Ionic: only with AngularCLI.

[jayserdny]

I found a solution with using 'ts-loader' to load ts files instead of the one provided by ionic. It now compiles using Ionic CLI.

[darkbasic]

Can you please provide a patch?

[jayserdny]

Before provide a patch I need to solve another problem because my solution breaks the sharp plugin.

[jayserdny]

I solved it by explicitly using the tsc command line to generate .js & .js.map files to api folder. However, it generates an error because Meteor will try to load .js and .ts files. To fix this error, you need to create the following file .meteorignore with the following content:

*/.js */.js.map

[darkbasic]

I cannot reproduce your issue: ionic cordova run android works flawlessly for me.

[jayserdny]

@darkbasic did you try using AOT compiler? And prod and release flags?

[darkbasic]

Yes, I did: https://github.com/Urigo/Ionic2CLI-Meteor-WhatsApp/issues/113#issuecomment-342187908

[jayserdny]

@darkbasic Wow, I didn't think about moving this directory to the "src" folder. Now I can get ride of my workaround :) Thanks