Error: Uncaught (in promise): invalid link: ProductListComponent

user_14988644 0
Viewed 85

iam still learning with angular,ionic and iam confused where is my fault, ive been looking on the other question but i still dont get it, can u guys help me? and maybe u have some code that explain it clearly ?

this is my product-list.component.ts

    import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-prod-list-view',
  templateUrl: 'product-list.component.html',
  styleUrls: ['product-list.component.css']
})

export class ProductListComponent {
  products = [
    {
      name: 'Phone XL',
      price: 799,
      description: 'A large phone with one of the best screens'
    },
    {
      name: 'Phone Mini',
      price: 699,
      description: 'A great phone with one of the best cameras'
    },
    {
      name: 'Phone Standard',
      price: 299,
      description: ''
    }
  ];

  share() {
    window.alert('The product has been shared!');
  }

  view() {
    window.alert('The product has been viewed!');
 }
}

this is my product-list.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProductListComponent } from './product-list.component';

@NgModule({
  declarations: [
    ProductListComponent
  ],
  imports: [
    IonicPageModule.forChild(ProductListComponent),
  ],
  exports: [
    ProductListComponent
  ]
})
export class ProductListModule { }

and this is my html

<h2>Products</h2>

<div *ngFor="let product of products">
    <h3>
        <a [title]="product.name + ' details'">
            {{ product.name }}
        </a>
    </h3>

    <p *ngIf="product.description">
        Description: {{ product.description }}
    </p>

    <button (click)="share()">
        Share
    </button>

    <button (click)="view()">
        View
    </button>

</div>
ionic-framework angular javascript
1 Answers

Seems like you are missing something.

import { IonicPage, NavController, NavParams } from 'ionic-angular';

you imported the IonicPage decorater but haven't called the decorator before the

@Component decorator. You are needed to call @IonicPage() before @Component() to register and displaying the page in the URL.

It should be something Like

@IonicPage()
@Component({
  selector: 'page-prod-list-view',
  templateUrl: 'product-list.component.html',
  styleUrls: ['product-list.component.css']
});

Since your component is not registered you are recieving the following error.

You can check more details in

https://ionicframework.com/docs/v3/api/navigation/IonicPage/

user_118346300
Related