Unable to make a production (–prod) build in Ionic

  angular, ionic-framework, typescript

I have an Ionic app that is already almost done. Until now, I’ve been testing it with the regular ionic build method, and then using Capacitor to make an APK to test. That works well, just as the app does in the navigator, when developing it.

But when I try to use the –prod flag to optimize my code, I receive a huge amount of template errors that don’t allow me to compile the code. Needless to say, these errors never show up on regular builds.

Steps to Reproduce:
Having a normally working version (both for Android and web), try to build a production version with ionic build –prod.

Output:
Here you have a part of my output. You can see it mainly affects the templates:

`

Error: src/app/app.component.html:10:5 – error NG8001: ‘ion-menu’ is
not a known element:

  1. If ‘ion-menu’ is an Angular component, then verify that it is part of this module.
  2. If ‘ion-menu’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

10 <ion-menu side="start" menuId="first" contentId="main"
[disabled]="userTraining" [maxEdgeStart]="15">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:18:16
18 templateUrl: 'app.component.html',
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:10:60 – error NG8002: Can’t bind to
‘disabled’ since it isn’t a known property of ‘ion-menu’.

  1. If ‘ion-menu’ is an Angular component and it has ‘disabled’ input, then verify that it is part of this module.
  2. If ‘ion-menu’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.

10 <ion-menu side="start" menuId="first" contentId="main"
[disabled]="userTraining" [maxEdgeStart]="15">
~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:18:16
18 templateUrl: 'app.component.html',
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:10:86 – error NG8002: Can’t bind to
‘maxEdgeStart’ since it isn’t a known property of ‘ion-menu’.

  1. If ‘ion-menu’ is an Angular component and it has ‘maxEdgeStart’ input, then verify that it is part of this module.
  2. If ‘ion-menu’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.

10 <ion-menu side="start" menuId="first" contentId="main"
[disabled]="userTraining" [maxEdgeStart]="15">
~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:18:16
18 templateUrl: 'app.component.html',
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:11:7 – error NG8001: ‘ion-header’ is
not a known element: m1. If ‘ion-header’ is an Angular component, then
verify that it is part of this module.
2. If ‘ion-header’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component
to suppress this message.

11
~~~~~~~~~~~~
src/app/app.component.ts:18:16
18 templateUrl: 'app.component.html',
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:12:9 – error NG8001: ‘ion-toolbar’
is not a known element:

  1. If ‘ion-toolbar’ is an Angular component, then verify that it is part of this module.
  2. If ‘ion-toolbar’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component
    to suppress this message.

12
~~~~~~~~~~~~~
src/app/app.component.ts:18:16
18 templateUrl: 'app.component.html',
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:13:11 – error NG8001: ‘ion-title’ is
not a known element:

  1. If ‘ion-title’ is an Angular component, then verify that it is part of this module.
  2. If ‘ion-title’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

13 Dromous App
~~~~~~~~~~~
src/app/app.component.ts:18:16
18 templateUrl: 'app.component.html',
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:16:7 – error NG8001: ‘ion-content’
is not a known element:

  1. If ‘ion-content’ is an Angular component, then verify that it is part of this module.
  2. If ‘ion-content’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component
    to suppress this message.

16
~~~~~~~~~~~~~
src/app/app.component.ts:18:16
18 templateUrl: 'app.component.html',
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:17:9 – error NG8001: ‘ion-list’ is
not a known element:

  1. If ‘ion-list’ is an Angular component, then verify that it is part of this module.
  2. If ‘ion-list’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

17 <ion-list *ngIf="!userRef">
~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:18:16
18 templateUrl: 'app.component.html',
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:18:11 – error NG8001: ‘ion-item’ is
not a known element:

  1. If ‘ion-item’ is an Angular component, then verify that it is part of this module.
  2. If ‘ion-item’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

18 <ion-item *ngFor="let p of appPages"
[routerDirection]="’root’" [routerLink]="[p.url]"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
19 [queryParams]="p?.parameters ? p.parameters : null"></p>
<pre><code>
src/app/app.component.ts:18:16
18 templateUrl: 'app.component.html',
96m ~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:18:48 – error NG8002: Can’t bind to
‘routerDirection’ since it isn’t a known property of ‘ion-item’.
1. If ‘ion-item’ is an Angular component and it has ‘routerDirection’ input, then verify that it is part of this module.
2. If ‘ion-item’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.

18 <ion-item *ngFor="let p of appPages"
[routerDirection]="’root’" [routerLink]="[p.url]"
~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:18:75 – error NG8002: Can’t bind to
‘routerLink’ since it isn’t a known property of ‘ion-item’.
1. If ‘ion-item’ is an Angular component and it has ‘routerLink’ input, then verify that it is part of this module.
2. If ‘ion-item’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this
message.9m
3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.

18 <ion-item *ngFor="let p of appPages"
[routerDirection]="’root’" [routerLink]="[p.url]"
~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:19:15 – error NG8002: Can’t bind to
‘queryParams’ since it isn’t a known property of ‘ion-item’.
1. If ‘ion-item’ is an Angular component and it has ‘queryParams’ input, then verify that it is part of this module.
2. If ‘ion-item’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.

19 [queryParams]="p?.parameters ? p.parameters : null">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:20:15 – error NG8001: ‘ion-icon’ is
not a known element:
1. If ‘ion-icon’ is an Angular component, then verify that it is part of this module.
2. If ‘ion-icon’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

20 <ion-icon slot="start" [name]="p.icon"
[style.color]="’#00c1ff’"></ion-icon>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:20:38 – error NG8002: Can’t bind to
‘name’ since it isn’t a known property of ‘ion-icon’.
1. If ‘ion-icon’ is an Angular component and it has ‘name’ input, then verify that it is part of this module.
2. If ‘ion-icon’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.

20 <ion-icon slot="start" [name]="p.icon"
[style.color]="’#00c1ff’"></ion-icon>
~~~~~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:21:15 – error NG8001: ‘ion-label’ is
not a known element:
1. If ‘ion-label’ is an Angular component, then verify that it is part of this module.
2. If ‘ion-label’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

21 <ion-label>
~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:26:9 – error NG8001: ‘ion-list’ is
not a known element:
1. If ‘ion-list’ is an Angular component, then verify that it is part of this module.
2. If ‘ion-list’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

26 <ion-list *ngIf="userRef"> m
~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: 'app.component.html',
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:27:11 – error NG8001:
‘ion-menu-toggle’ is not a known element:
1. If ‘ion-menu-toggle’ is an Angular component, then verify that it is part of this module.
2. If ‘ion-menu-toggle’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component
to suppress this message.

27 <ion-menu-toggle auto-hide="false">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:28:13 – error NG8001: ‘ion-row’ is
not a known element:
1. If ‘ion-row’ is an Angular component, then verify that it is part of this module.
2. If ‘ion-row’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

m28 <ion-row class="menu-profile"
[routerDirection]="’root’" [routerLink]="’/user-profile’"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
29 [queryParams]="{user_id: userRef?.id}">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: 'app.component.html',
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:28:43 – error NG8002: Can’t bind to
‘routerDirection’ since it isn’t a known property of ‘ion-row’.
1. If ‘ion-row’ is an Angular component and it has ‘routerDirection’ input, then verify that it is part of this module.
2. If ‘ion-row’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.

28 <ion-row class="menu-profile"
[routerDirection]="’root’" [routerLink]="’/user-profile’"
~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:28:70 – error NG8002: Can’t bind to
‘routerLink’ since it isn’t a known property of ‘ion-row’.
1. If ‘ion-row’ is an Angular component and it has ‘routerLink’ input, then verify that it is part of this module.
2. If ‘ion-row’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.

28 <ion-row class="menu-profile"
[routerDirection]="’root’" [routerLink]="’/user-profile’"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:29:15 – error NG8002: Can’t bind to
‘queryParams’ since it isn’t a known property of ‘ion-row’.
1. If ‘ion-row’ is an Angular component and it has ‘queryParams’ input, then verify that it is part of this module.
2. If ‘ion-row’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this
message.[39m
3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.

29 [queryParams]="{user_id: userRef?.id}">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:30:15 – error NG8001: ‘ion-col’ is
not a known element:
1. If ‘ion-col’ is an Angular component, then verify that it is part of this module.
2. If ‘ion-col’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

30 <ion-col size="5">
~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:37:15 – error NG8001: ‘ion-col’ is
not a known element:
1. If ‘ion-col’ is an Angular component, then verify that it is part of this module.
2. If ‘ion-col’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

37 <ion-col>
~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:50:13 – error NG8001: ‘ion-item’ is
not a known element:
1. If ‘ion-item’ is an Angular component, then verify that it is part of this module.
2. If ‘ion-item’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

50 <ion-item *ngFor="let p of appPages"
[routerDirection]="’root’" [routerLink]="[p.url]"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
51 [queryParams]="p?.parameters ? p.parameters : null">

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
Error: src/app/app.component.html:50:50 – error NG8002: Can't bind to
'routerDirection' since it isn't a known property of 'ion-item'.
<ol>
<li>If 'ion-item' is an Angular component and it has 'routerDirection' input, then verify that it is part of this module.</li>
<li>If 'ion-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.</li>
<li>To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.</li>
</ol>
50 <ion-item *ngFor="let p of appPages"
[routerDirection]="'root'" [routerLink]="[p.url]"
~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
Error: src/app/app.component.html:50:77 – error NG8002: Can't bind to
'routerLink' since it isn't a known property of 'ion-item'.
<ol>
<li>If 'ion-item' is an Angular component and it has 'routerLink' input, then verify that it is part of this module.</li>
<li>If 'ion-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.</li>
<li>To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.</li>
</ol>
50 <ion-item *ngFor="let p of appPages"
[routerDirection]="'root'" [routerLink]="[p.url]"
~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:18:16
18 templateUrl: ‘app.component.html’,
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
Error: src/app/app.component.html:51:15 – error NG8002: Can't bind to
'queryParams' since it isn't a known property of 'ion-item'.
<ol>
<li>If 'ion-item' is an Angular component and it has 'queryParams' input, then verify that it is part of this module.</li>
<li>If 'ion-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.</li>
<li>To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.</li>
</ol>
51 [queryParams]="p?.parameters ? p.parameters : null">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

My ionic info:

`Ionic:

Ionic CLI : 6.11.1 (C:[email protected])
Ionic Framework : @ionic/angular 5.5.4
@angular-devkit/build-angular : 0.1101.4
@angular-devkit/schematics : 9.1.9
@angular/cli : 11.1.4
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 2.4.6
@capacitor/core : 2.4.6

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v15.7.0 (C:Program Filesnodejsnode.exe)
npm : 6.14.11
OS : Windows 10`

Source: Angular Questions

One Reply to “Unable to make a production (–prod) build in Ionic”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.