ionic-team / ionic-team/ionic-cli
"ionic build --prod" throws several code errors that don't show up in regular builds
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 682
- PR merge metrics
- No merged PRs in 30d
Description
**Description:**
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 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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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
~~~~~~~~~~~~~~~~~~~~~~~~~
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
~~~~~~~~~~~~~~~~~~~
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
~~~~~~~~~~~~~~~~~~~~~~~~~~~
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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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
~~~~~~~~~~~~~~~
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
~~~~~~~~~~~
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
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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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
~~~~~~~~~~~~~~~~~~
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
~~~~~~~~~
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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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'.
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.
50
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:18:16
18 templateUrl: 'app.component.html',
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
0mError: src/app/app.component.html:52: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.
52
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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:52: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.
52
~~~~~~~~~~~~~~~
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:53: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.
53
~~~~~~~~~~~
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:59: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.
59
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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:60: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.
60
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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:60: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.
60
~~~~~~~~~~~~~~~~~~~~~
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:61: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.
61
~~~~~~~~~~~
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:69:5 - error NG8001: 'ion-router-outlet' is not a known element:
1. If 'ion-router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'ion-router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
69
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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:8:1 - error NG8001: 'ion-app' is not a known element:
1. If 'ion-app' is an Angular component, then verify that it is part of this module.
2. If 'ion-app' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
8
~~~~~~~~~~~~~~~~~~~~~~~~~~~
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:9:3 - error NG8001: 'ion-split-pane' is not a known element:
1. If 'ion-split-pane' is an Angular component, then verify that it is part of this module.
2. If 'ion-split-pane' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
9
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.component.ts:18:16
18 templateUrl: 'app.component.html',
~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
Error: src/app/event-creation/event-creation.component.html:161:26 - error TS2339: Property 'promptResetPoly' does not exist on type 'EventCreationComponent'.
161
~~~~~~~~~~~~~~~
src/app/event-creation/event-creation.component.ts:21:16
21 templateUrl: './event-creation.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component EventCreationComponent.
Error: src/app/forgotten-pw/forgotten-pw.component.html:13:10 - error TS2339: Property 'response' does not exist on type 'ForgottenPwComponent'.
13 {{ response }}
~~~~~~~~
src/app/forgotten-pw/forgotten-pw.component.ts:7:16
7 templateUrl: './forgotten-pw.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ForgottenPwComponent.
Error: src/components/entities-list/entities-list.component.html:16:54 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
16 {{ mapEntity?.get("description") | limitTo : 180 }}
~~~
src/components/entities-list/entities-list.component.ts:7:16
7 templateUrl: './entities-list.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component EntitiesListComponent.
Error: src/components/entities-list/entities-list.component.html:4:47 - error TS2341: Property 'iconGetter' is private and only accessible within class 'EntitiesListComponent'.
4
~~~~~~~~~~
src/components/entities-list/entities-list.component.ts:7:16
7 templateUrl: './entities-list.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component EntitiesListComponent.
Error: src/components/training-control/training-control.component.html:12:50 - error TS2339: Property 'start' does not exist on type 'Training'.
12
~~~~~
src/components/training-control/training-control.component.ts:10:16
10 templateUrl: './training-control.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component TrainingControlComponent.
Error: src/components/training-control/training-control.component.html:56:74 - error TS2339: Property 'step' does not exist on type 'TrainingControlComponent'.
56 Volver
~~~~
msrc/components/training-control/training-control.component.ts:10:16
10 templateUrl: './training-control.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component TrainingControlComponent.
[ERROR] An error occurred while running subprocess ng.
ng.cmd run app:build:production exited with exit code 1.
`
```
**My `ionic info`:**
`Ionic:
Ionic CLI : 6.11.1 (C:\Users\zerok\AppData\Roaming\npm\node_modules\@ionic\cli)
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 Files\nodejs\node.exe)
npm : 6.14.11
OS : Windows 10`
Contributor guide
Assessment
This issue has not been assessed yet.