Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release build failed #113

Open
airstep opened this issue Jul 20, 2017 · 51 comments
Open

Release build failed #113

airstep opened this issue Jul 20, 2017 · 51 comments

Comments

@airstep
Copy link

airstep commented Jul 20, 2017

When I try to build app in release mode by command:

ionic cordova build android --prod --release --profile

I get this errors:
Module not found: Error: Can't resolve 'meteor/meteor' in '/home/user/work/personal/ionic/new/chat/src/app' resolve 'meteor/meteor' in '/home/user/work/personal/ionic/new/chat/src/app' Parsed request is a module ... Module not found: Error: Can't resolve 'meteor/underscore' in '/home/user/work/personal/ionic/new/chat/src/pages/chats' resolve 'meteor/underscore' in '/home/user/work/personal/ionic/new/chat/src/pages/chats' Parsed request is a module ... Module not found: Error: Can't resolve 'api/collections' in '/home/user/work/personal/ionic/new/chat/src/pages/chats' resolve 'api/collections' in '/home/user/work/personal/ionic/new/chat/src/pages/chats'
err.txt

But when same thing build in dev mode all is ok...

@carlos-olivera
Copy link

I had the same problem.

I had to downgrade ionic/app-scripts to version: 1.3.12 and works again.

@airstep
Copy link
Author

airstep commented Jul 20, 2017

Thanks for response )

Strange - I have the same version of ionic/app-scripts as yours..

Can you show your tsconfig.json file? Maybe solution is also in it...

@carlos-olivera
Copy link

Sure:
{ "compilerOptions": { "allowSyntheticDefaultImports": true, "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "dom", "es2015" ], "module": "es2015", "moduleResolution": "node", "sourceMap": true, "target": "es5" }, "include": [ "src/**/*.ts" ], "exclude": [ "node_modules" ], "compileOnSave": false, "atom": { "rewriteTsconfig": false } }

@airstep
Copy link
Author

airstep commented Jul 20, 2017

Hmm...

But there is no types specified like in documentation...

"types": [ "@types/underscore", "@types/meteor-accounts-phone", "@types/meteor-collection-hooks" ]

So, without them I get another batch of errors...

On what chapter are you? )

@carlos-olivera
Copy link

I am building a modified version of the tutorial, a real time schedule for a fitness app, I use the base, but not phone verification, for example.

@sigalor
Copy link

sigalor commented Jul 28, 2017

I had encountered almost exactly the same errors as you and managed to fix them in the following ways:

  • Can't resolve 'meteor/meteor': just remove all lines like import { Meteor } from 'meteor/meteor';. It seems very unintuitive, but for some reason, it worked for me and the Meteor identifier is still accessible like normal.
  • Can't resolve 'meteor/underscore': I did not know how to solve this underscore problem in the first place. So I just did npm install lodash and replaced all import lines for underscore with import * as _ from "lodash"; (it looks like syntax like import _ from "lodash"; does not work for Typescript 2!). Note that in lodash, some methods have different names but 5-second-Google-searches should answer your questions in this way.
  • Can't resolve 'api/collections': I had asked for help on this error myself and also found the solution by myself: Add "config": { "ionic_webpack": "./webpack.config.js" } to package.json because otherwise, webpack.config.js is ignored.

For the last issue, of course you need to make sure that tsconfig.json's compilerOptions.paths contains "api/*": ["./api/server/*"] and webpack.config.js's resolve contains alias: { "api": path.resolve(__dirname, "api/server") }, but I think the tutorial mentions this anyway.

@airstep
Copy link
Author

airstep commented Jul 28, 2017

Tnx to sigalor!

I just removed all 'meteor/meteor' but then...

I've found that doesn't see such line on build process with --prod flag: webpack started...

So, after making downgrade (read about this issue) to: npm i @ionic/[email protected]

I have: BUILD SUCCESSFUL

@airstep airstep closed this as completed Jul 28, 2017
@airstep
Copy link
Author

airstep commented Jul 29, 2017

Have then problem to run debug build version with visual code:

ERROR app-scripts serve unexpectedly failed.settings: undefinedcontext: [object Object]

And release version doesn't connect to server (...

@airstep airstep reopened this Jul 29, 2017
@sigalor
Copy link

sigalor commented Jul 29, 2017

Which command do you use to run the debug build? Btw, a quick Google search showed this. Maybe it can help you.

@airstep
Copy link
Author

airstep commented Jul 29, 2017

Solved if I run by command: npm run ionic:serve

But next question is why client can not connect to server under release version...

@sigalor
Copy link

sigalor commented Jul 29, 2017

So, again: Which command do you currently use to run the server?

@airstep
Copy link
Author

airstep commented Jul 29, 2017

Sorry, my way is little irrelative - tryied to downgrade app-scripts to 1.3.4 then I wish to use latest version. I just hit F5 to 'Serve to the browser (ionic serve)' in visual code - and I can debug client side with latest app-scripts version (2.1.3), but if I use 1.3.4 there is an error described above

I have this in .vscode/launch.json:

{
  "name": "Serve to the browser (ionic serve)",
  "type": "cordova",
  "request": "launch",
  "platform": "serve",
  "cwd": "${workspaceRoot}",
  "devServerAddress": "localhost",
  "sourceMaps": true,
  "ionicLiveReload": true,
  "devServerTimeout": 2000000,
  "runtimeExecutable": "/opt/google/chrome/chrome"
},

I think there must be some another way how to build release version with latest app-scripts... but I didn't found it yet...

@airstep
Copy link
Author

airstep commented Jul 29, 2017

To build release (and it is fail with latest app-scripts version):

ionic cordova build android --prod --release --profile

If I remove --prod then it SUCCESS, but size of resulted apk is multipled x2 and client can't connect to the server side

@sigalor
Copy link

sigalor commented Jul 30, 2017

Hmm... I think I won't be able to help you further for now. I just started learning Ionic/... around two weeks ago, so I didn't try out a lot yet. Especially these production builds are totally new for me. So, I hope that others from this community can help you better. Or, if you still have this error in a few weeks, maybe I will come back and be able to solve it. :)

