Alveo / alveo-transcriber

Web application to transcribe data for the Alveo project
https://alveo.github.io/alveo-transcriber/
BSD 3-Clause "New" or "Revised" License
1 stars 1 forks source link

Angular6 upgrade #10

Closed davidlirving closed 6 years ago

davidlirving commented 6 years ago

The upgrade is mostly complete and is available on the angular6 branch.

Unfortunately there are issues with Angular 6.0.0, webpack and lazy loading, so building is not yet possible until those issues are fixed upstream.

The alveo transcriber module has been merged back into this repository and converted to an Angular6 library, a newly added (and incredibly wonderful) feature of Angular6. The component can be built from inside the Angular project and distributed cleanly via npm.

davidlirving commented 6 years ago

Angular6 has changed the way modules are imported which has caused issues with third party libraries. Module resolution issues are happening with JsAlveo, but will extend to runtime issues with PouchDB due to changes with the way Angular uses global.

Will try again in a month when other libraries have caught up and the migration process is better documented.

stevecassidy commented 6 years ago

Hi David, sounds like you were too keen to be on the bleeding edge!

We should meet this week to talk over some things that I saw at the conference. I think I’ve found a good speech recognition engine we can use.

Thanks,

Steve — Department of Computing, Macquarie University http://web.science.mq.edu.au/~cassidy Need a meeting: https://calendly.com/steve-cassidy/advising

On 14 May 2018 at 11:10:07 am, David (notifications@github.commailto:notifications@github.com) wrote:

Angular6 has changed the way modules are imported which has caused issues with third party libraries. Module resolution issues are happening with JsAlveo, but will extend to runtime issues with PouchDB due to changes with the way Angular uses global.

Will try again in a month when other libraries have caught up and the migration process is better documented.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://protect-au.mimecast.com/s/XvFeCwV1jpS8rlxfV0iHh?domain=github.com, or mute the threadhttps://protect-au.mimecast.com/s/6XRRCxngGkfMNEvuv9N7V?domain=github.com.

davidlirving commented 6 years ago

Further investigation reveals there are no resolution issues, but that Node imports are now blocked by Webpack >2.0.0 and the Angular6 webpack configuration does not currently expose them. There has been a suggestion made to allow for hooks in Angular6 to allow users to set this. While these dependencies are optional (as they can't be expected to run in the browser when they're specific to Node.js), a lot of libraries have not caught onto this yet.

In the meantime, based on the suggestions made in the issue discussion, I've added a patch which provides a workaround for the issue. This also seems to conveniently fix PouchDB's access to global as well.

With that done, the build is now passing. I've merged the Angular6 branch to master as all looks well in the latest build. GitHub pages is now serving the docs/ folder with the application compiled by Angular6.

davidlirving commented 6 years ago

As of commit 4690774752c38dc7867077dda97b950e1bc3eab0, both the transcriber and jsalveo now use Dexie.js (an indexeddb wrapper) instead of PouchDB, given PouchDB was only being used for localstorage in the first place and has historically caused a few migration problems.

The Transcriber now depends on JsAlveo 0.1.0 which uses the browser Fetch API instead of the Request.js library, and is also now bundled with Webpack. This also means that the Angular6 compatibility patch that enabled Request.js access to Node controls it shouldn't have needed in the first place, is no longer needed.

A great bonus of moving away from these has reduced the production application size from 2.5 megabytes to 1.3 megabytes.