AOT compile error

[thomdejong101]

Ionic-audio version: [ X] 3.0.2

I'm submitting a ... [ X] bug report

Current behavior:

When trying to compile with the --prod I receive the following error:

[10:59:38]  ngc started ...
[WARN] Error occurred during command execution from a CLI plugin (@ionic/cli-plugin-cordova). Your plugins may be out of date.
Error: Error encountered resolving symbol values statically. Calling function 'providers', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function,
 resolving symbol IonicAudioModule.forRoot in C:/Git/BEPapp/ionic/node_modules/ionic-audio/dist/ionic-audio.module.d.ts, resolving symbol AppModule in 
C:/Git/BEPapp/ionic/src/app/app.module.ts, resolving symbol AppModule in C:/Git/BEPapp/ionic/src/app/app.module.ts

Expected behavior:

A compile with Aot

Steps to reproduce:

Execute: ionic cordova build android --prod

Regular build when executing "ionic cordova build android" succeeds.

Related code:

There probably is an issue somewhere in the implementation of the 'provides' function in the module:

export function providers(audioProvider) {
    audioProvider = audioProvider || { provide: AudioProvider, useFactory: audioProviderFactory };
    return [
        audioProvider
    ];
}

Other information:

package.json:

    "@angular/common": "4.1.2",
    "@angular/compiler": "4.1.2",
    "@angular/compiler-cli": "^4.1.2",
    "@angular/core": "4.1.2",
    "@angular/forms": "4.1.2",
    "@angular/http": "4.1.2",
    (...)
    "ionic-angular": "3.3.0",
    "ionic-audio": "^3.0.2",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",

Related to:

94 and #131

[sfaizanh]

Hi @thomdejong101 can you provide your app.module.ts file

Just want to see imports and providers

@NgModule({
  imports: [...],
  providers: [...]
});

[ANANDAN0693]

me also facing the same issue please any one help me solve this friends

Error: Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider repl acing the function or lambda with a reference to an exported function, resolving symbol Injectable in D:/anandan/ionic2App/podcast03062017/Podc ast/node_modules/ionic-audio/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in D:/anandan/ionic2App/podcast03062017/Podcast/node_mod ules/ionic-audio/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in D:/anandan/ionic2App/podcast03062017/Podcast/node_modules/ionic-a udio/node_modules/@angular/core/core.d.ts

and my app.module.ts

 `import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { ProfilePage } from '../pages/profile/profile';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { RecommendedPage } from '../pages/recommended/recommended';
import { RestProvider } from '../providers/rest/rest';
import { HttpModule } from '@angular/http';
import {PodcastmodalPage} from '../pages/podcastmodal/podcastmodal';
import {PersonalitymodalPage} from '../pages/personalitymodal/personalitymodal';
import {PersonalitiesPage} from '../pages/personalities/personalities';
import {EpisodemodalPage} from '../pages/episodemodal/episodemodal'
import { ArrayfilterPipe } from '../pipes/arrayfilter/arrayfilter';
import { RemovehtmltagPipe } from '../pipes/removehtmltag/removehtmltag';
import {EventsPage} from '../pages/events/events';
import {GenresPage} from '../pages/genres/genres';
import { EventsmodalPage } from '../pages/eventsmodal/eventsmodal';
import { MamaStackBlur} from '../mama-stack-blur';
import { ParallaxHeaderDirective } from '../directives/parallax-header/parallax-header';
import { IonicAudioModule } from 'ionic-audio';
import { ShareddataProvider } from '../providers/shareddata/shareddata';
import { SeperateProfilePipe } from '../pipes/seperate-profile/seperate-profile';
import { LoginPage } from '../pages/login/login';
import { CheckpodcastwlPipe } from '../pipes/checkpodcastwl/checkpodcastwl';
import { MatchclassPipe } from '../pipes/matchclass/matchclass';
import { Transfer} from '@ionic-native/transfer';
import { File } from '@ionic-native/file';
import { AndroidPermissions } from '@ionic-native/android-permissions';

@NgModule({
  declarations: [
    MyApp,
    ContactPage,
    HomePage,
    TabsPage,
    ProfilePage,
    RecommendedPage,
    PodcastmodalPage,
    PersonalitymodalPage,
    EpisodemodalPage,
    ArrayfilterPipe,
    RemovehtmltagPipe,
    EventsPage,
    GenresPage,
    AboutPage,
    EventsmodalPage,
    MamaStackBlur,
    ParallaxHeaderDirective,
    PersonalitiesPage,
    SeperateProfilePipe,
    LoginPage,
    CheckpodcastwlPipe,
    MatchclassPipe
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp, {
      platform:{
        android:{
          activator:'none',
          tabsHideOnSubPages:"true"
        }
      },
      tabsPlacement: 'top'
    }),
    IonicAudioModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,    
    ContactPage,
    HomePage,
    TabsPage,
    ProfilePage,
    RecommendedPage,
    PodcastmodalPage,
    PersonalitymodalPage,
    EpisodemodalPage,
    EventsPage,
    GenresPage,
    AboutPage,
    EventsmodalPage,
    PersonalitiesPage,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    RestProvider,
    ShareddataProvider,
    Transfer,
    File,
    AndroidPermissions
  ]
})
export class AppModule {}
`