@carlos-olivera
Copy link

with the last version of ionic, and only with the solution of @sigalor

Can't resolve 'meteor/meteor': just remove all lines like import { Meteor } from 'meteor/meteor';. It seems very unintuitive, but for some reason, it worked for me and the Meteor identifier is still accessible like normal.<

My problem solved.

This was referenced Oct 31, 2017
@darkbasic
Copy link
Collaborator

I had a quick look at this issue, Ionic-CLI simply wants all the imports to be located inside the src directory. So to fix the --prod build you simply need to move the api directory inside the src directory.
I just got a working build with ionic cordova run android --prod.

@airstep
Copy link
Author

airstep commented Nov 6, 2017

@darkbasic Thank you!

@airstep airstep closed this as completed Nov 6, 2017
@darkbasic
Copy link
Collaborator

darkbasic commented Nov 6, 2017

In tsconfig you'll have to change

    "paths": {
      "api/*": ["./api/server/*"]
    },

  "include": [
    "src/**/*.ts",
    "api/**/*.ts"
  ],

  "exclude": [
    "node_modules",
    "api/node_modules",
    "api"
  ],

with

    "paths": {
      "api/*": ["./src/api/server/*"]
    },

  "include": [
    "src/**/*.ts"
  ],

  "exclude": [
    "node_modules",
    "src/api/node_modules",
    "src/api"
  ],

In webpack.config.js you'll have to change every alias from

    alias: {
      'api': path.resolve(__dirname, 'api/server')
    }

to

    alias: {
      'api': path.resolve(__dirname, 'src/api/server')
    }

Symbolic links:

$ ls -al src/api
totale 16
drwxr-xr-x 1 niko niko 120  6 nov 16.34 .
drwxr-xr-x 1 niko niko 124  6 nov 16.31 ..
-rw-r--r-- 1 niko niko  14  6 nov 16.19 .gitignore
drwxr-xr-x 1 niko niko 138  6 nov 16.35 .meteor
lrwxrwxrwx 1 niko niko  19  6 nov 16.34 node_modules -> ../../node_modules/
lrwxrwxrwx 1 niko niko  18  6 nov 16.34 package.json -> ../../package.json
drwxr-xr-x 1 niko niko  54  6 nov 16.19 server
-rw-r--r-- 1 niko niko 555  6 nov 16.19 tsconfig.json

I'm reopening because this bug hasn't still been fixed into the released version of the tuorial, so better keep track of it to help others.

@darkbasic darkbasic reopened this Nov 6, 2017
@iLGunners
Copy link

hello @darkbasic, issue is persisting after changes;

  • Can't resolve api/collections
  • Field browser doesn't contain a valid alias configuration

as per your suggestion api folder has been moved under src;

image

content in src/api now;

total 24
drwxrwxr-x  4 noshu noshu 4096 Nov  7 16:17 .
drwxrwxr-x 10 noshu noshu 4096 Nov  7 16:05 ..
lrwxrwxrwx  1 noshu noshu   20 Nov  7 15:47 declarations.d.ts -> ../declarations.d.ts
-rw-rw-r--  1 noshu noshu   14 Aug 29 14:23 .gitignore
drwxrwxr-x  3 noshu noshu 4096 Aug 29 16:41 .meteor
lrwxrwxrwx  1 noshu noshu   19 Nov  7 15:47 node_modules -> ../../node_modules/
lrwxrwxrwx  1 noshu noshu   18 Nov  7 16:17 package.json -> ../../package.json
drwxrwxr-x  3 noshu noshu 4096 Aug 29 14:23 server
-rw-rw-r--  1 noshu noshu  555 Nov  3 17:50 tsconfig.json

tsconfig;

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

webpack config;

var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
 
module.exports = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,
 
  resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')],
    alias: {
      'api': path.resolve(__dirname, 'src/api/server')
    }
  },

  externals: [
    resolveExternals
  ],
 
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.ts$/,
        loader: process.env.IONIC_WEBPACK_LOADER
      },
      {
        test: /\.js$/,
        loader: process.env.IONIC_WEBPACK_TRANSPILE_LOADER
      }
    ]
  },

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    new webpack.ProvidePlugin({
      __extends: 'typescript-extends'
    })
  ],
 
  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    __dirname: true
  }
};

function resolveExternals(context, request, callback) {
  return resolveMeteor(request, callback) ||
    callback();
}
 
function resolveMeteor(request, callback) {
  var match = request.match(/^meteor\/(.+)$/);
  var pack = match && match[1];
 
  if (pack) {
    callback(null, 'Package["' + pack + '"]');
    return true;
  }
}

packages;

{
    "name": "Nexxdeli-App",
    "version": "0.0.1",
    "author": "MRHASAN/ptc-gps.de",
    "homepage": "http://ptc-gps.de",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve",
        "meteor-client:bundle": "meteor-client bundle -s api -c meteor-client.config.json"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "^2.0.1",
        "@ngui/map": "^0.18.5",
        "@types/googlemaps": "^3.26.20",
        "aws-sdk": "^2.95.0",
        "babel-runtime": "^6.23.0",
        "cordova-android": "^6.2.3",
        "cordova-browser": "^4.1.0",
        "cordova-plugin-console": "^1.0.7",
        "cordova-plugin-device": "^1.1.6",
        "cordova-plugin-fcm": "^2.1.2",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.3",
        "cordova-plugin-whitelist": "^1.3.2",
        "cordova-sqlite-storage": "^2.0.4",
        "ionic-angular": "3.5.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "meteor-node-stubs": "^0.2.11",
        "meteor-rxjs": "^0.4.7",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.0.1",
        "@ionic/cli-plugin-cordova": "1.6.2",
        "@ionic/cli-plugin-ionic-angular": "1.4.1",
        "@types/meteor": "^1.4.2",
        "@types/underscore": "^1.8.3",
        "ionic": "3.7.0",
        "meteor-typings": "^1.4.1",
        "tmp": "0.0.31",
        "ts-helpers": "^1.1.2",
        "typescript": "2.3.4",
        "typescript-extends": "^1.0.1"
    },
    "description": "Nexxdeli Ionic project",
    "config": {
        "ionic_webpack": "./webpack.config.js"
    },
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-fcm": {},
            "cordova-sqlite-storage": {}
        },
        "platforms": [
            "android",
            "browser"
        ]
    }
}

