Ionic3 compatability?

[roquefort]

I am not sure if this issue is related but when upgrading my project to ionic 3 I get the following runtime error:
Uncaught (in promise): Error: Template parse errors: 'rating' is not a known element: 1. If 'rating' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <div style="text-align: center; margin-top: 12px"> <ion-item> [ERROR ->]<rating readOnly="true" [(ngModel)]="rating"></rating> </ion-item> <button *ngFor="let transpor"): ng:///HomeModule/HomePage.html@28:4 Error: Template parse errors: 'rating' is not a known element: 1.
..etc

Not sure if there is a work around to this or I am missing something? Cheers :)

[andrucz]

Hello, @roquefort

I will do some tests using ionic 3.0 as soon as possible. I wasn't expecting that ionic would increase the major version so soon. I will also have to rename the repository.

[andrucz]

Have you imported the rating module on your application module declaration?

[roquefort]

Yeah I tried a few work arounds but didn't seem to get far. I'm guessing the directives are different given angular 4, I generally only code in .NET so I am probably not overly helpful. If I find anymore info I'll post it here. Thanks for the repo though, its been incredibly helpful.

[VanderAmorin]

Same problem here.

Firstly I forgot to import the Ionic2RatingModule to my Module and the same error reported by roquefort. Ok, it's fixed! xD

After import and declare the Ionic2RatingModule I get this error:

"BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead."

I haven't imported 'BrowserModule' on my Module. What's the problem?

UPDATE:
I've tried to load CommonModule, but nothing changes.

Thanks!

[andrucz]

Have you guys followed the steps to upgrade to 3.0.0 version? They can be found at https://github.com/driftyco/ionic/releases/tag/v3.0.0

I did it yesterday and rating component worked well.

[VanderAmorin]

@andrucz segui os passos sim, cara, tudo foi migrado para a versão 3. Inclusive minha app inteira está funcionando.
Apenas o component que usa o ionic2-rating está apresentando problemas :/

*br, é nóis!

[andrucz]

@VanderAmorin entendi. agora tá complicado aqui no trabalho e não vou poder ver isso. talvez de noite quando eu chegar em casa. se você puder arrumar isso, ficarei eternamente grato! =)

[VanderAmorin]

@andrucz fiz um PR aí no projeto. Pra mim, resolveu o problema que estava acontecendo aqui.
Espero ter sido útil.

[andrucz]

Obrigado, @VanderAmorin
Até que eu verifique, declare na sua aplicação uma dependência do seu fork (se é que você não fez isso ainda).

[andrucz]

@roquefort please declare a dependency to @VanderAmorin fork to avoid that problem on your application. I will review and probably accept his PR as soon as I have time to.

[roquefort]

Sorry for the late notice by can confirm @VanderAmorin's fork fixed the problem as well as adding in an import in the local page module which is where I also went wrong. Thanks heaps guys

[ihuseynoff]

Hi, I still get the same error after upgrading to 1.2.2.

[andrucz]

I am sorry to hear that. Could you please give me more details about your app? I've made some tests on two applications and the component worked well in both cases.

[elnemr84]

Hi @andrucz ,
did you test it on ionic 3.1.1? because I've followed your steps and I've the same error
"Uncaught (in promise): Error: Template parse errors: 'rating' is not a known element: 1. If 'rating' is an Angular component, then verify......"

[andrucz]

Hi @elnemr84 and @jyj545,
I have just installed Ionic 3.1.1, created an application by running ionic start ratings, followed the README.md steps and the component worked perfectly.

Please make sure that the module is being imported correctly on app.module.ts.

I don't know if it can be related, but I noticed some differences between my dependencies and yours:

"dependencies": {
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/compiler-cli": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@ionic-native/core": "3.6.1",
    "@ionic-native/splash-screen": "3.6.1",
    "@ionic-native/status-bar": "3.6.1",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.1.1",
    "ionic2-rating": "^1.2.2",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.7",
    "typescript": "~2.2.1"
  }

[elnemr84]

Hi @andrucz & @jyj545 ,
Finally I found the problem, I've to add the configuration not into my app.module.ts but to my view module like below

import { NgModule } from '@angular/core';
import { hotelsPage } from './hotels';
import { IonicPageModule } from 'ionic-angular';
import { Ionic2RatingModule } from 'ionic2-rating';

@NgModule({
    declarations: [
        hotelsPage
    ],
    imports: [
        IonicPageModule.forChild(hotelsPage),
        Ionic2RatingModule
    ],
    entryComponents: [
        hotelsPage
    ]
})
export class hotelsPageModule { }

@andrucz I think you have to mention that into your readme.md

Thank you.

[andrucz]

That's great, @elnemr84!
You're right. I will update the tutorial soon.

[TheYoungester]

who can give me the demo? I fix my project like what you said above,but it do not work well!

[TheYoungester]

it is working well now! Thanks