[thomdejong101]

@sfaizanh These are my Imports and providers:

    imports: [
        BrowserModule,
        HttpModule,
        IonicModule.forRoot(MyApp),
        IonicAudioModule.forRoot(),
    ],
    providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }, DBProvider, GAProvider]

[sfaizanh]

export function myCustomAudioProviderFactory() {
  return new WebAudioProvider();
}

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicAudioModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: AudioProvider, useFactory: myCustomAudioProviderFactory },
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})

Add { provide: AudioProvider, useFactory: myCustomAudioProviderFactory } in providers and add

export function myCustomAudioProviderFactory() {
  return new WebAudioProvider();
}

before @NgModule

[ANANDAN0693]

i have changed my app.module same as you mentioned above but still am getting the same issue

[sfaizanh]

@ANANDAN0693

import { IonicAudioModule, AudioProvider, WebAudioProvider } from 'ionic-audio';

export function myCustomAudioProviderFactory() {
  return new WebAudioProvider();
}

@NgModule({
  providers: [
    ....
    { provide: AudioProvider, useFactory: myCustomAudioProviderFactory }
  ]
})

[ANANDAN0693]

see this my app.module

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { ProfilePage } from '../pages/profile/profile';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { RecommendedPage } from '../pages/recommended/recommended';
import { RestProvider } from '../providers/rest/rest';
import { HttpModule } from '@angular/http';
import {PodcastmodalPage} from '../pages/podcastmodal/podcastmodal';
import {PersonalitymodalPage} from '../pages/personalitymodal/personalitymodal';
import {PersonalitiesPage} from '../pages/personalities/personalities';
import {EpisodemodalPage} from '../pages/episodemodal/episodemodal'
import { ArrayfilterPipe } from '../pipes/arrayfilter/arrayfilter';
import { RemovehtmltagPipe } from '../pipes/removehtmltag/removehtmltag';
import {EventsPage} from '../pages/events/events';
import {GenresPage} from '../pages/genres/genres';
import { EventsmodalPage } from '../pages/eventsmodal/eventsmodal';
import { MamaStackBlur} from '../mama-stack-blur';
import { ParallaxHeaderDirective } from '../directives/parallax-header/parallax-header';
import { IonicAudioModule,AudioProvider,WebAudioProvider } from 'ionic-audio';
import { ShareddataProvider } from '../providers/shareddata/shareddata';
import { SeperateProfilePipe } from '../pipes/seperate-profile/seperate-profile';
import { LoginPage } from '../pages/login/login';
import { CheckpodcastwlPipe } from '../pipes/checkpodcastwl/checkpodcastwl';
import { MatchclassPipe } from '../pipes/matchclass/matchclass';
import { Transfer} from '@ionic-native/transfer';
import { File } from '@ionic-native/file';
import { AndroidPermissions } from '@ionic-native/android-permissions';

export function myCustomAudioProviderFactory() {
  return new WebAudioProvider();
}