error output;

ionic cordova build android --prod --release
Running app-scripts build: --build --prod --iscordovaserve --nobrowser

[16:24:18]  build prod started ... 
[16:24:18]  clean started ... 
[16:24:18]  clean finished in 3 ms 
[16:24:18]  copy started ... 
[16:24:18]  ngc started ... 
[16:24:27]  ngc finished in 9.29 s 
[16:24:27]  preprocess started ... 
[16:24:27]  deeplinks started ... 
[16:24:28]  deeplinks finished in 664 ms 
[16:24:28]  optimization started ... 
[16:24:28]  copy finished in 10.18 s 
[WARN] Error occurred during command execution from a CLI plugin (@ionic/cli-plugin-cordova).
Error: ./src/components/product-categories/product-categories.component.js
Module not found: Error: Can't resolve './api/collections' in '/home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/product-categories'
resolve './api/collections' in '/home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/product-categories'
  using description file: /home/noshu/code/ptc-gps/nexxdeli-mobile/package.json (relative path: ./src/components/product-categories)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /home/noshu/code/ptc-gps/nexxdeli-mobile/package.json (relative path: ./src/components/product-categories)
    using description file: /home/noshu/code/ptc-gps/nexxdeli-mobile/package.json (relative path: ./src/components/product-categories/api/collections)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/product-categories/api/collections doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/product-categories/api/collections.js doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/product-categories/api/collections.ts doesn't exist
      as directory
        /home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/product-categories/api/collections doesn't exist
[/home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/product-categories/api/collections]
[/home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/product-categories/api/collections.js]
[/home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/product-categories/api/collections.ts]
[/home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/product-categories/api/collections]
 @ ./src/components/product-categories/product-categories.component.js 5:20-48
 @ ./src/components/product-categories/product-categories.component.ngfactory.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/app/main.ts,./src/components/single-product/single-product.component.js
Module not found: Error: Can't resolve 'api/collections' in '/home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/single-product'
resolve 'api/collections' in '/home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/single-product'
  Parsed request is a module
  using description file: /home/noshu/code/ptc-gps/nexxdeli-mobile/package.json (relative path: ./src/components/single-product)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /home/noshu/code/ptc-gps/nexxdeli-mobile/package.json (relative path: ./src/components/single-product)
    resolve as module
      /home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/single-product/node_modules doesn't exist or is not a directory
      /home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/node_modules doesn't exist or is not a directory
      /home/noshu/code/ptc-gps/nexxdeli-mobile/src/node_modules doesn't exist or is not a directory
      /home/noshu/code/ptc-gps/node_modules doesn't exist or is not a directory
      /home/noshu/code/node_modules doesn't exist or is not a directory
      /home/noshu/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules
        using description file: /home/noshu/code/ptc-gps/nexxdeli-mobile/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /home/noshu/code/ptc-gps/nexxdeli-mobile/package.json (relative path: ./node_modules)
          using description file: /home/noshu/code/ptc-gps/nexxdeli-mobile/package.json (relative path: ./node_modules/api/collections)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/api/collections doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/api/collections.js doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/api/collections.ts doesn't exist
            as directory
              /home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/api/collections doesn't exist
[/home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/single-product/node_modules]
[/home/noshu/code/ptc-gps/nexxdeli-mobile/src/components/node_modules]
[/home/noshu/code/ptc-gps/nexxdeli-mobile/src/node_modules]
[/home/noshu/code/ptc-gps/node_modules]
[/home/noshu/code/node_modules]
[/home/noshu/node_modules]
[/home/node_modules]
[/node_modules]
[/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/api/collections]
[/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/api/collections.js]
[/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/api/collections.ts]
[/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/api/collections]
 @ ./src/components/single-product/single-product.component.js 7:20-46
 @ ./src/components/single-product/single-product.component.ngfactory.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/app/main.ts,./src/components/user-order-list/user-order-list.component.js

error continues ...

@darkbasic
Copy link
Collaborator

meteor-client bundle -s api -c meteor-client.config.json ---> meteor-client bundle -s src/api -c meteor-client.config.json and run npm run meteor-client:bundle.

Please look carefully at all the api occurencies. It's just a path change so if api was resolved before it must be resolved now.

@airstep
Copy link
Author

airstep commented Nov 7, 2017

@iLGunners I have same issue like you and with last suggestion like @darkbasic - about client bundle

I think it something wrong with webpack alias... maybe:

alias: { 'api': path.resolve(__dirname, './src/api/server') }

@darkbasic I've rechecked all stuff with 'api' word (can you provide some fork with worked build - to look at differences or just configuration files zipped with folder structure)?

@iLGunners
Copy link

@darkbasic thanks for your response.

  • api was not resolved during ionic cordova build android --prod before, and still not.
  • npm run meteor-client:bundle is running properly now after changes to package.json
  • how can ionic cordova build android work not work with --prod flag?
  • there's also this error, Field 'browser' doesn't contain a valid alias configuration, this is also unclear to me.
  • still getting Can't resolve api/collections error.

@airstep changing webpack alias didn't work.

@darkbasic
Copy link
Collaborator

@iLGunners I cannot really know how you configured your project and why it doesn't work, I provided a working example and that's the most I can do.

This is the output of ionic cordova build android --prod from the example I previously attached:

