Ionic CLI 4 error building for production

#1

After upgrade ionic to version 4 I cannot build my project for production anymore. I’d recreate my project from scracth and import the source code but it didn’t work. The commands “ionic serve” and “ionic cordova build android” works but the “ionic cordova build android --prod” does not work. The error is below.

Ionic info

Ionic:

ionic (Ionic CLI) : 4.0.1 (C:\Users\flavi\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.11

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0

System:

Android SDK Tools : 26.1.1
NodeJS : v8.9.4 (C:\Program Files\nodejs\node.exe)
npm : 6.2.0
OS : Windows 10

Environment:

ANDROID_HOME : D:\Dev\Android\Android-sdk

The error message

ionic cordova build android --prod

ionic-app-scripts build --prod --platform android
[00:53:15] ionic-app-scripts 3.1.11
[00:53:15] build prod started …
[00:53:15] clean started …
[00:53:15] clean finished in 5 ms
[00:53:15] copy started …
[00:53:15] deeplinks started …
[00:53:16] deeplinks finished in 759 ms
[00:53:16] ngc started …
[00:53:27] typescript error
Cannot determine the module for class OverlayPortal in
D:/Dev/Applaus/workspace/fronteend/applaus/node_modules/ionic-angular/umd/components/app/overlay-portal.d.ts!
Add OverlayPortal to the NgModule to fix it. Cannot determine the module for class IonicApp in
D:/Dev/Applaus/workspace/fronteend/applaus/node_modules/ionic-angular/umd/components/app/app-root.d.ts! Add
IonicApp to the NgModule to fix it. Cannot determine the module for class ClickBlock in
D:/Dev/Applaus/workspace/fronteend/applaus/node_modules/ionic-angular/umd/components/app/click-block.d.ts!
Add ClickBlock to the NgModule to fix it. Cannot determine the module for class HomePage in
D:/Dev/Applaus/workspace/fronteend/applaus/src/pages/home/home.ts! Add HomePage to the NgModule to fix it.

[00:53:27] ionic-app-script task: “build”
[00:53:27] Error: The Angular AoT build failed. See the issues above
Error: The Angular AoT build failed. See the issues above
at D:\Dev\Applaus\workspace\fronteend\applaus\node_modules@ionic\app-scripts\dist\aot\aot-compiler.js:237:55
at step (D:\Dev\Applaus\workspace\fronteend\applaus\node_modules@ionic\app-scripts\dist\aot\aot-compiler.js:32:23)
at Object.next (D:\Dev\Applaus\workspace\fronteend\applaus\node_modules@ionic\app-scripts\dist\aot\aot-compiler.js:13:53)
at fulfilled (D:\Dev\Applaus\workspace\fronteend\applaus\node_modules@ionic\app-scripts\dist\aot\aot-compiler.js:4:58)
at
[ERROR] Command not found: ionic-app-scripts

What can I do?

Thanks
Flavio

#2

You’ve got a mix of errors so probably many errors to solve

This one makes me think you didn’t properly migrate your project. Ionic v3 use ionic-app-scripts but Ionic v4 use the Angular CLI to compile respectively no more app script

@joshmorony wrote a nice proposal tutorial about how to cleanly migrate a project https://www.joshmorony.com/my-method-for-upgrading-from-ionic-3-to-ionic-4/

then

it seems that there isn’t any OverlayPortal in Ionic v4, at least when I try to find that reference across their repo I found nothing. Have you migrated your code as displayed in the breaking changes (https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md) list and in the migration (https://beta.ionicframework.com/docs/building/migration) section of the documentation?

1 Like