search

akserg / ng2-toasty

Angular2 Toasty component shows growl-style alerts and messages for your app.
MIT License
283 stars 102 forks source link

AOT compilation: can't resolve module ./src/toast.component #67

Closed jbarbede closed 7 years ago

jbarbede commented 7 years ago

npm ERR! Linux 3.14.32-xxxx-grs-ipv6-64 npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "ionic:build" "--prod" npm ERR! node v7.4.0 npm ERR! npm v4.0.5


* **Please tell us about your environment:**

- Ionic 2
- Angular version: 2.2.1
- node v7.4.0
- npm  v4.0.5

* **Other information** 
In index.ts, we have 2 exports:

export from './src/toasty.service'; export from './src/toasty.component';



Adding to those exports an export for toast.component seems to fix the compilation error.
akserg commented 7 years ago

Hi @jbarbede

To be honest - I didn't test the module in Ionic 2, but you could do that with the following steps:

  1. You should add the ToastyModule into the include property of AppModule class like that:
import { ToastyModule } from 'ng2-toasty';

@NgModule({
  declarations: [
    MyApp,
    // Yor components here
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    ToastyModule.forRoot()
  ],
  // Other initialization properties
})
export class AppModule { }
  1. Add the ng2-toasty tag into app.html:
<ion-nav [root]="rootPage" #content></ion-nav>
<ng2-toasty [position]="'center-center'"></ng2-toasty>

  1. Copy and past the content of one of style files into app.scss.

  2. Inject the ToastyService into any page:

import { Component } from '@angular/core';
import { ToastyService } from 'ng2-toasty';

@Component({
  selector: 'page-feed',
  templateUrl: 'feed.html',
})
export class FeedPage {

  constructor(private toastyService: ToastyService) {}

  showToast() {
    // Just add default Toast with title only
    this.toastyService.default('Hi there');
  }
}
  1. Call the showToast method on your page:
<ion-header>
  <ion-navbar>
    <button ion-button icon-only menuToggle><ion-icon name="menu"></ion-icon></button>
    <ion-title>Feed</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="showToast()" ><ion-icon name="walk"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
</ion-content padding>

I need some time to check what is wrong with styles and update the README with how to use ng2-toasty in Ionic 2.

jbarbede commented 7 years ago

hey @akserg,

Actually I integrated your plugin into our Ionic 2 app easily, without any problem. On my development machine, it works perfectly.

But we are using AOT compilation when we build the production version of our app. This is when we have a compilation error related to ng2-toasty.

akserg commented 7 years ago

Hi @jbarbede

Did you manage your problem?

jbarbede commented 7 years ago

Hi,

Adding that line https://github.com/cadulis/ng2-toasty/blob/master/index.ts#L10 to your index.ts makes the AOT compilation works.

akserg commented 7 years ago

Hi,

Thank you for pointing me to the issue.

Can you, please share how you integrated the ng2-toasty into Ionic 2 app? Was is similar to what I suggested above? Can you update the README and create PR to share your knowledge with other developers?

jbarbede commented 7 years ago

The integration like you described it in your current README is enough I guess. I followed it when I started to integrate ng2-toasty in Ionic 2 and it worked out of the box.