[niko@arch-desktop Ionic2CLI-Meteor-WhatsApp]$ ionic cordova build android --prod
Running app-scripts build: --prod --platform android --target cordova
[15:39:39]  build prod started ... 
[15:39:39]  clean started ... 
[15:39:39]  clean finished in 1 ms 
[15:39:39]  copy started ... 
[15:39:39]  deeplinks started ... 
[15:39:39]  deeplinks finished in 15 ms 
[15:39:39]  ngc started ... 
[15:39:41]  copy finished in 1.60 s 
[15:39:43]  ngc finished in 3.34 s 
[15:39:43]  preprocess started ... 
[15:39:43]  preprocess finished in 58 ms 
[15:39:43]  webpack started ... 
[15:40:06]  webpack finished in 23.52 s 
[15:40:06]  uglifyjs started ... 
[15:40:06]  sass started ... 
[15:40:07]  sass finished in 809 ms 
[15:40:07]  cleancss started ... 
[15:40:12]  cleancss finished in 4.66 s 
[15:40:22]  uglifyjs finished in 15.76 s 
[15:40:22]  postprocess started ... 
[15:40:22]  postprocess finished in 5 ms 
[15:40:22]  lint started ... 
[15:40:22]  build prod finished in 42.78 s 
> cordova build android
ANDROID_HOME=/home/niko/Android/Sdk/
JAVA_HOME=/usr/lib/jvm/java-8-openjdk
Subproject Path: CordovaLib
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.

        at build_2zy1ssq7zx6qd75u9she6q6vu.run(/home/niko/WebstormProjects/Ionic2CLI-Meteor-WhatsApp/platforms/android/build.gradle:141)
The JavaCompile.setDependencyCacheDir() method has been deprecated and is scheduled to be removed in Gradle 4.0.

Incremental java compilation is an incubating feature.

The TaskInputs.source(Object) method has been deprecated and is scheduled to be removed in Gradle 4.0. Please use TaskInputs.file(Object).skipWhenEmpty() instead.

:preBuild UP-TO-DATE
:preDebugBuild
 UP-TO-DATE
:checkDebugManifest

:CordovaLib:preBuild
 UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE
:CordovaLib:checkDebugManifest

:CordovaLib:prepareDebugDependencies

:CordovaLib:compileDebugAidl
 UP-TO-DATE
:CordovaLib:compileDebugNdk
 UP-TO-DATE
:CordovaLib:compileLint
 UP-TO-DATE
:CordovaLib:copyDebugLint
 UP-TO-DATE
:CordovaLib:mergeDebugShaders
 
UP-TO-DATE
:CordovaLib:compileDebugShaders
 UP-TO-DATE
:CordovaLib:generateDebugAssets
 UP-TO-DATE
:CordovaLib:mergeDebugAssets
 UP-TO-DATE
:CordovaLib:mergeDebugProguardFiles
 UP-TO-DATE
:CordovaLib:packageDebugRenderscript
 UP-TO-DATE
:CordovaLib:compileDebugRenderscript
 UP-TO-DATE
:CordovaLib:generateDebugResValues
 UP-TO-DATE
:CordovaLib:generateDebugResources UP-TO-DATE
:CordovaLib:packageDebugResources
 UP-TO-DATE
:CordovaLib:processDebugManifest
 UP-TO-DATE
:CordovaLib:generateDebugBuildConfig
 UP-TO-DATE
:CordovaLib:processDebugResources
 UP-TO-DATE
:CordovaLib:generateDebugSources UP-TO-DATE
:CordovaLib:incrementalDebugJavaCompilationSafeguard
 UP-TO-DATE
:CordovaLib:compileDebugJavaWithJavac
 UP-TO-DATE
:CordovaLib:processDebugJavaRes
 
UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForDebug
 UP-TO-DATE
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForDebug
 UP-TO-DATE
:CordovaLib:mergeDebugJniLibFolders
 UP-TO-DATE
:CordovaLib:transformNative_libsWithMergeJniLibsForDebug
 UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForDebug
 
UP-TO-DATE
:CordovaLib:bundleDebug
 
UP-TO-DATE
:prepareOrgApacheCordovaCordovaLib630DebugLibrary
 
UP-TO-DATE
:prepareDebugDependencies

:compileDebugAidl
 UP-TO-DATE
:compileDebugRenderscript
 
UP-TO-DATE
:generateDebugBuildConfig
 
UP-TO-DATE
:generateDebugResValues
 
UP-TO-DATE
:generateDebugResources
 UP-TO-DATE
:mergeDebugResources
 
UP-TO-DATE
:processDebugManifest
 UP-TO-DATE
:processDebugResources
 UP-TO-DATE
:generateDebugSources UP-TO-DATE
:incrementalDebugJavaCompilationSafeguard
 UP-TO-DATE
:compileDebugJavaWithJavac
 UP-TO-DATE
:compileDebugNdk
 UP-TO-DATE
:compileDebugSources
 
UP-TO-DATE
:mergeDebugShaders
 UP-TO-DATE
:compileDebugShaders
 
UP-TO-DATE
:generateDebugAssets UP-TO-DATE
:mergeDebugAssets

:transformClassesWithDexForDebug
 
UP-TO-DATE
:mergeDebugJniLibFolders
 UP-TO-DATE
:transformNative_libsWithMergeJniLibsForDebug
 UP-TO-DATE
:processDebugJavaRes
 UP-TO-DATE
:transformResourcesWithMergeJavaResForDebug
 UP-TO-DATE
:validateSigningDebug

:packageDebug

:assembleDebug

:cdvBuildDebug


BUILD SUCCESSFUL

Total time: 1.065 secs
[15:40:24]  lint finished in 2.15 s 
Built the following apk(s): 
        /home/niko/WebstormProjects/Ionic2CLI-Meteor-WhatsApp/platforms/android/build/outputs/apk/android-debug.apk

Doesn't my example work for you?

@airstep
Copy link
Author

airstep commented Nov 7, 2017

@iLGunners try to use archive that @darkbasic sent to us to find differences

release with --prod works for me now in this sample

@iLGunners
Copy link

@airstep, I have compared. @darkbasic, the differences between your example and my project seem to be only webpack.config.js, other aspects seem to be similar.

webpack config differences;

  • my webpack.config.js does not have separate devConfig and prodConfig, mine exports only one config
  • these 2 imports are extra in your webpack.config.js;
var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
var PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;
  • yours has optimizedProdLoaders which mine doesn't
  • yours has an extra plugin. In devConfig it's ionicWebpackFactory.getCommonChunksPlugin(), and in prodConfig those are;
ionicWebpackFactory.getCommonChunksPlugin(),
new ModuleConcatPlugin(),
new PurifyPlugin()

@airstep
Copy link
Author

airstep commented Nov 7, 2017

@iLGunners yes I see... and move forward to integrate this in more complicated project (bcz sample from @darkbasic has early steps integrated like in tutorial), so for now I have some problem with sharp module:

Error: ./node_modules/sharp/build/Release/sharp.node Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @ ./node_modules/sharp/lib/constructor.js 9:14-52 @ ./node_modules/sharp/lib/index.js @ ./src/api/server/collections/pictures.ts @ ./src/api/server/collections/index.ts @ ./src/pages/chats/chats.ts @ ./src/app/app.module.ts @ ./src/app/app.module.ngfactory.ts @ ./src/app/main.ts

And found solution to add sharp with metor npm install

But after that again error with not found collections....

@airstep
Copy link
Author

airstep commented Nov 7, 2017

Found this fix about sharp issue https://www.bountysource.com/issues/42009721-prod-build-fails

But again same errors to collections....

Module not found: Error: Can't resolve 'api/collections' in '/home/taras/work/personal/ionic/meetme/src/services' resolve 'api/collections' in '/home/taras/work/personal/ionic/meetme/src/services' Parsed request is a module

This is hard to understand for complicated scenario. As an example after all topics is done or between 14-18 part

@airstep
Copy link
Author

airstep commented Nov 8, 2017

So, I'm stuck with sharp module now. Like in previous description it is server side package. So to separate from client, we use different places for folders structure for client and server - and we can't use one folder for client and server together....

Carrefully readed about sharp here but this is not work for me with root folder structure like 'src' for client and server

"We also used to run the previous command from the api directory, otherwise Meteor would have compiled sharp for the system Meteor version and not the project one. Since we cannot use meteor npm anymore let's stick to the root directory instead." - this done with respect, but not work I have switches beatween errors like:

Error: Cannot find module '@angular/tsc-wrapped/src/tsc' at Function.Module._resolveFilename (module.js:513:15)

and after

$ npm install @angular/tsc-wrapped autoprefixer

Error: ./src/api/server/collections/pictures.ts Module not found: Error: Can't resolve 'sharp' in '/home/taras/work/personal/ionic/Ionic2CLI-Meteor-WhatsApp-prod/src/api/server/collections' resolve 'sharp' in '/home/taras/work/personal/ionic/Ionic2CLI-Meteor-WhatsApp-prod/src/api/server/collections' Parsed request is a module using description file: /home/taras/work/personal/ionic/Ionic2CLI-Meteor-WhatsApp-prod/src/api/package.json (relative path: ./server/collections) Field 'browser' doesn't contain a valid alias configuration after using description file: /home/taras/work/personal/ionic/Ionic2CLI-Meteor-WhatsApp-prod/src/api/package.json (relative path: ./server/collections) resolve as module

$ node --version
v8.8.1
$ npm --version
5.5.1
$ meteor --version
Meteor 1.6

@iLGunners
Copy link

I am trying to create to different webpack configurations like in the example by @darkbasic, but it's not working for me.

  • does webpack or ionic need to be told somehow to use different configs for different environments?

My webpack.config.js now has;

export;

module.exports = {
  dev: devConfig
}

devConfig;

var devConfig = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,
 
  resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')],
    alias: {
      'api': path.resolve(__dirname, 'src/api/server')
    }
  },

  externals: [
    resolveExternals
  ],
 
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.ts$/,
        loader: process.env.IONIC_WEBPACK_LOADER
      },
      {
        test: /\.js$/,
        loader: process.env.IONIC_WEBPACK_TRANSPILE_LOADER
      }
    ]
  },

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    new webpack.ProvidePlugin({
      __extends: 'typescript-extends'
    })
  ],
 
  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    __dirname: true
  }
};

others;

  • imports
var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
  • functions
function resolveExternals(context, request, callback) {
  return resolveMeteor(request, callback) ||
    callback();
}
 
function resolveMeteor(request, callback) {
  var match = request.match(/^meteor\/(.+)$/);
  var pack = match && match[1];
 
  if (pack) {
    callback(null, 'Package["' + pack + '"]');
    return true;
  }
}

errors;

$ ionic lab
[INFO] Starting app-scripts server: --lab --l --port 8100 --p 8100 --livereload-port 35729 --r 35729 --address localhost
       - Ctrl+C to cancel
[15:33:47]  watch started ... 
[15:33:47]  build dev started ... 
[15:33:47]  clean started ... 
[15:33:47]  clean finished in 2 ms 
[15:33:47]  copy started ... 
[15:33:47]  transpile started ... 
[15:33:50]  transpile finished in 2.75 s 
[15:33:50]  preprocess started ... 
[15:33:50]  deeplinks started ... 
[15:33:50]  deeplinks finished in 84 ms 
[15:33:50]  preprocess finished in 84 ms 
[15:33:50]  webpack started ... 
[15:33:50]  dev server running: http://localhost:8100/ 

[INFO] Development server running
       Local: http://localhost:8100
       