@NgModule({
  declarations: [
    MyApp,
    ContactPage,
    HomePage,
    TabsPage,
    ProfilePage,
    RecommendedPage,
    PodcastmodalPage,
    PersonalitymodalPage,
    EpisodemodalPage,
    ArrayfilterPipe,
    RemovehtmltagPipe,
    EventsPage,
    GenresPage,
    AboutPage,
    EventsmodalPage,
    MamaStackBlur,
    ParallaxHeaderDirective,
    PersonalitiesPage,
    SeperateProfilePipe,
    LoginPage,
    CheckpodcastwlPipe,
    MatchclassPipe
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp, {
      platform:{
        android:{
          activator:'none',
          tabsHideOnSubPages:"true"
        }
      },
      tabsPlacement: 'top'
    }),
    IonicAudioModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,    
    ContactPage,
    HomePage,
    TabsPage,
    ProfilePage,
    RecommendedPage,
    PodcastmodalPage,
    PersonalitymodalPage,
    EpisodemodalPage,
    EventsPage,
    GenresPage,
    AboutPage,
    EventsmodalPage,
    PersonalitiesPage,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
     { provide: AudioProvider, useFactory: myCustomAudioProviderFactory },
    RestProvider,
    ShareddataProvider,
    Transfer,
    File,
    AndroidPermissions
  ]
})
export class AppModule {}

[sfaizanh]

Can you provide the error and in Terminal ionic info and paste here

[ANANDAN0693]

global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.1
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.2.3
Ionic Framework                 : ionic-angular 3.3.0

System:

Node       : v6.9.4
OS         : Windows 8.1
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
npm        : 3.10.10

[thomdejong101]

@sfaizanh

I have added the function and provider as you said. The error, however, does not change. Note however that my error is different from the error of ANANDAN0693. His error is about the makedecorator where mine is about the providers function.

Error: Error encountered resolving symbol values statically. Calling function 'providers', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol IonicAudioModule.forRoot in C:/Git/BEPapp/ionic/node_modules/ionic-audio/dist/ionic-audio.module.d.ts, resolving symbol AppModule in C:/Git/BEPapp/ionic/src/app/app.module.ts, resolving symbol AppModule in C:/Git/BEPapp/ionic/src/app/app.module.ts

Below is my Ionic info

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 6.5.0
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.1.2 browser 4.1.0
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v6.10.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 4.5.0

[ANANDAN0693]

YES @thomdejong101 my issue differ from your issue now my issues is fixed by removing node-module folder from ionic-audio

[sfaizanh]

Check node_modules/ionic-audio contain node_modules directory ? if exists then remove it as @ANANDAN0693 says

[thomdejong101]

@sfaizanh As can be seen in this screenshot there is no node_modules map in the ionic-audio folder.

[arielfaur]

@ANANDAN0693 @sfaizanh @thomdejong101 For some reason I cannot explain this keeps appearing. I see it now too. It is really a pain when there is no documentation out there and we have to find the cause on a trial and error basis.

[arielfaur]

OK, it looks like I have been able to fix it in version 3.0.4. The way to go was to pass a factory function as a parameter to the IonicAudioModule.forRoot() method. I updated the demo project. I look forward to your feedback!

[thomdejong101]

@arielfaur Thank you for the update it works for me now. I pass in a null object which resolves correctly. Please dont forget to update the documentation on https://arielfaur.github.io/ionic-audio/2.0/index.html.

[arielfaur]

@thomdejong101 Are you sure it works with a null object? The module requires a factory function to determine which audio provider to use.

[thomdejong101]

@arielfaur I just checked my solution. I was working because I still had the provider declared as mentioned earlier in this thread.

{ provide: AudioProvider, useFactory: myCustomAudioProviderFactory },

After removing this passing in null did crash the app but only after the build succeeded. I have replaced it with the myCustomAudioProviderFactory provided earlier. I do also receive multiple warnings when building on missing parameters.

Warning: Can't resolve all parameters for WebAudioTrack in C:/Git/BEPapp/ionic/node_modules/ionic-audio/dist/ionic-audio-web-track.d.ts: (?, ?). This will become an error in Angular v5.x
Warning: Can't resolve all parameters for CordovaAudioTrack in C:/Git/BEPapp/ionic/node_modules/ionic-audio/dist/ionic-audio-cordova-track.d.ts: (?). This will become an error in Angular v5.x

But the issue seems resolved so thank you.

[arielfaur]

Thanks @thomdejong101 Yes, I am aware of those warnings. I have time until the next big Angular release 😄 So the right way to initialize Ionic Audio is by passing a factory function. It is the only way I could make AOT work. At least Angular puts together a document explaining how to properly write modules for AOT, one day...hopefully 😃