Ionic build freezes after copy finished in


#1

“ionic cordova build android --prod --release” doesn’t proceed after “copy finished in…”

Upto firebase auth integration was ok, but after that when I get success to add data to the firebase, then build doesn’t work.

Home .ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  itemValue = '';
  items: Observable<any[]>;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public aFModule: AngularFireModule,
    public db: AngularFireDatabase
  ) {
    this.items = db.list('list').valueChanges();
  }

  onSubmit() {
    this.db.list('/items/user45453443543b').push({ content: '34ds' });
    this.itemValue = '';
  }

}

Full Source Code here

https://drive.google.com/file/d/1ZO7W_N63yw7oCN26PqKA28uTxOx-Mcgp/view?usp=sharing

Tried1:
“ionic build --aot --minifyjs --minifycss --optimizejs”
Result: not resolved (doesn’t proceed after “copy finished in…”)

Tried2:
uninstall and reinstall rxjs
Result: not resolved.

About my Platform:
$ ionic info:
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:
cordova (Cordova CLI) : not installed

local packages:
@ionic/app-scripts : 3.1.11
Cordova Platforms : none
Ionic Framework : ionic-angular 3.9.2

System:
Android SDK Tools : 26.1.1
Node : v8.11.3
npm : 5.6.0
OS : Windows 8.1

Again, Full Source Code here
[edit]
Source code with package.json https://drive.google.com/open?id=1HV2uV0phxSOtNes1vhAqTxLz-3J86dBr


#2

Hi @amin9, try doing the following:

  1. Delete the folders node_modules, platforms and plugins.
  2. Replace your package.json with:
{
  "name": "ionic-conference-app",
  "version": "0.0.0",
  "description": "Ionic Conference App",
  "license": "Apache-2.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/ionic-team/ionic-conference-app.git"
  },
  "scripts": {
    "build": "ionic build",
    "serve": "ionic build",
    "start": "npm run serve"
  },
  "dependencies": {
    "@angular/common": "6.0.3",
    "@angular/compiler": "6.0.3",
    "@angular/compiler-cli": "6.0.3",
    "@angular/core": "6.0.3",
    "@angular/forms": "6.0.3",
    "@angular/http": "6.0.3",
    "@angular/platform-browser": "6.0.3",
    "@angular/platform-browser-dynamic": "6.0.3",
    "@ionic-native/core": "^4.3.1",
    "@ionic-native/in-app-browser": "^4.3.1",
    "@ionic-native/splash-screen": "^4.3.1",
    "@ionic-native/status-bar": "^4.3.1",
    "@ionic/storage": "2.1.3",
    "angularfire2": "5.0.0-rc.10",
    "cordova-android": "^6.2.3",
    "cordova-ios": "^4.5.2",
    "cordova-plugin-device": "^1.1.6",
    "cordova-plugin-inappbrowser": "^1.7.1",
    "cordova-plugin-ionic-keyboard": "^2.0.2",
    "cordova-plugin-ionic-webview": "^1.1.15",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.3",
    "cordova-plugin-whitelist": "^1.3.2",
    "firebase": "5.0.4",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "6.2.0",
    "rxjs-compat": "6.2.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@firebase/database": "0.2.1",
    "@ionic/app-scripts": "3.1.10",
    "typescript": "2.7.2"
  },
  "config": {
    "ionic_aot_write_to_disk": true
  },
  "cordova": {
    "platforms": [
      "android",
      "ios"
    ],
    "plugins": {
      "cordova-plugin-device": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-ionic-keyboard": {}
    }
  }
}
  1. Run npm i
  2. Run ionic cordova platform add android
  3. Run ionic cordova build android --prod --release

I had to remove the crosswalk plugin, because it was giving me an error.

Every time you add the prod flag the build takes longer than without it, so be patient. Build time: build prod finished in 135.72 s


#3

I do not believe ionic v3 supports angular v6, so I would be wary of the advice in the previous post.


#4

Thank you @rapropos :worried:

Thank you @juanfsemaan
After follow your instructions, I got this error:
err2