{ Error: watcher error: /home/noshu/code/ptc-gps/nexxdeli-mobile/home/noshu/code/ptc-gps/nexxdeli-mobile/src/assets/**/*,/home/noshu/code/ptc-gps/nexxdeli-mobile/src/index.html,/home/noshu/code/ptc-gps/nexxdeli-mobile/src/manifest.json,/home/noshu/code/ptc-gps/nexxdeli-mobile/src/service-worker.js,/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/ionicons/dist/fonts/**/*,/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/ionic-angular/fonts/**/*,/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/ionic-angular/polyfills/polyfills.js,/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/sw-toolbox/sw-toolbox.js: Error: watch /home/noshu/code/ptc-gps/nexxdeli-mobile/src/assets ENOSPC
    at BuildError.Error (native)
    at new BuildError (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at FSWatcher.<anonymous> (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/@ionic/app-scripts/dist/watch.js:120:20)
    at emitOne (events.js:96:13)
    at FSWatcher.emit (events.js:188:7)
    at FSWatcher._handleError (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/chokidar/index.js:257:10)
    at createFsWatchInstance (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/chokidar/lib/nodefs-handler.js:39:5)
    at setFsWatchListener (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/chokidar/lib/nodefs-handler.js:228:14)
    at FSWatcher.NodeFsHandler._handleDir (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/chokidar/lib/nodefs-handler.js:407:19) hasBeenLogged: false, isFatal: false }
[15:33:50]  copy finished in 3.07 s 

@iLGunners
Copy link

Project Environment

$ meteor --version
Meteor 1.6                                    
$ npm --version
3.10.10
$ node --version
v6.11.5
$ ionic info

cli packages: (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules)

    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.0.1
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.5.0

System:

    Android SDK Tools : 25.2.5
    Node              : v6.11.5
    OS                : Linux 4.10
    npm               : 3.10.10 

@darkbasic
Copy link
Collaborator

darkbasic commented Nov 8, 2017

Regarding sharp the issue the problem is that if you install it using npm install sharp it will get compiled using your system node.js version, which may or not be fine depending on your meteor version.
In fact each version of Meteor uses a specific node.js version, so sharp must be compiled against that version.
The tutorial uses Meteor 1.6, which in turn uses node 8, so if you have node 8 installed on your system you'll be fine with a simple npm install sharp.
If you use a different version of node (or a different version of Meteor!) you'll have to somehow tell npm it should compile sharp against the version of node used by Meteor instead of the system one. You can easily do it by running meteor npm install sharp from the root directory of your project. Unfortunately such a way you'll compile it against the node version used by the system version of Meteor and not the project version of Meteor (which may or may not differ). Especially while Meteor 1.6 was still in the RC phase chances were that you had 1.5.2 globally installed and 1.6.RC in the project. Since 1.5 and 1.6 use different versions of node simply running meteor npm install sharp from the project's root wouldn't be enough. So you need to run that command from inside the meteor project directory, which isn't the project's root folder but instead the api folder. That's why I had to put symlinks to package.json and package-lock.json into the api folder: to be able to install packages from there. Running meteor npm install sharp from the api folder should be enough to tell npm that the version of node you want to compile against is the one used by the project's Meteor version. Unfortunately it doesn't work as expected, at least on my system.
You want to keep things simple? Just use the same version of node used internally by the project meteor version. So if the project uses Meteor 1.6 just use node 8 and be happy with a simple npm install sharp.

@airstep
Copy link
Author

airstep commented Nov 8, 2017

But I use node v8.8.1
Or you mean exactly some version (8.0.0)?

@darkbasic
Copy link
Collaborator

Should work fine (it does for me).

@airstep
Copy link
Author

airstep commented Nov 9, 2017

But I have this error:

Error: ./node_modules/sharp/build/Release/sharp.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/sharp/lib/constructor.js 9:14-52
 @ ./node_modules/sharp/lib/index.js
 @ ./src/api/server/collections/pictures.ts
 @ ./src/api/server/collections/index.ts
 @ ./src/pages/chats/chats.ts
 @ ./src/app/app.module.ts
 @ ./src/app/app.module.ngfactory.ts
 @ ./src/app/main.ts
    at new BuildError (/home/taras/work/personal/ionic/Ionic2CLI-Meteor-WhatsApp-prod/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at callback (/home/taras/work/personal/ionic/Ionic2CLI-Meteor-WhatsApp-prod/node_modules/@ionic/app-scripts/dist/webpack.js:123:28)
    at emitRecords.err (/home/taras/work/personal/ionic/Ionic2CLI-Meteor-WhatsApp-prod/node_modules/webpack/lib/Compiler.js:269:13)
    at Compiler.emitRecords (/home/taras/work/personal/ionic/Ionic2CLI-Meteor-WhatsApp-prod/node_modules/webpack/lib/Compiler.js:375:38)
    at emitAssets.err (/home/taras/work/personal/ionic/Ionic2CLI-Meteor-WhatsApp-prod/node_modules/webpack/lib/Compiler.js:262:10)
    at applyPluginsAsyncSeries1.err (/home/taras/work/personal/ionic/Ionic2CLI-Meteor-WhatsApp-prod/node_modules/webpack/lib/Compiler.js:368:12)
    at next (/home/taras/work/personal/ionic/Ionic2CLI-Meteor-WhatsApp-prod/node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.compiler.plugin (/home/taras/work/personal/ionic/Ionic2CLI-Meteor-WhatsApp-prod/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/home/taras/work/personal/ionic/Ionic2CLI-Meteor-WhatsApp-prod/node_modules/tapable/lib/Tapable.js:222:13)
    at Compiler.afterEmit (/home/taras/work/personal/ionic/Ionic2CLI-Meteor-WhatsApp-prod/node_modules/webpack/lib/Compiler.js:365:9)

And look how @ ./src/pages/chats/chats.ts in dependence of sharp (why?)

But I found that: "Please remember that sharp will not work in a browser; it requires the Node runtime."

And error is unclear to me what it does mean "Module parse failed: Unexpected character '�' (1:0)"

Character like in screen shot attached

2017_11_09_10 24 24

@iLGunners
Copy link

hello @darkbasic, the differences between your example and my project seem to be only webpack.config.js, other aspects seem to be similar.

webpack config differences;

  • my webpack.config.js does not have separate devConfig and prodConfig, mine exports only one config.

  • a. is 2 different configurations essential for production build?

  • b. if I have 2 different configurations in webpack, does ionic need to be configured to handle 2 different configurations in any other file?

  • these 2 imports are extra in your webpack.config.js;

var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
var PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;
  • c. I need study about these 2 imports and their purpose.

  • yours has optimizedProdLoaders which mine doesn't, d. what is optimizedProdLoaders doing?

  • yours has an extra plugin. In devConfig it's ionicWebpackFactory.getCommonChunksPlugin(), and in prodConfig those are;

ionicWebpackFactory.getCommonChunksPlugin(),
new ModuleConcatPlugin(),
new PurifyPlugin()
  • d. could you kindly tell me what these plugins are for?

our project environment;

$ meteor --version
Meteor 1.6                                    
$ npm --version
3.10.10
$ node --version
v6.11.5
$ ionic info

cli packages: (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules)

    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.0.1
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.5.0

System:

    Android SDK Tools : 25.2.5
    Node              : v6.11.5
    OS                : Linux 4.10
    npm               : 3.10.10 

@darkbasic
Copy link
Collaborator

Yuor webpack config comes from an old version of Ionic. Every now and then they update it and make it better. Mine is from the latest (or at least it was the latest one month ago) version of Ionic.
You can find it in node_modules/@ionic/app-scripts/config/webpack.config.js, while my latest patch against it is here: e50053b

@darkbasic
Copy link
Collaborator

Ionic shouldn't be used with ejected webpack.config.js, because otherwise you'll have to manually update it. Unfortunately since we need externals resolvers we have no choice in that regard.

@airstep
Copy link
Author

airstep commented Nov 9, 2017

@darkbasic What you think about sharp module again?

@iLGunners
Copy link

@darkbasic, okay. I have modified my webpack config according to that found in the mentioned dir. Prod build is still failing.

default webpack config from node_modules/@ionic/app-scripts/config/webpack.config.js;

var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);

var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');

var prodPlugins = [];
if (process.env.IONIC_ENV === 'prod') {
  prodPlugins.push(new ModuleConcatPlugin());
}

module.exports = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: '[name].js',
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,

  resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')]
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.ts$/,
        loader: process.env.IONIC_WEBPACK_LOADER
      },
      {
        test: /\.js$/,
        loader: process.env.IONIC_WEBPACK_TRANSPILE_LOADER
      }
    ]
  },

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    ionicWebpackFactory.getCommonChunksPlugin(),
  ].concat(prodPlugins),

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

