patrickjs / angular-idle-preload Goto Github PK

View Code? Open in Web Editor NEW

100.0 7.0 7.0 56 KB

:soon: Angular Idle Preload for preloading async routes via @TipeIO

Home Page: https://tipe.io

License: MIT License

TypeScript 100.00%

angular idle requestidlecallback scheduling angularclass tipe

angular-idle-preload's Introduction

Angular Idle Preload

Angular Idle Preload for preloading async/lazy routes using requestIdleCallback (or fallback to setTimeout which is run outside of zone.js [Angular 6+)

Why should I use angular-idle-preload?

Scheduling non-essential work yourself is very difficult to do. It’s impossible to figure out exactly how much frame time remains because after requestAnimationFrame callbacks execute there are style calculations, layout, paint, and other browser internals that need to run. A home-rolled solution can’t account for any of those. In order to be sure that a user isn’t interacting in some way you would also need to attach listeners to every kind of interaction event (scroll, touch, click), even if you don’t need them for functionality, just so that you can be absolutely sure that the user isn’t interacting. The browser, on the other hand, knows exactly how much time is available at the end of the frame, and if the user is interacting, and so through requestIdleCallback we gain an API that allows us to make use of any spare time in the most efficient way possible.

links

Install

npm install angular-idle-preload --save

import { IdlePreload, IdlePreloadModule } from 'angular-idle-preload';

@NgModule({
  bootstrap: [ App ],
  imports: [
    IdlePreloadModule.forRoot(), // forRoot ensures the providers are only created once
    RouterModule.forRoot([], { useHash: false, preloadingStrategy: IdlePreload }),
  ]
})
export class Main {}

enjoy — PatrtickJS

angular-idle-preload's People

Contributors

Stargazers

Watchers

Forkers

davidmilberg gisyellow joinmytrip yildiraymeric yazharasu zhadanmyk

angular-idle-preload's Issues

esm build

Not compatible with Angular Universal

I try to make it work with Angular Universal. The main problem is in node: window is not defined

I have added:

var mockWindow = {
    setTimeout: function(fn, time) { return gobal.setTimeout(fn, time); }
}

function _requestIdle(zone) {
    var win = typeof window === 'undefined' ? mockWindow : window;
    if (win.requestIdleCallback) {
        return function (fn) { return win.requestIdleCallback(fn); };
    }
    return function (fn) { return zone.runOutsideAngular(function () { return win.setTimeout(fn, 10); }); };
}

But then I get the error:

EXCEPTION: Response with status: 200 Ok for URL: null

/Users/fabienrogeret/Projects/Impressview/web/node_modules/zone.js/dist/zone-node.js:158
                        throw error;
                        ^
Response with status: 200 Ok for URL: null

Any idea?

Update for angular 5

ERROR in [at-loader] ./node_modules/@angularclass/idle-preload/dist/index.d.ts:1:39
TS2305: Module '"MYPATH/node_modules/@angular/core/index"' has no exported member 'OpaqueToken'.
webpack: Failed to compile.

Cannot find module 'rxjs/observable' error

I got this when using [email protected] with [email protected]

ERROR in node_modules/angular-idle-preload/dist/index.d.ts(2,28): error TS2307: Cannot find module 'rxjs/observable'.

Please advise. What should I do?

Not working?

I'm using this starter: https://github.com/qdouble/angular-webpack2-starter

I have created few more lazy routes than the starter have and I have replaced:

RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules}),

IdlePreloadModule.forRoot(), // forRoot ensures the providers are only created once
RouterModule.forRoot([], { useHash: false, preloadingStrategy: IdlePreload }),

But when starting the application with yarn start:hmr the main route is loaded but not child route, this is working well with PreloadAllModules but not with IdlePreload.

Nothing happens, modules are not loaded

Cannot find module 'rxjs/observable'

I hosted my angular application on a linux server and got error "Cannot find module 'rxjs/observable'" on the build process.

I ended up editing the @AngularClass index.d.ts from rxjs/observable to rxjs/Observable

Angular 6 / rxjs 6 compatability

Currenlty this library is not compatible with rxjs 6. Since Angular 6 requires rxjs 6 it is also not compatible with Angular 6.

ERROR in ./node_modules/angular-idle-preload/dist/index.js
Module not found: Error: Can't resolve 'rxjs/observable/of' in '/my-project//node_modules/angular-idle-preload/dist'
 @ ./node_modules/angular-idle-preload/dist/index.js 9:11-40
 @ ./src/environments/environment.ts
 @ ./src/app/app.routes.ts
 @ ./src/app/app.routes.spec.ts
 @ ./src sync \.spec\.ts$
 @ ./src/test.ts

Until this is fixed we can use rxjs-compat as a workaround.