D:\a4\201-try\try3d>ionic cordova build android --prod --release
Running app-scripts build: --prod --platform android --target cordova
[20:15:35]  build prod started ...
[20:15:35]  clean started ...
[20:15:35]  clean finished in 2 ms
[20:15:35]  copy started ...
[20:15:35]  deeplinks started ...
[20:15:35]  deeplinks finished in 22 ms
[20:15:35]  ngc started ...
[20:15:45]  ngc finished in 9.52 s
[20:15:45]  preprocess started ...
[20:15:45]  preprocess finished in 1 ms
[20:15:45]  webpack started ...
[20:15:45]  copy finished in 10.03 s
Error: ./node_modules/firebase/auth/dist/index.esm.js
Module not found: Error: Can't resolve '@firebase/auth' in 'D:\a4\201-try\try3d\
node_modules\firebase\auth\dist'
resolve '@firebase/auth' in 'D:\a4\201-try\try3d\node_modules\firebase\auth\dist
'
  Parsed request is a module
  using description file: D:\a4\201-try\try3d\node_modules\firebase\auth\package
.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\a4\201-try\try3d\node_modules\firebase\auth\p
ackage.json (relative path: ./dist)
    resolve as module
      looking for modules in D:\a4\201-try\try3d\node_modules
        using description file: D:\a4\201-try\try3d\package.json (relative path:
 ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\a4\201-try\try3d\package.json (relative
 path: ./node_modules)
          using description file: D:\a4\201-try\try3d\package.json (relative pat
h: ./node_modules/@firebase/auth)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\a4\201-try\try3d\node_modules\@firebase\auth doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\a4\201-try\try3d\node_modules\@firebase\auth.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\a4\201-try\try3d\node_modules\@firebase\auth.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              D:\a4\201-try\try3d\node_modules\@firebase\auth.json doesn't exist

            as directory
              D:\a4\201-try\try3d\node_modules\@firebase\auth doesn't exist
[D:\a4\201-try\try3d\node_modules\@firebase\auth]
[D:\a4\201-try\try3d\node_modules\@firebase\auth.ts]
[D:\a4\201-try\try3d\node_modules\@firebase\auth.js]
[D:\a4\201-try\try3d\node_modules\@firebase\auth.json]
[D:\a4\201-try\try3d\node_modules\@firebase\auth]
 @ ./node_modules/firebase/auth/dist/index.esm.js 1:0-24
 @ ./node_modules/angularfire2/auth/auth.module.js
 @ ./node_modules/angularfire2/auth/public_api.js
 @ ./node_modules/angularfire2/auth/index.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/app/main.ts
    at new BuildError (D:\a4\201-try\try3d\node_modules\@ionic\app-scripts\dist\
util\errors.js:16:28)
    at callback (D:\a4\201-try\try3d\node_modules\@ionic\app-scripts\dist\webpac
k.js:121:28)
    at emitRecords.err (D:\a4\201-try\try3d\node_modules\webpack\lib\Compiler.js
:269:13)
    at Compiler.emitRecords (D:\a4\201-try\try3d\node_modules\webpack\lib\Compil
er.js:375:38)
    at emitAssets.err (D:\a4\201-try\try3d\node_modules\webpack\lib\Compiler.js:
262:10)
    at applyPluginsAsyncSeries1.err (D:\a4\201-try\try3d\node_modules\webpack\li
b\Compiler.js:368:12)
    at next (D:\a4\201-try\try3d\node_modules\tapable\lib\Tapable.js:218:11)
    at Compiler.compiler.plugin (D:\a4\201-try\try3d\node_modules\webpack\lib\pe
rformance\SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (D:\a4\201-try\try3d\node_modules\tapab
le\lib\Tapable.js:222:13)
    at Compiler.afterEmit (D:\a4\201-try\try3d\node_modules\webpack\lib\Compiler
.js:365:9)

D:\a4\201-try\try3d>

#5

could you make a github repo with your project?


#6

Finally I was able to create the repo.
Here it is: https://github.com/amin2009/Playing-w-Conference


#7

here is a fork of your repo with some fixes, for you to try. It worked fine on my machine.


#8

:smiley::smiley: Awesome. :heart_eyes::heart_eyes:

  • If I could ask my question this way before, I could save 7 to 10 days possibly. Anyway.
  • So, how could I know all these? Can you get me any hint about learning these, so I can manage this type of issue myself.

#9

With practice you will get an idea of were the problem might be. Most of the times when you get an error, the terminal will give you a good hint were the problem is. If you don’t understand the problem, google it. There is a good chance some else had the same issue. If you really like ionic + angularfire, I recommend the following resources:

  1. https://angularfirebase.com/`,
  2. https://javebratt.com/tutorials/ionic-firebase/

Most repositories have a file named changelog, here you can see the changes the developers have made from version to version. Angularfire2 is still in beta, so check the repo frequently and check for updates, so you can have your app with the latest stable version. If you are having problems with angularfire2, check the issues tab in the repo and look for your error there.

Happy coding :grinning: