Question

尝试进行ionic 3项目并将其升级到ionic4。我已经升级了所有软件包，并且构建了所有东西，但是在使用时，我遇到了冲突的组件模板解析错误。

我觉得这有点像一条红线，因为如果删除有问题的代码，它将在另一个组件上引发解析错误。我正在寻找帮助，以找出可能导致此问题的原因。

错误：

Error: Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: Content,IonContent ("}" description="{{ city }}, {{ state.abbreviation }}"></app-page-header>
</ion-col>
[ERROR ->]<ion-content class="dark">
  <ion-grid>
    <ion-row>
"): ng:///MyPageModule/MyPage.html@3:0

my.page.html

<ion-col no-padding>
  <app-page-header title="{{ name }}" description="{{ city }}, {{ state.abbreviation }}"></app-page-header>
</ion-col>
<ion-content class="dark">
  <ion-grid>
    <ion-row>
    .... redacted ...
    </ion-row>
  </ion-grid>
</ion-content>

my.page.ts

import { Component, OnInit } from '@angular/core';
import { IonicPage, LoadingController, NavController, NavParams, Platform } from 'ionic-angular';
import { DataService } from './../../app/data.service';
import { UserService } from './../../app/user.service';
import { GlobalVars } from './../../app/globalvars';

@IonicPage({
  name: 'my',
  segment: 'my/:id'
})

@Component({
  selector: 'app-my',
  templateUrl: './my.page.html',
  styleUrls: ['./my.page.scss'],
})

export class MyPage implements OnInit {};

  constructor(private dataService: DataService, private userService: UserService, private loadingCtrl: LoadingController, public navCtrl: NavController, public navParams: NavParams, public platform: Platform, public globalVars: GlobalVars) {
  }

  ngOnInit() {
    let id:number = +this.navParams.get('id');
    if(id) {
      this.getAsdf(id).then(
        res => {
           this.loadAllReleases(id);
        },
        err => {
            
        }
      );
      sessionStorage.setItem("newRoot","brewery");
      sessionStorage.setItem("newRootId", id.toString());
    }
  }
}

app.component.html

<ion-app>
  <ion-router-outlet></ion-router-outlet>
  <ion-menu side="left" type="overlay" [content]="mycontent" col-lg-5 col-12 no-padding>
      <ion-content>
          <button class="menu-close" ion-button icon-only menuClose detail-none>
              <ion-icon name="close"></ion-icon>
          </button>
          <img class="logo" src="./../../assets/imgs/logo.png" float-left />
          <ion-list no-lines>
              <button ion-item menuClose (click)="navTo('releases')">
                  Releases
              </button>
              <button ion-item menuClose (click)="navTo('cart')">
                  Cart
              </button>
          </ion-list>
      </ion-content>
  </ion-menu>

  <ion-nav #mycontent [root]="rootPage"></ion-nav>
  <span us-spinner="{radius:30, width:8, length: 16}"></span>
  <toaster-container [toasterconfig]="toasterConfig"></toaster-container>
</ion-app>

app.component.ts

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AuthModule } from './auth.module';
import { Component, ViewChild } from '@angular/core';
import { ToasterConfig } from 'angular2-toaster';
import { GlobalVars } from './../app/globalvars';
import { NavController, App } from 'ionic-angular';
import { Environment } from './../environments/environment';
import { NotificationService } from './notification.service';
import swal from 'sweetalert';
import { ReplaySubject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { InAppBrowserService } from './in-app-browser.service';
import { DataService } from './data.service';
import * as $ from 'jquery';

let jQuery: any;
var el: JQuery;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})

export class AppComponent {
  private unsubscribe$ = new ReplaySubject();
  @ViewChild('myNav') nav: NavController
  rootPage: any = 'welcome';
  mobilePlatform: boolean;
  toasterConfig: ToasterConfig = new ToasterConfig({
    positionClass: 'toast-top-right',
    showCloseButton: true,
    timeout: 5000,      
    animation: 'fade'    
  });

  constructor(notificationService: NotificationService, 
              public platform: Platform, 
              statusBar: StatusBar, 
              splashScreen: SplashScreen,
              private authModule: AuthModule, 
              private globalVars: GlobalVars,
              public app: App, 
              private iabService: InAppBrowserService,
              private dataService: DataService) {

  }

  ngOnInit() {
    
    //REDACTED...
    
    $(document).ajaxError(function (event, request, settings) {
      console.log('error trapped', event);
    });
  }
  
  login() {
    // Check to see if we're on a mobile (aka codova) platform
    if(this.platform.is("cordova")){

      //REDACTED
    }
    else {
      //REDACTED
    }    
  }

  logout() {
    this.authModule.logOut();
  }

  admin() {
    window.location.href = Environment.adminUri;
  }

  navTo(route: string) {
    this.app.getActiveNav().setRoot(route);
  }

  handleOneSignalUser(){
    this.dataService.handleOneSignalUser();
  }
}

Answer 1

这是您的错误

        <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/emailTextInputLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/_10sdp"
                style="@style/Widget.Design.TextInputLayout"
                app:errorTextAppearance="@style/error_appearance"
                android:textColorHint="@android:color/white">

            <com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:id="@+id/emailTextInputEditText"
                    android:layout_height="wrap_content"
                    android:backgroundTint="@android:color/white"
                    android:gravity="center"
                    android:hint="@string/hint_enter_email"
                    android:imeOptions="actionNext"
                    android:textColorHint="@android:color/white"
                    android:inputType="textEmailAddress"
                    android:textColor="@android:color/white"
                    android:textSize="@dimen/_15ssp"/>
        </com.google.android.material.textfield.TextInputLayout>

您有那些数据

EG：

  <app-page-header title="{{ name }}" description="{{ city }}, {{ state.abbreviation }}"></app-page-header>

Answer 2

事实证明，这是仍然要导入离子3物，而没有正确导入共享模块中正在使用的所有必要模块中的所有组件的组合。

Ionic 3升级到Ionic 4：模板解析错误组件冲突

2 个答案: