AOT Fixes for Angular 4

[sfaizanh]

@arielfaur this has been fixes and tested on NPM not from git branch.

[sfaizanh]

There is a new npm package i used for coping scss file to dist folder called copyfiles

You need to do some steps OSX or Linix rm -rf node_modules && npm install Windows rmdir node_modules npm install

Secondly npm run build

for Releasing/Publishing Package npm run release

[sfaizanh]

Now to test if its working or not i have created temporary npm for this https://www.npmjs.com/package/ionic-audio-test

npm i ionic-audio-test

after confirmation from you @arielfaur, i'll unpublish it

Note: import { ... } from 'ionic-audio' will become import { ... } from 'ionic-audio-test'

This package will be removed after testing and confirmation please don't use this in production or development purpose

[stefanheule]

I just tried this on my own project, and can confirm that this fixes the AOT issues mentioned in #121. @arielfaur, please consider merging this.

[sfaizanh]

@stefanheule Appreciated

[sfaizanh]

Tested on Ionic 3.3.0 with Lazy Loading

app.modules.ts

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 }
  ]
})
export class AppModule { }

home.modules.ts

@NgModule({
  declarations: [HomePage],
  imports: [IonicPageModule.forChild(HomePage), IonicAudioModule],
  exports: [HomePage],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HomePageModule { }

My App was not working without defining the Provider

  providers: [
    ....
    { provide: AudioProvider, useFactory: myCustomAudioProviderFactory }
  ]

[napcat]

Thank you guys... Hoping for a merge and a new version that fix #121

[arielfaur]

Thanks to everyone for helping out! I will merge this later (I am dealing with a tight deadline now...)

[arielfaur]

@sfaizanh I am testing and everything seems fine 👍 One question, I had placed a package.json inside the dist folder in order to be able to reference ../dist as module in the builtin demo project as follows:

  "dependencies": {
    "@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",
    "@angular/platform-browser": "4.1.2",
    "@angular/platform-browser-dynamic": "4.1.2",
    "@ionic-native/core": "3.10.2",
    "@ionic-native/splash-screen": "3.10.2",
    "@ionic-native/status-bar": "3.10.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.3.0",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.11",
    "ionic-audio": "../dist"
  },

I saw you removed this file. Don't you think it is a good idea to keep it in the dist folder? Let me know what you think.

[sfaizanh]

@arielfaur i would suggest there should be a separate repository for demo For your development you should create a project and place your repo in src folder and you import directly from it

Your Build Project directory structure should be like this src

• app
• pages
• components
• theme
• ionic-audio - your repo

on pageimport { IonicAudioProvider } from '../../ionic-audio/src/audioprovider' ;

On completion just build the project and publish

Just a suggestion

[arielfaur]

Thanks @sfaizanh, @stefanheule, @napcat 👍 I have published version 3.0.2 to npm

[sfaizanh]

ok i'll unpublish it, @arielfaur if you want the same thing the one with package.json then there is a workable solution, we place dist.package.json in root directory and when we run build then it copy it to dist folder and rename it to package.json and npmignore in dist/package.json what you suggest?

[sfaizanh]

i can create a new PR

[arielfaur]

@sfaizanh No need for now. I can easily copy the package.json if I ever need it!