search

ionic-team / ionic-cli

The Ionic command-line interface
MIT License
2k stars 649 forks source link

"ionic build --prod" throws several code errors that don't show up in regular builds #4657

Open Zerokk opened 3 years ago

Zerokk commented 3 years ago

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     <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       <ion-header>
         ~~~~~~~~~~~~

  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         <ion-toolbar>
           ~~~~~~~~~~~~~

  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           <ion-title>Dromous App</ion-title>
             ~~~~~~~~~~~

  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       <ion-content>
         ~~~~~~~~~~~~~

  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">
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  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'.
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             <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'.
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.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

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'.
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.

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.

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               <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: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               <ion-icon slot="start" [name]="p.icon" [style.color]="'#00c1ff'"></ion-icon>
                                        ~~~~~~~~~~~~~~~

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               <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: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             <ion-item (click)="logOut()" style="cursor:pointer">
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  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               <ion-icon slot="start" [name]="'arrow-back'"></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: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               <ion-icon slot="start" [name]="'arrow-back'"></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: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               <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: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     <ion-router-outlet id="main">
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  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 <ion-app *ngIf="appLoaded">
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  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   <ion-split-pane contentId="main">
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  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     <ion-button (click)="promptResetPoly(); page = 0">
                             ~~~~~~~~~~~~~~~

  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     <img item-start style="width:50px" [src]="iconGetter?.getIcon(mapEntity, 'framed')">
                                                ~~~~~~~~~~

  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       <p class="btn-txt center" *ngIf="!training.start && training.status==0">
                                                    ~~~~~

  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       <ion-button class="center" fill="outline" color="primary" (click)="step = 1">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`

Zerokk commented 3 years ago

Bump.

Zerokk commented 3 years ago

A little update:

  1. I fixed the "normal" errors, such as a component property not being public, a property not existing... those are fixed now, but I still have template errors in the file app.component.html, like if Ionic wasn't added to the module (but yes, it's added in every module, in the main one with the .forRoot() method.

  2. There's another weird error in which Angular asks me for a string as parameter to the "limitTo" pipe. The documentation says it needs an integer, and that's what I'm doing, and what works in my app. Why is it finding this as an error?

Please, this is quite urgent, and the app is slow in the dev version. I need the production build ready soon...

Zerokk commented 3 years ago

Also tried reupdating the ionic-cli, creating a new project, moving the code and re-compiling it, aswell adding the CUSTOM_ELEMENTS_SCHEMA in NgModule.schemas. Nothing works.

This is how my main module looks. The comments are parts of the code that are now removed for the beta version:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ComponentsModule,
    FormsModule,
  //  AssistanceCheckerModule,
    // ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    ParseHandlerService,
    StatusBar,
    Geolocation,
    SplashScreen,
    AppStateService,
    SpinnerService,
    IconGetterService,
    ReactiveChannel,
 //   DatePicker,
    ImageResizer
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

EDIT: yes, all the modules have the IonicModule imported, including the ComponentsModule one.

heerenjasper commented 3 years ago

Having the same problem, any updates on this?

sandor-biro commented 3 years ago

I encountered this problem several times - randomly - usually after generating a new component, however the previous -prod builds were successful. Probably it is a build-bug since it happens once in a while :wink:

You probably are trying to open your component/page in a modal window.

If yes: Add YourCustomComponentModule to the imports list of the ParentModule and your problem will disappear :slight_smile:

parent.module.ts → … [ CommonModule, FormsModule, IonicModule, YourCustomComponentModule ] …

Cheers!

ufondu88 commented 3 years ago

@shandree By the gods!! That was the answer!! I was trying to open my component in a modal window and hadn't imported the child module into the parent module. Thank you so much!! I would never have figured this out on my own

IdreesSindi commented 2 years ago

I encountered this problem several times - randomly - usually after generating a new component, however the previous -prod builds were successful. Probably it is a build-bug since it happens once in a while 😉

You probably are trying to open your component/page in a modal window.

If yes: Add YourCustomComponentModule to the imports list of the ParentModule and your problem will disappear :slight_smile:

parent.module.ts → … [ CommonModule, FormsModule, IonicModule, YourCustomComponentModule ] …

Cheers!

Thanks , this worked for me too .

sapabg commented 2 years ago

importing IonicModule (without .forRoot()) worked for me... only in app.module I have .forRoot() all the other modules just IonicModule. FYI I am having a modal and it works. Cheers!

apocheau commented 1 year ago

I had also these errors. All the errors was related to the ionic componenents but only those used in one of my components. The reason was, i forgot to declare my component in "declarations" array of my module. Hope it helps.

Melynt3 commented 1 year ago

In AppModule.forRoot() and all others without worked for me too.

Glad to bump into this topic, thanks and see ya around o/

Saymonton commented 4 months ago

I solve it another way. After wasting a lot of time trying to solve it, I went to the 'mycomponent.component.ts' file and imported IonicModule from '@ionic/angular'. In @component I added the following lines: standalone: true, imports: [IonicModule]