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

[jbarbede]

• I'm submitting a ...
  [x ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository

• Do you want to request a feature or report a bug?
  Not sure if it is a bug but I have an error when executing AOT compilation.

• What is the current behavior?
  When I try to AOT compile my project where we included ng2-toasty, I obtain the following error:

[07:05:01]  ngc started ... 
can't resolve module ./src/toast.component from /var/lib/jenkins/jobs/project/workspace/src/node_modules/ng2-toasty/index.d.ts
[07:05:03]  build prod failed: Cannot read property 'ToastComponent' of undefined, resolving symbol ToastyModule in 
            /var/lib/jenkins/jobs/project/workspace/src/node_modules/ng2-toasty/index.d.ts, resolving 
            symbol ToastyModule in 
            /var/lib/jenkins/jobs/project/workspace/src/node_modules/ng2-toasty/index.d.ts 
[07:05:03]  ionic-app-script task: "build" 
[07:05:03]  Error: Cannot read property 'ToastComponent' of undefined, resolving symbol ToastyModule in 
            /var/lib/jenkins/jobs/project/workspace/src/node_modules/ng2-toasty/index.d.ts, resolving 
            symbol ToastyModule in 
            /var/lib/jenkins/jobs/project/workspace/src/node_modules/ng2-toasty/index.d.ts 
Error: Cannot read property 'ToastComponent' of undefined, resolving symbol ToastyModule in /var/lib/jenkins/jobs/project/workspace/src/node_modules/ng2-toasty/index.d.ts, resolving symbol ToastyModule in /var/lib/jenkins/jobs/project/workspace/src/node_modules/ng2-toasty/index.d.ts
    at simplifyInContext (/var/lib/jenkins/jobs/project/workspace/src/node_modules/@angular/compiler-cli/src/static_reflector.js:475:23)
    at StaticReflector.simplify (/var/lib/jenkins/jobs/project/workspace/src/node_modules/@angular/compiler-cli/src/static_reflector.js:478:22)
    at StaticReflector.annotations (/var/lib/jenkins/jobs/project/workspace/src/node_modules/@angular/compiler-cli/src/static_reflector.js:60:36)
    at NgModuleResolver.resolve (/var/lib/jenkins/jobs/project/workspace/src/node_modules/@angular/compiler/bundles/compiler.umd.js:14261:46)
    at CompileMetadataResolver._loadNgModuleMetadata (/var/lib/jenkins/jobs/project/workspace/src/node_modules/@angular/compiler/bundles/compiler.umd.js:14646:45)
    at CompileMetadataResolver.getUnloadedNgModuleMetadata (/var/lib/jenkins/jobs/project/workspace/src/node_modules/@angular/compiler/bundles/compiler.umd.js:14636:23)
    at addNgModule (/var/lib/jenkins/jobs/project/workspace/src/node_modules/@angular/compiler/bundles/compiler.umd.js:12944:43)
    at /var/lib/jenkins/jobs/project/src/node_modules/@angular/compiler/bundles/compiler.umd.js:12957:16
    at Array.forEach (native)
    at _createNgModules (/var/lib/jenkins/jobs/project/workspace/src/node_modules/@angular/compiler/bundles/compiler.umd.js:12956:28)

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]

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 { }

2. Add the ng2-toasty tag into app.html:

<ion-nav [root]="rootPage" #content></ion-nav>
<ng2-toasty [position]="'center-center'"></ng2-toasty>

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

4. 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');
  }
}

5. 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]

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]

Hi @jbarbede

Did you manage your problem?

[jbarbede]

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]

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]

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.