my current webpack config;

var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);

var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');

var prodPlugins = [];
if (process.env.IONIC_ENV === 'prod') {
  prodPlugins.push(new ModuleConcatPlugin());
}

module.exports = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: '[name].js',
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,
 
  resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')],
    alias: {
      'api': path.resolve(__dirname, 'src/api/server')
    }
  },

  externals: [
    resolveExternals
  ],
 
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.ts$/,
        loader: process.env.IONIC_WEBPACK_LOADER
      },
      {
        test: /\.js$/,
        loader: process.env.IONIC_WEBPACK_TRANSPILE_LOADER
      }
    ]
  },

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    ionicWebpackFactory.getCommonChunksPlugin(),
    new webpack.ProvidePlugin({
      __extends: 'typescript-extends'
    })
  ].concat(prodPlugins),
 
  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    __dirname: true
  }
};

function resolveExternals(context, request, callback) {
  return resolveMeteor(request, callback) ||
    callback();
}
 
function resolveMeteor(request, callback) {
  var match = request.match(/^meteor\/(.+)$/);
  var pack = match && match[1];
 
  if (pack) {
    callback(null, 'Package["' + pack + '"]');
    return true;
  }
}

@darkbasic
Copy link
Collaborator

darkbasic commented Nov 9, 2017

What you think about sharp module again?

I'm sorry but I cannot help you. The fact that sharp works on my end makes everything more difficult to debug.
Did you try to completely wipe out node_modules and simply run npm install?

okay. I have modified my webpack config according to that found in the mentioned dir. Prod build is still failing.

I fear you'll have to figure out what's the difference between the tarball I attached and your project.
It works in my tarball so there must be something else in your project which breaks --prod.
Does it work with --aot instead of --prod?

@iLGunners
Copy link

Does it work with --aot instead of --prod?

@darkbasic No, it doesn't;

$ ionic cordova build android --aot
Running app-scripts build: --build --aot --iscordovaserve --nobrowser

[20:59:05]  build dev started ... 
[20:59:05]  clean started ... 
[20:59:05]  clean finished in 7 ms 
[20:59:05]  copy started ... 
[20:59:05]  ngc started ... 
[20:59:15]  ngc finished in 10.27 s 
[20:59:15]  preprocess started ... 
[20:59:15]  deeplinks started ... 
[20:59:16]  deeplinks finished in 679 ms 
[20:59:16]  preprocess finished in 680 ms 
[20:59:16]  webpack started ... 
[20:59:16]  copy finished in 11.25 s 
[WARN] Error occurred during command execution from a CLI plugin (@ionic/cli-plugin-cordova).
Error: ./src/api/server/collections/index.ts
Module build failed: Error: ENOENT: no such file or directory, open '/home/noshu/code/ptc-gps/nexxdeli-mobile/src/api/server/collections/index.js'
    at Error (native)
 @ ./src/components/single-product/single-product.component.ts 7:20-46
 @ ./src/components/single-product/single-product.component.ngfactory.ts
 @ ./src/app/app.module.ngfactory.ts
 @ ./src/app/main.ts

@airstep
Copy link
Author

airstep commented Nov 10, 2017

Did you try to completely wipe out node_modules and simply run npm install?

exactly

@iLGunners
Copy link

@darkbasic, from below error it seems src/api/server/collections/index.js is not being generated,

  • could this be the reason build is failing?

error;

