为 ionic 应用程序创建公共标头元素会在 --prod build 中引发错误

Question

我一直在开发一个 ionic 3 应用程序，该应用程序的某些页面具有一个共同的标题，只有标题内的元素有一些细微差别。为了避免代码重复并保持干燥，我尝试为此标题创建一个可重用的组件并将其包含在所需的每个页面中。

在这个组件中，我有几个属性，我使用这些属性通过属性绑定来控制元素的差异。在开发版本中一切正常。但是今天当我尝试创建 --prod 构建时，它显示了以下错误。

Error: Template parse errors:
Can't bind to 'isHome' since it isn't a known property of 'ion-header'.
1. If 'ion-header' is an Angular component and it has 'isHome' input, 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.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  Ionic pages and navigation.
-->
<ion-header clean-header [ERROR ->][isHome]="true" (refresh)="refresh($event);"></ion-header>

我将附上下面的代码，个别文件，我理解这是一个问题，因为我对 angular4 / ionic3 的依赖注入和模板绑定结构有误解。但我无法理解给定的错误，我尝试了错误本身列出的 3 种解决方案，但我仍然遗漏了一些东西并且错误保持不变。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { StatusBar } from '@ionic-native/status-bar';
import { LaunchNavigator} from '@ionic-native/launch-navigator';

import { MyApp } from './app.component';
import { Header } from '../pages/header/header';
import { HomePage } from '../pages/home/home';
import {AssignmentDetailPage} from '../pages/assignment-detail/assignment-detail';
import { LoginPage } from '../pages/login/login';
import {ReportIssuePage} from '../pages/report-issue/report-issue';
import { AuthServiceProvider } from '../providers/auth-service/auth-service';
import { BaseUrl, Base } from './config/config.constants';
import { LoadingInterceptor } from '../interceptors/loading.interceptor';
import { DataStoreProvider } from '../providers/data-store/data-store';
import { HomeServiceProvider } from '../providers/home-service/home-service';
import { SessionInterceptor } from '../interceptors/session.interceptor';
import { AssignmentStatusProvider } from '../providers/assignment-status/assignment-status';
import { Camera } from '@ionic-native/camera';
import { File} from '@ionic-native/file';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
    Header,
    AssignmentDetailPage,
    ReportIssuePage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp, {
      mode : 'md',
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    AssignmentDetailPage,
    ReportIssuePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    {provide:Base, useValue:BaseUrl},
    {provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi:true},
    {provide: HTTP_INTERCEPTORS, useClass: SessionInterceptor, multi:true},
    AuthServiceProvider,
    DataStoreProvider,
    Camera,
    File,
    HomeServiceProvider,
    AssignmentStatusProvider,
    LaunchNavigator,
  ]
})
export class AppModule {}

header.module.ts

import { NgModule } from '@angular/core';
import { Header } from './header';

@NgModule({
  declarations: [
    Header,
  ],
  imports: [
  ],
  exports: [
    Header
  ]
})
export class HeaderModule {}

header.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
import { AlertController, NavController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { LoginPage } from '../login/login';
import { HomeServiceProvider } from '../../providers/home-service/home-service';

@Component({
  selector: '[clean-header]',
  templateUrl: 'header.html',
})
export class Header {
  @Input() isHome: boolean = false;
  @Output() refresh: EventEmitter<any> = new EventEmitter();
  public user: any;
  constructor(public Auth: AuthServiceProvider, public nav: NavController,
     public alertCtrl: AlertController, public HomeService: HomeServiceProvider) {

    this.user = Auth.getUserData();
  }

header.html

  <ion-navbar hideBackButton>
    <div text-center>
    <img class="header-logo" src="./assets/imgs/clean_connect.png" alt="Logo of clean connect">
    </div>
    <ion-grid>
      <ion-row>
        <ion-col col-8>
          <div class="name-section">
            <h4 class="header-username">{{user.userName | uppercase}}</h4>
            <p>{{user.firstName +', '+ user.lastName}}</p>
          </div>
        </ion-col>
        <ion-col col-4 class="nav-controls">
          <a (click)="refreshData()" *ngIf="isHome"><img src="./assets/imgs/ic_refresh.png"   alt="Logo of Refresh"></a>
          <a (click)="goHome();" *ngIf="!isHome"><img src="./assets/imgs/home.png"   alt="Logo of Home"></a>
          <a (click)="logout()"><img src="./assets/imgs/logout.png"   alt="Logo of Logout"></a>
        </ion-col>
        <ion-col col-2 class="nav-controls">

        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-navbar>

我终于在类似这样的其他地方使用了这个组件，

home.html

<ion-header clean-header [isHome]="true" (refresh)="refresh($event);"></ion-header>
<ion-content>

我尝试将其用作自定义元素而不是属性，但由于自定义元素位于 ion-header 和 ion-content 之间，因此无法生成所需的布局，而且我找不到方法像 angular1 中那样使用嵌入。

我知道这个问题很长，但我无法做出有效的小提琴。谁能帮帮我？

Answer 1

注意：尽管上面有关于最佳实践的建议，但我在创建组件时遇到了类似的错误，因此为其他搜索错误的人提供答案。 就我而言，我只有一个普通的旧组件，但我遇到了同样的错误，除了它抱怨离子标签。这是我第一次进行了相当多的挖掘和反复试验来解决问题。我发现文档对这个主题不太清楚，或者我只是没能在谷歌上找到正确的东西。

您需要将IonicModule 导入您的header.module.ts 以及app.module.ts，即

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { Header } from './header';

@NgModule({
  declarations: [
    Header,
  ],
  imports: [
    IonicModule      // <-- add here
  ],
  exports: [
    Header
  ]
})
export class HeaderModule {}

请注意，实时重载可能会在第一次错过此更改，因此请杀死并重新启动 ionic 服务以确保。

以下错误报告 cmets 帮助我解决了这个问题： https://github.com/angular/angular/issues/14288#issuecomment-282531453 https://forum.ionicframework.com/t/ionic-3-0-shared-component/91727/2

Answer 2

我找到了答案。

但是根据 ionic 团队的建议，明智的做法是不要 放置通用标题而不是由于离子而在每个页面上放置标题 内部设计决策。感谢sebaferreras 的建议。我不建议任何人在不考虑成本的情况下执行以下操作。但我想证明这是可能的。

。

但我仍然想实现它，因为我的 ionic 标头具有一些中级复杂功能，我无法在我使用的每个页面上复制它们。我实现如下，

1) 从 app.module.ts 中删除对模块/component.ts 的任何引用，从 app.module.ts 中删除该组件的任何导入，

2) 在头（可重用）模块（header,module.ts）的导入部分导入 IonicModule

import { NgModule } from '@angular/core';
import { Header } from './header';
import {IonicModule} from "ionic-angular";

@NgModule({
  declarations: [
    Header,
  ],
  imports: [
    IonicModule
  ],
  exports: [
    Header
  ]
})
export class HeaderModule {}

然后在每个其他页面的模块中导入 HeaderModule，记住不是在 component.ts 文件中，而是在该文件的模块中。

home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import {HeaderModule} from "../header/header.module";

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    HeaderModule,
  ],
  exports: [
    HomePage
  ]
})
export class HomePageModule {}

这按预期工作，我没有注意到任何副作用，对于动画部分，我们当前的项目不太关心动画标题，所以如果它不起作用，对我的用例来说不是问题.相应地检查您的用例。