Замена файла на angular не работает

#angular #typescript #ionic-framework #angular9 #ionic5

#angular #typescript #ионный фреймворк #angular9 #ionic5

Вопрос:

Я новичок в ionic, в моем приложении ionic мне нужно переключать файлы HTML и ts компонентов на основе среды (dev / prod).

Так что я использую опцию fileReplacements из angular.

  "fileReplacements": [
              {
                "replace": "src/app/vital-entry/vital-entry.page.html",
                "with": "src/app/vital-entry/vital-entry-stJohns.page.html"
              },
              {
                "replace": "src/app/health-condition-entry/health-condition-entry.page.html",
                "with": "src/app/health-condition-entry/health-condition-entry-stJohns.page.html"
              },
              {
                "replace": "src/app/health-condition-entry/health-condition-entry.page.ts",
                "with": "src/app/health-condition-entry/health-condition-entry-stJohns.page.ts"
              },
              {
                "replace": "src/app/submitting-conditions/submitting-conditions.page.ts",
                "with": "src/app/submitting-conditions/submitting-conditions-stJohns.page.ts"
              }
            ]
          },
  

Но я сталкиваюсь со странной проблемой в рабочем режиме, когда дополнительные файлы (например submitting-conditions-stJohns.page.ts,health-condition-entry-stJohns.page.ts,health-condition-entry-stJohns.page.html,vital-entry-stJohns.page.html ) добавлен в компонент, где режим разработки работает нормально.

 ERROR in src/app/health-condition-entry/health-condition-entry-stJohns.page.html:1:1 - error NG8001: 'ion-header' is not a known element:
1. 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.

1 <ion-header>
  ~~~~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:2:3 - 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.

2   <ion-toolbar>
    ~~~~~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:3:5 - error NG8001: 'ion-buttons' is not a known element:      
1. If 'ion-buttons' is an Angular component, then verify that it is part of this module.
2. If 'ion-buttons' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this 
message.

3     <ion-buttons slot="start">
      ~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:4:7 - error NG8001: 'ion-menu-button' is not a known element:
1. If 'ion-menu-button' is an Angular component, then verify that it is part of this module.
2. If 'ion-menu-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

4       <ion-menu-button></ion-menu-button>
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:6:5 - 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.

6     <ion-title> Health Condition Entry </ion-title>
      ~~~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:10:1 - 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.

10 <ion-content id="page15">
   ~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:12:5 - 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.

12     <ion-row class="ubiqrow" style="font-size: 1.5em">
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.htmlm:13:7 - 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.

13       <ion-col>
         ~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:14:9 - 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.

14         <ion-label></ion-label>
           ~~~~~~~~~~~~~~~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:16:7 - 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.

16       <ion-col>
         ~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:17:9 - 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.

17         <ion-label></ion-label>
           ~~~~~~~~~~~~~~~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:19:7 - 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.

19       <ion-col>
         ~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:20:9 - 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.

20         <ion-label></ion-label>
           ~~~~~~~~~~~~~~~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:22:7 - 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.

22       <ion-col>
         ~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:23:9 - 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.

23         <ion-label></ion-label>
           ~~~~~~~~~~~~~~~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:25:7 - 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.

25       <ion-col>
         ~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:26:9 - 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.

26         <ion-label>Mild</ion-label>
           ~~~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
      m                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:28:7 - 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.

28       <ion-col>
         ~~~~~~~~~
 <ion-col>
         ~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HealthConditionEntryPage.
src/app/health-condition-entry/health-condition-entry-stJohns.page.html:29:9 - 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.

29         <ion-label>Moderate</ion-label>
           ~~~~~~~~~~~

  src/app/health-condition-entry/health-condition-entry-stJohns.page.ts:15:16
    15   templateUrl: 'health-condition-entry-stJohns.page.html',
  

где я использую

  • Ионный интерфейс командной строки: 6.10.1
  • Ionic Framework: ionic-angular 3.9.10
  • Версия Angular: 9.1.12

Как это можно исправить?

Заранее спасибо.

Ответ №1:

Вы пробовали создать пакет, как показано ниже

  1. ионная сборка cordova android —prod —release

Это должно указывать на ошибки (если они есть)

Комментарии:

1. я использую ‘ng build —prod = true —verbose = true` для сборки пакета