$ ionic cordova build android --aot
Running app-scripts build: --aot --platform android --target cordova
[20:29:06]  build dev started ... 
[20:29:06]  clean started ... 
[20:29:06]  clean finished in 5 ms 
[20:29:06]  copy started ... 
[20:29:06]  ngc started ... 
[20:29:17]  ngc finished in 10.17 s 
[20:29:17]  preprocess started ... 
[20:29:17]  deeplinks started ... 
[20:29:17]  deeplinks finished in 729 ms 
[20:29:17]  preprocess finished in 730 ms 
[20:29:17]  webpack started ... 
[20:29:18]  copy finished in 11.26 s 
Error: ./src/api/server/collections/index.ts
Module build failed: Error: ENOENT: no such file or directory, open '/home/noshu/code/ptc-gps/nexxdeli-mobile/src/api/server/collections/index.js'
    at Error (native)
 @ ./src/components/single-product/single-product.component.ts 7:20-46
 @ ./src/components/single-product/single-product.component.ngfactory.ts
 @ ./src/app/app.module.ngfactory.ts
 @ ./src/app/main.ts
    at BuildError.Error (native)
    at new BuildError (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at callback (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/@ionic/app-scripts/dist/webpack.js:119:28)
    at emitRecords.err (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/webpack/lib/Compiler.js:269:13)
    at Compiler.emitRecords (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/webpack/lib/Compiler.js:375:38)
    at emitAssets.err (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/webpack/lib/Compiler.js:262:10)
    at applyPluginsAsyncSeries1.err (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/webpack/lib/Compiler.js:368:12)
    at next (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.compiler.plugin (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/home/noshu/code/ptc-gps/nexxdeli-mobile/node_modules/tapable/lib/Tapable.js:222:13)

environment;

$ meteor --version
Meteor 1.6                                    
$ ionic info

cli packages: (/usr/lib/node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 2.0.1
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.5.0

System:

    Android SDK Tools : 25.2.5
    Node              : v6.11.5
    npm               : 3.10.10 
    OS                : Linux 4.10

Environment Variables:

    ANDROID_HOME : /home/noshu/Android/Sdk

Misc:

    backend : legacy

webpack config;

var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);

var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');

var prodPlugins = [];
if (process.env.IONIC_ENV === 'prod') {
  prodPlugins.push(new ModuleConcatPlugin());
}

module.exports = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: '[name].js',
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,
 
  resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')],
    alias: {
      'api': path.resolve(__dirname, 'src/api/server')
    }
  },

  externals: [
    resolveExternals
  ],
 
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.ts$/,
        loader: process.env.IONIC_WEBPACK_LOADER
      },
      {
        test: /\.js$/,
        loader: process.env.IONIC_WEBPACK_TRANSPILE_LOADER
      }
    ]
  },

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    ionicWebpackFactory.getCommonChunksPlugin(),
    new webpack.ProvidePlugin({
      __extends: 'typescript-extends'
    })
  ].concat(prodPlugins),
 
  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    __dirname: true
  }
};

function resolveExternals(context, request, callback) {
  return resolveMeteor(request, callback) ||
    callback();
}
 
function resolveMeteor(request, callback) {
  var match = request.match(/^meteor\/(.+)$/);
  var pack = match && match[1];
 
  if (pack) {
    callback(null, 'Package["' + pack + '"]');
    return true;
  }
}

note;

  • a simple console.log at the start of webpack.config.js did't execute, does that mean that the file is not being read?

@airstep
Copy link
Author

airstep commented Nov 10, 2017

For sharp module - fixed like this (webpack.config.js)

externals: [ { sharp: '{}', }, resolveExternals ]

@airstep
Copy link
Author

airstep commented Nov 11, 2017

It completle works for me now with --prod flag!

Many thanks to @darkbasic !

My working version in attach for others
Ionic2CLI-Meteor-WhatsApp-prod.zip

@airstep airstep closed this as completed Nov 11, 2017
@darkbasic
Copy link
Collaborator

You're welcome. I'll keep it open so other people will found it until it's fixed in the tutorial.

@darkbasic darkbasic reopened this Nov 11, 2017
@iLGunners
Copy link

hello @darkbasic & @airstep,

  • my system Node version (v6.11.5) and Meteor 1.6 are clearly different, could this be the reason of my errors persisting?

also,

  • from my error it seems src/api/server/collections/index.js is not being generated, could this be the reason build is failing?

  • a simple console.log at the start of webpack.config.js did't execute, does that mean that the file is not being read?

environment;

$ meteor --version
Meteor 1.6                                    
$ ionic info

cli packages: (/usr/lib/node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 2.0.1
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.5.0

System:

    Android SDK Tools : 25.2.5
    Node              : v6.11.5
    npm               : 3.10.10 
    OS                : Linux 4.10

Environment Variables:

    ANDROID_HOME : /home/noshu/Android/Sdk

Misc:

    backend : legacy

@darkbasic
Copy link
Collaborator

darkbasic commented Nov 13, 2017

a simple console.log at the start of webpack.config.js did't execute, does that mean that the file is not being read?

Yes, it isn't executed.

@iLGunners
Copy link

@darkbasic , Can the app-scripts build steps be used to troubleshoot?

  • your provided working example is hitting below steps;
Running app-scripts build: --prod --platform android --target cordova
[17:41:43]  build prod started ... 
[17:41:43]  clean started ... 
[17:41:43]  clean finished in 2 ms 
[17:41:43]  copy started ... 
[17:41:43]  deeplinks started ... 
[17:41:43]  deeplinks finished in 21 ms 
[17:41:43]  ngc started ... 
[17:41:46]  copy finished in 2.44 s 
[17:41:49]  ngc finished in 5.26 s 
[17:41:49]  preprocess started ... 
[17:41:49]  preprocess finished in 226 ms 
[17:41:49]  webpack started ... 
printing from webpack.config.js
[17:42:30]  webpack finished in 41.43 s 
[17:42:30]  uglifyjs started ... 
[17:42:30]  sass started ... 
[17:42:32]  sass finished in 1.71 s 
[17:42:32]  cleancss started ... 
[17:42:40]  cleancss finished in 8.51 s 
[17:42:58]  uglifyjs finished in 27.87 s 
[17:42:58]  postprocess started ... 
[17:42:58]  postprocess finished in 105 ms 
[17:42:58]  lint started ... 
[17:42:58]  build prod finished in 75.03 s 
> cordova build android
  • mine are hitting these before error;
Running app-scripts build: --prod --platform android --target cordova
[17:33:57]  build prod started ... 
[17:33:57]  clean started ... 
[17:33:57]  clean finished in 9 ms 
[17:33:57]  copy started ... 
[17:33:57]  ngc started ... 
[17:34:06]  ngc finished in 8.59 s 
[17:34:06]  preprocess started ... 
[17:34:06]  deeplinks started ... 
[17:34:06]  deeplinks finished in 495 ms 
[17:34:06]  optimization started ... 
[17:34:06]  copy finished in 9.44 s 
Error: ./src/components/product-categories/product-categories.component.js

note;

  • it seems in my case the processes preprocess started ... and optimization started ... never Finish

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants
@darkbasic @carlos-olivera @airstep @iLGunners @sigalor and others