New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat($injector): Deferred loading of providers into the injector #11015

Closed
btford opened this Issue Feb 9, 2015 · 76 comments

Comments

Projects
None yet
@btford
Contributor

btford commented Feb 9, 2015

This is a draft for this feature. I'm still working on the API. Feedback welcome.

Summary

This is a proposal for a new API in Angular that would make it easier for developers to lazy load parts of their application.

This proposal is only for adding loaded providers into a bootstrapped app's injector. It does not include the lazy loading functionality itself, but rather complements module loaders like require.js, webpack, or SystemJS.

Motivations

Developers want to be able to lazy load application code for a variety of reasons. One is to deliver smaller initial payloads. Another is to hide application logic from unprivileged users (think admin panels) as a first layer of security.

Developers are already hacking their own lazy-loading solutions into 1.x, so there's a clear demand for support. Angular 2 will support lazy-loading, so having facilities in Angular 1 means we can write facades that better align APIs (for example, in the new router) and ease migration.

Finally, this API only addresses adding loaded code into Angular's injector, and does not implement lazy loading itself. There are already existing tools that can do this, so we just want to provide a nice API for them to hook into Angular.

Implementation

The implementation would consist of a new method on Angular Modules and a new service.

You would register some placeholder in the injector. Then you use a service to add the provider later.

lazy.js:

var lazyModule = angular.module('lazy', []);
lazyModule.factory('a', …);

app.js:

var ngModule = angular.module('app', []);

// names of services that some module will provide
ngModule.placeholder(['a', 'b', 'c']);
ngModule.directivePlaceholder(['myFirstDirective', 'mySecondDirective']);

ngModule.run(function($lazyProvide) {
  $lazyProvide.addModule('lazy'); // or: $lazyProvide.addModule(lazyModuleRef);
});

The only change to the behavior of the injector is that trying to inject a service that only has a placeholder, and not a corresponding provider implementation will throw a new type of error. The injector is still synchronous. HTML that has already been compiled, will not be affected by newly loaded directives.

Placeholders

The goal of this placeholder API is to make it easy to reason about how an app should be put together. Still, it's important that the ability to lazy-load parts of your app isn't prohibitively expensive because the work of adding the placeholders is too much.

The placeholder API is designed so that if a developer is using the AngularJS module system in an idiomatic way, you could statically analyze an app and automatically generate placeholders. ng-annotate already has most of this functionality, so I suspect it'd be easy to add generating placeholders to it.

Okay but I really hate the placeholders thing

You can disable the requirement to have a placeholder before a module is lazily added with the following directive:

<div ng-app="2Cool4SchoolApp" ng-allow-dangerous-lazy-providers>
  <!-- ... -->
</div>

This works the same as ngStrictDi.

If manually bootstrapping, you can use the following bootstrap option:

angular.bootstrap(someElt, ['2Cool4SchoolApp'], {
  allowDangerousLazyProviders: true
});

This is for developers who really know what they're doing, and are willing to maintain the invariants about lazy loading manually.

My goal is to make it so easy to provide placeholders that we can deprecate this API because it's never used. But because there's a clear demand for such an option in the Angular community, I want to make sure that it's possible.

Module redefinition

To avoid situations where it's ambiguous which implementation of a module is used in an app, once an app has been bootstrapped, any modules that include a placeholder cannot be redefined. Trying to redefine a module like this will throw an error:

it('should throw if a module with placeholders is redefined after being bootstrapped', function () {
  angular.module('lazy', []).placeholder(['a', 'b', 'c']);
  angular.bootstrap(document, ['lazy']);
  expect(function () {
    angular.module('lazy', []).placeholder(['d', 'e', 'f']);
  }).toThrow();
});

it('should not throw if a module with placeholders is redefined before being bootstrapped', function () {
  angular.module('lazy', []).placeholder(['a', 'b', 'c']);
  expect(function () {
    angular.module('lazy', []).placeholder(['d', 'e', 'f']);
  }).not.toThrow();
  angular.bootstrap(document, ['lazy']);
  // expect the bootstrapped app to have placeholders for `d`, `e`, `f`.
});

Adding to a module after bootstrap

To avoid situations where it's ambiguous what is actually included in a module, once a module with placeholders has been included in a bootstrapped app, it cannot have new placeholders or providers added to it.

it('should throw if a module has placeholders added after being bootstrapped', function () {
  angular.module('lazy', []).placeholder(['a', 'b', 'c']);
  angular.bootstrap(document, ['lazy']);
  expect(function () {
    angular.module('lazy').placeholder(['d', 'e', 'f']);
  }).toThrow();
  expect(function () {
    angular.module('lazy').factory('foo', function () {});
  }).toThrow();
});

it('should not throw if a module has placeholders added before being bootstrapped', function () {
  angular.module('lazy', []).placeholder(['a', 'b', 'c']);
  expect(function () {
    angular.module('lazy').placeholder(['d', 'e', 'f']);
  }).not.toThrow();
  angular.bootstrap(document, ['lazy']);
  // expect the bootstrapped app to have placeholders for `a`, `b`, `c`, `d`, `e`, and `f`.
});

Loading new code

Loading the provider implementation would be left up to the application developer. It is the responsibility of the developer to make sure that components are loaded at the right time.

For instance, you might use it with ngRoute's resolve:

$routeConfig.when('/', {
  controller: 'MyController',
  resolve: {
    'a': () => $http.get('./lazy.js').then((contents) => {
        // this example is silly
        $injector.addModule(eval(contents));
        return $injector.get('a');
      })
    }
  });

This API intentionally does not include a way to "unload" a service or directive.

Run and config blocks

Lazy loaded modules will not run config blocks:

it('should throw if a module has config blocks', function () {
  angular.module('lazy', []).config(function () {});
  expect(function () {
    $injector.addModule('lazy');
  }).toThrow();
});

But lazily loaded modules will run run blocks when they are loaded.

it('should run run blocks', function () {
  var spy = jasmine.createSpy();
  angular.module('lazy', []).run(spy);
  $injector.addModule('lazy');
  // flush
  expect(spy).toHaveBeenCalled();
});

Risks

The API should mitigate the possibility of making it difficult about the state of the injector. For example, we want developers to be able to distinguish between a case where a user mistyped a provider's name from a case when it was requested before it was loaded. Since compiled templates will not be affected by lazily loaded directives, the compiler should also warn if it compiles a template with placeholder directives, but not their implementation.

On the other hand, the "placeholders" should not require too much upkeep, otherwise this API would be too cumbersome to use. Ideally, the placeholders could be automatically generated at build time.

Prior art

I looked at these lazy-loading solutions:

@btford btford added the branch: 1.5.x label Feb 9, 2015

@btford btford changed the title from feat($injector): Deferred loading of providers into Angular 1.4's injector to feat($injector): Deferred loading of providers into the injector Feb 9, 2015

@petebacondarwin

This comment has been minimized.

Show comment
Hide comment
@petebacondarwin

petebacondarwin Feb 9, 2015

Member

So just to be clear: this solution explicitly does not support unloading of components, right?

Also, although it allows directives to be lazily loaded, HTML that has already been compiled, will not then receive the benefit of the newly loaded directives, right?

Finally, what is the motivation for using a new service $lazyProvide, rather than, say, adding a new method to the $injector? The latter would seem more intuitive to me.

Member

petebacondarwin commented Feb 9, 2015

So just to be clear: this solution explicitly does not support unloading of components, right?

Also, although it allows directives to be lazily loaded, HTML that has already been compiled, will not then receive the benefit of the newly loaded directives, right?

Finally, what is the motivation for using a new service $lazyProvide, rather than, say, adding a new method to the $injector? The latter would seem more intuitive to me.

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Feb 9, 2015

Contributor

So just to be clear: this solution explicitly does not support unloading of components, right?

yes – amended my original post

Also, although it allows directives to be lazily loaded, HTML that has already been compiled, will not then receive the benefit of the newly loaded directives, right?

yes – amended my original post

Finally, what is the motivation for using a new service $lazyProvide, rather than, say, adding a new method to the $injector? The latter would seem more intuitive to me.

Agreed. That seems better.

Contributor

btford commented Feb 9, 2015

So just to be clear: this solution explicitly does not support unloading of components, right?

yes – amended my original post

Also, although it allows directives to be lazily loaded, HTML that has already been compiled, will not then receive the benefit of the newly loaded directives, right?

yes – amended my original post

Finally, what is the motivation for using a new service $lazyProvide, rather than, say, adding a new method to the $injector? The latter would seem more intuitive to me.

Agreed. That seems better.

@ocombe

This comment has been minimized.

Show comment
Hide comment
@ocombe

ocombe Feb 9, 2015

Contributor

Wooo this is awesome!! Sad for my lib, but awesome for angular !
I like the placeholder idea, and also the new injector function, you should add both.

Also, any chance that we could add an interceptor to the loading of a placeholder ?

Here is the scenario: you access a controller that requires a service, angular will try to inject the service, this service hasn't been loaded yet and the interceptor (I say interceptor, but it might be something that you define in the config of your main module) will load the new file and return a promise to the controller which will not be instantiated until the promise is resolved. This would work the same way as the resolve method in the router.

Contributor

ocombe commented Feb 9, 2015

Wooo this is awesome!! Sad for my lib, but awesome for angular !
I like the placeholder idea, and also the new injector function, you should add both.

Also, any chance that we could add an interceptor to the loading of a placeholder ?

Here is the scenario: you access a controller that requires a service, angular will try to inject the service, this service hasn't been loaded yet and the interceptor (I say interceptor, but it might be something that you define in the config of your main module) will load the new file and return a promise to the controller which will not be instantiated until the promise is resolved. This would work the same way as the resolve method in the router.

@lgalfaso

This comment has been minimized.

Show comment
Hide comment
@lgalfaso

lgalfaso Feb 9, 2015

Member

This looks very promising. There are a few things that I find not clear, probably the most problematic is how will this work when there is a module redefinition. Eg.

var moduleA = angular.module('lazy', []);
moduleA.placeholder(['a', 'b', 'c']);
moduleA.run(function($lazyProvide) {
  [...]
});

var moduleX = angular.module('foo', ['lazy']);

[...]

var anotherModuleA = angular.module('lazy', []);
moduleA.placeholder(['d', 'e', 'f']);
moduleA.run(function($lazyProvide) {
  [...]
});

var moduleY = angular.module('bar', ['lazy']);

In this case, there are two apps, the app foo and the app bar. The former uses one definition of a module named lazy and the later another. How should the implementation of each of those lazy look like? The reason being that it cannot be

var lazyModule = angular.module('lazy');
lazyModule.service(...);

as if this is done after the module redefinition, then it will add these service to the new version of lazy.

A second question is the following (in this scenario there are no modules redefinitions at all): If there is a lazy module, and this lazy module is used in two different apps. If the first of the apps does whatever needed happen and the implementation is loaded. Will this also load the definition for the second app?

Member

lgalfaso commented Feb 9, 2015

This looks very promising. There are a few things that I find not clear, probably the most problematic is how will this work when there is a module redefinition. Eg.

var moduleA = angular.module('lazy', []);
moduleA.placeholder(['a', 'b', 'c']);
moduleA.run(function($lazyProvide) {
  [...]
});

var moduleX = angular.module('foo', ['lazy']);

[...]

var anotherModuleA = angular.module('lazy', []);
moduleA.placeholder(['d', 'e', 'f']);
moduleA.run(function($lazyProvide) {
  [...]
});

var moduleY = angular.module('bar', ['lazy']);

In this case, there are two apps, the app foo and the app bar. The former uses one definition of a module named lazy and the later another. How should the implementation of each of those lazy look like? The reason being that it cannot be

var lazyModule = angular.module('lazy');
lazyModule.service(...);

as if this is done after the module redefinition, then it will add these service to the new version of lazy.

A second question is the following (in this scenario there are no modules redefinitions at all): If there is a lazy module, and this lazy module is used in two different apps. If the first of the apps does whatever needed happen and the implementation is loaded. Will this also load the definition for the second app?

@petebacondarwin

This comment has been minimized.

Show comment
Hide comment
@petebacondarwin

petebacondarwin Feb 9, 2015

Member

@lgalfaso - this is not how I understand it working. You do not declare a dependency upon a lazy loaded module. You specify in your loaded module placeholders that will be provided by some lazy loaded module later.

So in your example, the injector gets created with a bunch of placeholders for services. The actual implementation of these services can be loaded via any kind of module at a later time:

  • app foo's $injector contains placeholders for a, b, c
  • app bar's $injector contains placeholders for a, b, c, d, e, f

We don't reopen modules to load the lazy components. We actually create a completely new module and load it into the injector - it just happens to fill some or all of these placeholders.

Member

petebacondarwin commented Feb 9, 2015

@lgalfaso - this is not how I understand it working. You do not declare a dependency upon a lazy loaded module. You specify in your loaded module placeholders that will be provided by some lazy loaded module later.

So in your example, the injector gets created with a bunch of placeholders for services. The actual implementation of these services can be loaded via any kind of module at a later time:

  • app foo's $injector contains placeholders for a, b, c
  • app bar's $injector contains placeholders for a, b, c, d, e, f

We don't reopen modules to load the lazy components. We actually create a completely new module and load it into the injector - it just happens to fill some or all of these placeholders.

@lgalfaso

This comment has been minimized.

Show comment
Hide comment
@lgalfaso

lgalfaso Feb 9, 2015

Member

Right now, when the line var anotherModuleA = angular.module('lazy', []); is executed, then a new module named lazy is created, but foo is still hooked to the old lazy. When bar is created, then it is hooked to the new lazy. Will this change?

Member

lgalfaso commented Feb 9, 2015

Right now, when the line var anotherModuleA = angular.module('lazy', []); is executed, then a new module named lazy is created, but foo is still hooked to the old lazy. When bar is created, then it is hooked to the new lazy. Will this change?

@shahata

This comment has been minimized.

Show comment
Hide comment
@shahata

shahata Feb 9, 2015

Contributor

I'm not sure I understand the purpose of having to define placeholders for the lazy loaded module. Is this only so that users get a more descriptive exception if they try to use those services prematurely? What happens to services that are defined in the lazy loaded module and were not defined as placeholders? Won't they get added to the injector as well when the lazy module is loaded into the injector?

Contributor

shahata commented Feb 9, 2015

I'm not sure I understand the purpose of having to define placeholders for the lazy loaded module. Is this only so that users get a more descriptive exception if they try to use those services prematurely? What happens to services that are defined in the lazy loaded module and were not defined as placeholders? Won't they get added to the injector as well when the lazy module is loaded into the injector?

@vitaly-t

This comment has been minimized.

Show comment
Hide comment
@vitaly-t

vitaly-t Feb 9, 2015

I don't see it being a good idea.

If you look at the definition of Lazy Loading, you will see it comes from languages (C, C++, C#) that support the concept of interfaces, which gives the natural ability to intercept invalid calls, i.e. calls on instances not yet loaded, so they can be loaded on demand. JavaScript cannot intercept invalid calls, so unless you provide a coding around for every single call attempt, things won't work. And throwing an exception as a standard approach isn't a good idea for JavaScript. Your Achilles heel is right there.

The only lazy loading that JavaScript can do is loading up pieces of code in accordance with the UI partitioning as dictated by the business/dependency logic. For this you already have: Browserify and Webpack. I sincerely hope you are not suggesting to implement one of those as part of Angular core, it would be a shot in the head. A separate module though might make more sense, but the existing alternatives are already too good to just pass them by. There are only so many things Angular can absorb before imploding on the account of its overall reliability (800 open issues on the list speak for themselves).

Links:
http://webpack.github.io/
http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/
http://en.wikipedia.org/wiki/Lazy_loading

vitaly-t commented Feb 9, 2015

I don't see it being a good idea.

If you look at the definition of Lazy Loading, you will see it comes from languages (C, C++, C#) that support the concept of interfaces, which gives the natural ability to intercept invalid calls, i.e. calls on instances not yet loaded, so they can be loaded on demand. JavaScript cannot intercept invalid calls, so unless you provide a coding around for every single call attempt, things won't work. And throwing an exception as a standard approach isn't a good idea for JavaScript. Your Achilles heel is right there.

The only lazy loading that JavaScript can do is loading up pieces of code in accordance with the UI partitioning as dictated by the business/dependency logic. For this you already have: Browserify and Webpack. I sincerely hope you are not suggesting to implement one of those as part of Angular core, it would be a shot in the head. A separate module though might make more sense, but the existing alternatives are already too good to just pass them by. There are only so many things Angular can absorb before imploding on the account of its overall reliability (800 open issues on the list speak for themselves).

Links:
http://webpack.github.io/
http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/
http://en.wikipedia.org/wiki/Lazy_loading

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Feb 10, 2015

Contributor

@VitalyTomilov – not sure if you read the proposal, but it's for an API to be used alongside a module loader, not a module loader itself. The idea is to complement something like webpack or require.js. Your points seem targeted at the "virtual proxy" style of lazy loading, which is totally unrelated to the implementation being proposed.

I added a bit more to the summary to make this more explicit.

Contributor

btford commented Feb 10, 2015

@VitalyTomilov – not sure if you read the proposal, but it's for an API to be used alongside a module loader, not a module loader itself. The idea is to complement something like webpack or require.js. Your points seem targeted at the "virtual proxy" style of lazy loading, which is totally unrelated to the implementation being proposed.

I added a bit more to the summary to make this more explicit.

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Feb 10, 2015

Contributor

@shahata – great questions.

I'm not sure I understand the purpose of having to define placeholders for the lazy loaded module. Is this only so that users get a more descriptive exception if they try to use those services prematurely?

Yes. This is something @IgorMinar suggested.

What happens to service that are defined in the lazy loaded and were not defined as placeholders? Won't they get added to the injector as well when the lazy module is loaded into the injector?

Let's say you load module 'lazy' with some service foo for which a placeholder was not provided. If you attempt to lazily add a provider for foo, the injector will throw an error, explaining that it did not expect foo.

I'm trying to think how to clarify my original post with these answers. Suggestions welcome!

Contributor

btford commented Feb 10, 2015

@shahata – great questions.

I'm not sure I understand the purpose of having to define placeholders for the lazy loaded module. Is this only so that users get a more descriptive exception if they try to use those services prematurely?

Yes. This is something @IgorMinar suggested.

What happens to service that are defined in the lazy loaded and were not defined as placeholders? Won't they get added to the injector as well when the lazy module is loaded into the injector?

Let's say you load module 'lazy' with some service foo for which a placeholder was not provided. If you attempt to lazily add a provider for foo, the injector will throw an error, explaining that it did not expect foo.

I'm trying to think how to clarify my original post with these answers. Suggestions welcome!

@shahata

This comment has been minimized.

Show comment
Hide comment
@shahata

shahata Feb 10, 2015

Contributor

I think this "strict" behavior of throwing if a provider without a placeholder is added lazily should be optional (maybe even opt-in). It sounds like a place where people will keep banging their head when they add some service in the lazy loaded module and forget to add a placeholder....

Contributor

shahata commented Feb 10, 2015

I think this "strict" behavior of throwing if a provider without a placeholder is added lazily should be optional (maybe even opt-in). It sounds like a place where people will keep banging their head when they add some service in the lazy loaded module and forget to add a placeholder....

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Feb 10, 2015

Contributor

Also, any chance that we could add an interceptor to the loading of a placeholder ?

Here is the scenario: you access a controller that requires a service, angular will try to inject the service, this service hasn't been loaded yet and the interceptor (I say interceptor, but it might be something that you define in the config of your main module) will load the new file and return a promise to the controller which will not be instantiated until the promise is resolved. This would work the same way as the resolve method in the router.

@ocombe – this is something I already considered, but it would mean totally rewriting the injector (and anything that uses it) to be totally asynchronous. This means rewriting the compiler, and anything that relies on it. In short, it's entirely too much work and would be a huge breaking change. The good news is that Angular 2 will support Async DI out-of-the-box, so you'll be able to do something like what you propose.

I think the proposed API makes it easy to lazy-load on route changes, which seem to be the 90% case. And it does so without a sweeping breaking change.

Contributor

btford commented Feb 10, 2015

Also, any chance that we could add an interceptor to the loading of a placeholder ?

Here is the scenario: you access a controller that requires a service, angular will try to inject the service, this service hasn't been loaded yet and the interceptor (I say interceptor, but it might be something that you define in the config of your main module) will load the new file and return a promise to the controller which will not be instantiated until the promise is resolved. This would work the same way as the resolve method in the router.

@ocombe – this is something I already considered, but it would mean totally rewriting the injector (and anything that uses it) to be totally asynchronous. This means rewriting the compiler, and anything that relies on it. In short, it's entirely too much work and would be a huge breaking change. The good news is that Angular 2 will support Async DI out-of-the-box, so you'll be able to do something like what you propose.

I think the proposed API makes it easy to lazy-load on route changes, which seem to be the 90% case. And it does so without a sweeping breaking change.

@geddski

This comment has been minimized.

Show comment
Hide comment
@geddski

geddski Feb 10, 2015

Contributor

So glad this is on the radar! Thanks @btford. I agree with @shahata though on the placeholders. If you have to define a placeholder for every service, directive, filter, controller etc to be lazy loaded that would be an enormous amount of extra work for the developer. It's also redundant information that now lives outside of your lazy-load boundaries, reducing the benefit of separation/lazy loading in the first place. Could the placeholders with their associated error messages be optional?

Contributor

geddski commented Feb 10, 2015

So glad this is on the radar! Thanks @btford. I agree with @shahata though on the placeholders. If you have to define a placeholder for every service, directive, filter, controller etc to be lazy loaded that would be an enormous amount of extra work for the developer. It's also redundant information that now lives outside of your lazy-load boundaries, reducing the benefit of separation/lazy loading in the first place. Could the placeholders with their associated error messages be optional?

@petebacondarwin

This comment has been minimized.

Show comment
Hide comment
@petebacondarwin

petebacondarwin Feb 10, 2015

Member

The idea of placeholders is not so painful if you think of it in terms of "module interfaces". the idea is that for any module that you wish to lazy load, you provide an empty shell module that only specifies the placeholders.

For example we could load these three modules at our normal application startup:

angular.module('myApp', ['lazy1Interface', 'lazy2Interface']);


angular.module('lazy1Interface', []).placeholder(['a', 'b', 'c');
angular.module('lazy2Interface', []).placeholder(['d', 'e', 'f');

Then later we could lazily load modules containing the real implementation of those services:

var lazy1 = angular.module('lazy1', [])
  .factory('a', function() { ... })
  .factory('b', function() { ... })
  .factory('c', function() { ... });

$injector.lazyLoad(lazy1);

var lazy2 = angular.module('lazy2', [])
  .factory('d', function() { ... })
  .factory('e', function() { ... })
  .factory('f', function() { ... });

$injector.lazyLoad(lazy2);

One could even generate these lazy interface modules automatically from you concrete modules if you wanted via a build tool.

Member

petebacondarwin commented Feb 10, 2015

The idea of placeholders is not so painful if you think of it in terms of "module interfaces". the idea is that for any module that you wish to lazy load, you provide an empty shell module that only specifies the placeholders.

For example we could load these three modules at our normal application startup:

angular.module('myApp', ['lazy1Interface', 'lazy2Interface']);


angular.module('lazy1Interface', []).placeholder(['a', 'b', 'c');
angular.module('lazy2Interface', []).placeholder(['d', 'e', 'f');

Then later we could lazily load modules containing the real implementation of those services:

var lazy1 = angular.module('lazy1', [])
  .factory('a', function() { ... })
  .factory('b', function() { ... })
  .factory('c', function() { ... });

$injector.lazyLoad(lazy1);

var lazy2 = angular.module('lazy2', [])
  .factory('d', function() { ... })
  .factory('e', function() { ... })
  .factory('f', function() { ... });

$injector.lazyLoad(lazy2);

One could even generate these lazy interface modules automatically from you concrete modules if you wanted via a build tool.

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Feb 10, 2015

Contributor

If you have to define a placeholder for every service, directive, filter, controller etc to be lazy loaded that would be an enormous amount of extra work for the developer.

Agree that this is tedious by hand, but I think this it's solvable with tooling.

It's also redundant information that now lives outside of your lazy-load boundaries, reducing the benefit of separation/lazy loading in the first place.

The information isn't exactly redundant, but it's true that this info is only useful during development.

Could the placeholders with their associated error messages be optional?

I'm worried if we go this route, developers will at first not find the feature valuable, only to later discover that they want it when their app is complex. It's the same trap some developers fell into with DI and minification.

Contributor

btford commented Feb 10, 2015

If you have to define a placeholder for every service, directive, filter, controller etc to be lazy loaded that would be an enormous amount of extra work for the developer.

Agree that this is tedious by hand, but I think this it's solvable with tooling.

It's also redundant information that now lives outside of your lazy-load boundaries, reducing the benefit of separation/lazy loading in the first place.

The information isn't exactly redundant, but it's true that this info is only useful during development.

Could the placeholders with their associated error messages be optional?

I'm worried if we go this route, developers will at first not find the feature valuable, only to later discover that they want it when their app is complex. It's the same trap some developers fell into with DI and minification.

@shahata

This comment has been minimized.

Show comment
Hide comment
@shahata

shahata Feb 10, 2015

Contributor

@petebacondarwin @btford the thing is that the services defined by some module are not by any way its public interface. A module might have many services which it uses only internally and not any business of anyone who wants to load it lazily. More over, imagine I set up some lazy load for some module and everything works fine - a new version of that module which was refactored to extract some internal service could completely break my app...

Contributor

shahata commented Feb 10, 2015

@petebacondarwin @btford the thing is that the services defined by some module are not by any way its public interface. A module might have many services which it uses only internally and not any business of anyone who wants to load it lazily. More over, imagine I set up some lazy load for some module and everything works fine - a new version of that module which was refactored to extract some internal service could completely break my app...

@shahata

This comment has been minimized.

Show comment
Hide comment
@shahata

shahata Feb 10, 2015

Contributor

Another thing (unrelated to the current discussion) - the description above talks a lot about lazy loading providers, but actually we cannot lazy load providers (as in angular.module('myApp').provider(function () {});), right? (since the "config" phase is already over by now)

Contributor

shahata commented Feb 10, 2015

Another thing (unrelated to the current discussion) - the description above talks a lot about lazy loading providers, but actually we cannot lazy load providers (as in angular.module('myApp').provider(function () {});), right? (since the "config" phase is already over by now)

@ocombe

This comment has been minimized.

Show comment
Hide comment
@ocombe

ocombe Feb 10, 2015

Contributor

Yeah that might be a problem, you might not know the full extent of the services/directives/... of a module. You might just use one service, but if you need to predefine them all then you will have to read the source code for that.

Why do we need to define placeholders like that in the first place? Couldn't you just allow the definition of any angular component at any time? If you lazy load a new module it will define its own services & directives at the same time and you should execute the associated invokeQueue & configBlocks when they are defined (if the app has already been bootstrapped).

I get that you might want to know that a service is a placeholder when you try to instantiate it. Maybe we could have a specific syntax for that like ::$service instead of $service ? Or maybe we could just define the place holder for the services we need in our not-lazy-loaded component, but if a new lazy loaded module has more services than you defined then they might still work (because they are defined at the same time of the module?).

Contributor

ocombe commented Feb 10, 2015

Yeah that might be a problem, you might not know the full extent of the services/directives/... of a module. You might just use one service, but if you need to predefine them all then you will have to read the source code for that.

Why do we need to define placeholders like that in the first place? Couldn't you just allow the definition of any angular component at any time? If you lazy load a new module it will define its own services & directives at the same time and you should execute the associated invokeQueue & configBlocks when they are defined (if the app has already been bootstrapped).

I get that you might want to know that a service is a placeholder when you try to instantiate it. Maybe we could have a specific syntax for that like ::$service instead of $service ? Or maybe we could just define the place holder for the services we need in our not-lazy-loaded component, but if a new lazy loaded module has more services than you defined then they might still work (because they are defined at the same time of the module?).

@gautelo

This comment has been minimized.

Show comment
Hide comment
@gautelo

gautelo Feb 13, 2015

My concern

The instructions of what to load (url), and how to load them (procedure) is located where you request the module, rather than where you declare your module placeholder. This means that if you need the same thing in several places you have to maintain the instructions in all of those places. This means two things:

  1. We have to add instructions to the consumers, which isn't very DRY, and moving files around means you need to update all of those urls (which is allready annoying for templateUrls).
  2. If you start without lazy-loading and want to turn it on later, you have to modify your code by adding instructions.

Let's deal with them one at a time.

Counter proposal 1

To deal with the first issue I propose that we add a new declaration syntax which, in addition to the names of the injectable symbols and directives, includes the url or loading-function of the module:

// Same base for both approaches
var mod = angular.module('mymod', ['dep1','dep2'])
mod.lazySymbols(['a', 'b', 'c'])
mod.lazyDirectives(['dir1', 'dir2'])

// By url
mod.lazyUrl('./mymod.js');

// By loader function
mod.lazyLoader(myLoader, ['stuffArgs']);

function myLoader(stuff) {
  return "the code stuff";
}

In effect this simply moves the instructions of how and what to load from the consumer to the declaration. Also I made some changes to naming which I like. This way each lazy-loading method starts with "lazy" so that it's obvious that they belong together. (What's the common term for services, values, factories etc? Would lazyInjectables() be better than lazySymbols()?)

The result is that tooling can now rewrite urls for us automatically without messing with our source code, allowing us to move things around without worrying. Furthermore this is much cleaner as regards separation of concerns; the consumer really shouldn't care where the module comes from, just that it needs that module.

If you keep this proposal, but discard my counter proposal part two then we will still need code at the consumer asking for a lazyloaded module. However it is now much simpler than in the original proposal. Where the consumer used to say "I need that module to be loaded from that location in this way" it is now simply saying "I need that module to be loaded", which I think is a pretty big improvement. Here's what it will look like:

$routeConfig.when('/', {
  controller: function(a){},
  resolve: {
    '__lazy': () => $injector.lazy('mymod')
    }
  });

Where $injector.lazy() returns a promise which resolves once the module has been loaded and the placeholders replaced. Once that's done calling $injector.get('a') should work as normal, and the controller and compiler should get what they expect.

Notes

  • Doing an $injector.lazy('mymod') should also load any downstream modules it depends on that are also lazy declared.
  • It should be permissible to provide the same lazyUrl(..) for several modules and have them all defined in the same file.
  • Those two mean you usually shouldn't have to load many modules. But if you do, you can use $q.all or add several resolve properties.

Counter proposal 2

In order to deal with issue 2, we have to go a step further. If the $injector is going to be able to lazy load lazy-declared modules seamlessly it would need to be based on promisses. By changing the $injector so that $injector.get() would return a promisse it could use a preloaded or lazyloaded module interchangeably.

I am unsure how much work would be involved, but my gut feeling is that it isn't trivial. I mean, that last snippet with the one-liner resolve didn't look that bad, so I'm inclined to say that it might not be worth it. But I think it's at least worth discussing.

The result

  • We wouldn't need a resolve block at all.
  • It would be a breaking change for anybody calling $injector.get(). However I find it probable that mostly people call it to get around the limitations we are discussing, and possibly for some manual bootstrapping, which should be fairly easy to migrate.
  • By removing the need for an $injector.lazy() method, it would be much easier to use lazy-loading of modules for any part of a system. Without it there will always be a need for a structured choice of when and architecturally where to load. In an application using a router the choice is obvious and outlined above. But not all applications uses a router.

gautelo commented Feb 13, 2015

My concern

The instructions of what to load (url), and how to load them (procedure) is located where you request the module, rather than where you declare your module placeholder. This means that if you need the same thing in several places you have to maintain the instructions in all of those places. This means two things:

  1. We have to add instructions to the consumers, which isn't very DRY, and moving files around means you need to update all of those urls (which is allready annoying for templateUrls).
  2. If you start without lazy-loading and want to turn it on later, you have to modify your code by adding instructions.

Let's deal with them one at a time.

Counter proposal 1

To deal with the first issue I propose that we add a new declaration syntax which, in addition to the names of the injectable symbols and directives, includes the url or loading-function of the module:

// Same base for both approaches
var mod = angular.module('mymod', ['dep1','dep2'])
mod.lazySymbols(['a', 'b', 'c'])
mod.lazyDirectives(['dir1', 'dir2'])

// By url
mod.lazyUrl('./mymod.js');

// By loader function
mod.lazyLoader(myLoader, ['stuffArgs']);

function myLoader(stuff) {
  return "the code stuff";
}

In effect this simply moves the instructions of how and what to load from the consumer to the declaration. Also I made some changes to naming which I like. This way each lazy-loading method starts with "lazy" so that it's obvious that they belong together. (What's the common term for services, values, factories etc? Would lazyInjectables() be better than lazySymbols()?)

The result is that tooling can now rewrite urls for us automatically without messing with our source code, allowing us to move things around without worrying. Furthermore this is much cleaner as regards separation of concerns; the consumer really shouldn't care where the module comes from, just that it needs that module.

If you keep this proposal, but discard my counter proposal part two then we will still need code at the consumer asking for a lazyloaded module. However it is now much simpler than in the original proposal. Where the consumer used to say "I need that module to be loaded from that location in this way" it is now simply saying "I need that module to be loaded", which I think is a pretty big improvement. Here's what it will look like:

$routeConfig.when('/', {
  controller: function(a){},
  resolve: {
    '__lazy': () => $injector.lazy('mymod')
    }
  });

Where $injector.lazy() returns a promise which resolves once the module has been loaded and the placeholders replaced. Once that's done calling $injector.get('a') should work as normal, and the controller and compiler should get what they expect.

Notes

  • Doing an $injector.lazy('mymod') should also load any downstream modules it depends on that are also lazy declared.
  • It should be permissible to provide the same lazyUrl(..) for several modules and have them all defined in the same file.
  • Those two mean you usually shouldn't have to load many modules. But if you do, you can use $q.all or add several resolve properties.

Counter proposal 2

In order to deal with issue 2, we have to go a step further. If the $injector is going to be able to lazy load lazy-declared modules seamlessly it would need to be based on promisses. By changing the $injector so that $injector.get() would return a promisse it could use a preloaded or lazyloaded module interchangeably.

I am unsure how much work would be involved, but my gut feeling is that it isn't trivial. I mean, that last snippet with the one-liner resolve didn't look that bad, so I'm inclined to say that it might not be worth it. But I think it's at least worth discussing.

The result

  • We wouldn't need a resolve block at all.
  • It would be a breaking change for anybody calling $injector.get(). However I find it probable that mostly people call it to get around the limitations we are discussing, and possibly for some manual bootstrapping, which should be fairly easy to migrate.
  • By removing the need for an $injector.lazy() method, it would be much easier to use lazy-loading of modules for any part of a system. Without it there will always be a need for a structured choice of when and architecturally where to load. In an application using a router the choice is obvious and outlined above. But not all applications uses a router.
@petebacondarwin

This comment has been minimized.

Show comment
Hide comment
@petebacondarwin

petebacondarwin Feb 13, 2015

Member

@gautelo - thank you for you input. I think that this issue thread has brought up some really useful points and discussion.

We have talked about making the injector async in the past but I think that this would be too much of a change for Angular 1.x. As you said, putting the load into a resolve is enough to work around this problem and itself is fairly explicit and intuitive.

Regarding, moving lazy load declaration information to the module, I really like that idea. I wonder if one could go a step further and separate the loader from the module too? Then you would have a situation where the user of the lazy loaded code would not need to know about where and how it was loaded, but also the creator of the module would not need to know what loader was to be used to load it. Does that make sense? An implementation I am thinking about would be to define the loader(s) separately with some mapping between lazy module (url?) and loader.

Member

petebacondarwin commented Feb 13, 2015

@gautelo - thank you for you input. I think that this issue thread has brought up some really useful points and discussion.

We have talked about making the injector async in the past but I think that this would be too much of a change for Angular 1.x. As you said, putting the load into a resolve is enough to work around this problem and itself is fairly explicit and intuitive.

Regarding, moving lazy load declaration information to the module, I really like that idea. I wonder if one could go a step further and separate the loader from the module too? Then you would have a situation where the user of the lazy loaded code would not need to know about where and how it was loaded, but also the creator of the module would not need to know what loader was to be used to load it. Does that make sense? An implementation I am thinking about would be to define the loader(s) separately with some mapping between lazy module (url?) and loader.

@gautelo

This comment has been minimized.

Show comment
Hide comment
@gautelo

gautelo Feb 13, 2015

@petebacondarwin It's funny you should mention that. I actually had a code example like this, but decided to remove it to get my point across as simply as possible.

The lazyLoader function parameter could be set globally, and then you would simply specify the arguments instead of both the loader and the argument.

// At, or before, bootstrapping
angular.setLazyLoader(myLoader);

// At module definition time
mod.lazyArgs(['stuffArgs']); // There are probably better names.

// If you don't set a custom loader this will be synonymous with
mod.lazyUrl('stuffArgs');

The problem is that this doesn't take us all the way as the content of the lazyArgs depend on the loader function, so I don't see how we can proceed to get a clean separation. We need to describe how/where to load along with the placeholders in some way shape or form.

gautelo commented Feb 13, 2015

@petebacondarwin It's funny you should mention that. I actually had a code example like this, but decided to remove it to get my point across as simply as possible.

The lazyLoader function parameter could be set globally, and then you would simply specify the arguments instead of both the loader and the argument.

// At, or before, bootstrapping
angular.setLazyLoader(myLoader);

// At module definition time
mod.lazyArgs(['stuffArgs']); // There are probably better names.

// If you don't set a custom loader this will be synonymous with
mod.lazyUrl('stuffArgs');

The problem is that this doesn't take us all the way as the content of the lazyArgs depend on the loader function, so I don't see how we can proceed to get a clean separation. We need to describe how/where to load along with the placeholders in some way shape or form.

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Feb 18, 2015

Contributor

@gautelo – totally agree with your first counter proposal. You should be able to add some metadata about how to load the module to where you declare the placeholders.

Your second counter-proposal would not work. See #11015 (comment)

I'll try and spend some time this evening updating my proposal accordingly.

Contributor

btford commented Feb 18, 2015

@gautelo – totally agree with your first counter proposal. You should be able to add some metadata about how to load the module to where you declare the placeholders.

Your second counter-proposal would not work. See #11015 (comment)

I'll try and spend some time this evening updating my proposal accordingly.

@gautelo

This comment has been minimized.

Show comment
Hide comment
@gautelo

gautelo Feb 18, 2015

@btford Awesome. Looking forward to this. :)

gautelo commented Feb 18, 2015

@btford Awesome. Looking forward to this. :)

@ewinslow

This comment has been minimized.

Show comment
Hide comment
@ewinslow

ewinslow Feb 18, 2015

Contributor

All the async injector proposals I've seen suggest changing currently synchronous injector methods to be async. But have we considered just adding async versions of those methods or adding an $asyncInjector service? Seems like that would resolve the BC issue, no?

The async injector could just take promises registered by the normal injector and resolve them before injecting. Or it could have a totally different registry of services and only fall back to the sync injector if none is found. I.e. the sync injector is a child of the async.

The compiler would use the sync router still so it doesn't have to be rewritten, but the router could use the async injector.

Contributor

ewinslow commented Feb 18, 2015

All the async injector proposals I've seen suggest changing currently synchronous injector methods to be async. But have we considered just adding async versions of those methods or adding an $asyncInjector service? Seems like that would resolve the BC issue, no?

The async injector could just take promises registered by the normal injector and resolve them before injecting. Or it could have a totally different registry of services and only fall back to the sync injector if none is found. I.e. the sync injector is a child of the async.

The compiler would use the sync router still so it doesn't have to be rewritten, but the router could use the async injector.

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Feb 19, 2015

Contributor

The async injector could just take promises registered by the normal injector and resolve them before injecting. Or it could have a totally different registry of services and only fall back to the sync injector if none is found. I.e. the sync injector is a child of the async.

This introduces a ton of incidental complexity, and also severely limits the usefulness of being able to lazy-load code at all. For instance, with this approach, you cannot lazy-load anything that core APIs would inject. This means directives, controllers instantiated with $controller, filters, etc.

Contributor

btford commented Feb 19, 2015

The async injector could just take promises registered by the normal injector and resolve them before injecting. Or it could have a totally different registry of services and only fall back to the sync injector if none is found. I.e. the sync injector is a child of the async.

This introduces a ton of incidental complexity, and also severely limits the usefulness of being able to lazy-load code at all. For instance, with this approach, you cannot lazy-load anything that core APIs would inject. This means directives, controllers instantiated with $controller, filters, etc.

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Feb 19, 2015

Contributor

To address @lgalfaso's comments, I've added two sections – "Module redefinition" and "Adding to a module after bootstrap." tl;dr, I think we should just throw in situations where someone tries to mess with a module that has placeholders after that module has been used in a bootstrapped app. I can't think of any great cases to allow someone to add more placeholders later. In fact, that would totally defeat their purpose.

Contributor

btford commented Feb 19, 2015

To address @lgalfaso's comments, I've added two sections – "Module redefinition" and "Adding to a module after bootstrap." tl;dr, I think we should just throw in situations where someone tries to mess with a module that has placeholders after that module has been used in a bootstrapped app. I can't think of any great cases to allow someone to add more placeholders later. In fact, that would totally defeat their purpose.

@cwalther

This comment has been minimized.

Show comment
Hide comment
@cwalther

cwalther Mar 5, 2015

Would this proposal allow me to build a plugin system, where the application at build time knows the interface of a plugin but does not know which or how many plugins will be available at runtime to satisfy the interface? That’s what I’m currently trying to use lazy loading for, and it seems like the requirement for placeholders makes that impossible. If every plugin (for a specific interface) provides injectables under its own names, then the application needs to know about all plugins to declare their placeholders. If the placeholders just define the interface and all plugins provide injectables of the same names, then I can only have one plugin loaded into the application at a time. Both defeat the purpose of a plugin system. Am I understanding this correctly?

cwalther commented Mar 5, 2015

Would this proposal allow me to build a plugin system, where the application at build time knows the interface of a plugin but does not know which or how many plugins will be available at runtime to satisfy the interface? That’s what I’m currently trying to use lazy loading for, and it seems like the requirement for placeholders makes that impossible. If every plugin (for a specific interface) provides injectables under its own names, then the application needs to know about all plugins to declare their placeholders. If the placeholders just define the interface and all plugins provide injectables of the same names, then I can only have one plugin loaded into the application at a time. Both defeat the purpose of a plugin system. Am I understanding this correctly?

@gautelo

This comment has been minimized.

Show comment
Hide comment
@gautelo

gautelo Mar 5, 2015

@cwalther I don't think this proposal will help you if your requirement for your plugin system is to be able to have more than one implementation of one module interface. For that to work you would have to describe the implementation with some kind of keyword, and provide that when you load. How would the module loader know which implementation to return otherwise?

There is no such functionality in this proposal (or in angular, for that matter.) It is meant simply to allow you to define things up front and load the (single) implementation on demand.

gautelo commented Mar 5, 2015

@cwalther I don't think this proposal will help you if your requirement for your plugin system is to be able to have more than one implementation of one module interface. For that to work you would have to describe the implementation with some kind of keyword, and provide that when you load. How would the module loader know which implementation to return otherwise?

There is no such functionality in this proposal (or in angular, for that matter.) It is meant simply to allow you to define things up front and load the (single) implementation on demand.

@ocombe

This comment has been minimized.

Show comment
Hide comment
@ocombe

ocombe Mar 8, 2015

Contributor

@btford I have a few questions that popped into my head, let me summarize what I understood of the proposed implementation:

When you want to do some lazy loading, you can add modules as placeholders (those modules will be lazy loaded later), and also components (that will probably come with those lazy loaded modules).

Then later when you need a component that has been defined as a placeholder, it will have to have been lazy loaded before you need it because angular will invoke it synchronously.

The lazy loading part will be left to the developer (using requirejs or any kind of existing loader).

Questions:

  • With this implementation, when we lazy load a module, do we have to define all of its components as placeholders, or just the ones that we need ? For example if you load module A that has 3 services ($a, $b & $c), but that you only need $a, do you have to define placeholders for the 3 services? Or just the one that you will use?
  • What happens when this lazy loaded module uses other new modules internally? Do we have to define placeholders for all of them, or can we ignore them since the lazy loaded module will define them? For example you lazy load module A, that internally is defined as a module that requires modules A.a & A.b (that are both defined in the same file)
  • Can you define placeholders for components without having placeholders for modules? Let's say that you just want to lazy load a service for your main module, is this possible? Or do you have to create a new module for each lazy loaded part?
  • With the previous question also comes the question of lazy loading parts of a module at a time, can you lazy load a file with just a controller, then one with just a service, ... Without needing the define a new module each time
  • If you define a placeholder for a directive and that you use an html element that would have triggered this directive, would this throw an error? Let's say that you define a directive for the tag "input", if you have an input into your dom and that you have defined a placeholder for "input", what will happen? If there is no error thrown, will those tags be automatically recompiled when you lazy load the directive, or do you have to do that all by yourself?
  • How can you define multiple placeholders for directives with the same name? Angular allows us to define multiple directives with the same name, so it should theoretically be possible to have 2 directives with the same name in the same module (bad, bad practice), how will you handle that?
  • What happens if you lazy load a component or module that you haven't defined as a placeholder, will it throw an error or just do nothing like it's currently the case?
Contributor

ocombe commented Mar 8, 2015

@btford I have a few questions that popped into my head, let me summarize what I understood of the proposed implementation:

When you want to do some lazy loading, you can add modules as placeholders (those modules will be lazy loaded later), and also components (that will probably come with those lazy loaded modules).

Then later when you need a component that has been defined as a placeholder, it will have to have been lazy loaded before you need it because angular will invoke it synchronously.

The lazy loading part will be left to the developer (using requirejs or any kind of existing loader).

Questions:

  • With this implementation, when we lazy load a module, do we have to define all of its components as placeholders, or just the ones that we need ? For example if you load module A that has 3 services ($a, $b & $c), but that you only need $a, do you have to define placeholders for the 3 services? Or just the one that you will use?
  • What happens when this lazy loaded module uses other new modules internally? Do we have to define placeholders for all of them, or can we ignore them since the lazy loaded module will define them? For example you lazy load module A, that internally is defined as a module that requires modules A.a & A.b (that are both defined in the same file)
  • Can you define placeholders for components without having placeholders for modules? Let's say that you just want to lazy load a service for your main module, is this possible? Or do you have to create a new module for each lazy loaded part?
  • With the previous question also comes the question of lazy loading parts of a module at a time, can you lazy load a file with just a controller, then one with just a service, ... Without needing the define a new module each time
  • If you define a placeholder for a directive and that you use an html element that would have triggered this directive, would this throw an error? Let's say that you define a directive for the tag "input", if you have an input into your dom and that you have defined a placeholder for "input", what will happen? If there is no error thrown, will those tags be automatically recompiled when you lazy load the directive, or do you have to do that all by yourself?
  • How can you define multiple placeholders for directives with the same name? Angular allows us to define multiple directives with the same name, so it should theoretically be possible to have 2 directives with the same name in the same module (bad, bad practice), how will you handle that?
  • What happens if you lazy load a component or module that you haven't defined as a placeholder, will it throw an error or just do nothing like it's currently the case?
@jvandemo

This comment has been minimized.

Show comment
Hide comment
@jvandemo

jvandemo Mar 9, 2015

I'm wondering if this is not introducing security risks?

Currently when an Angular application has been bootstrapped, it can't be altered, so it can't be tampered with.

However, suppose that lazy loading is introduced and suppose that you create a placeholder for a service that needs to be lazy loaded.

Wouldn't this provide a visitor with the ability to inject a harmful service into the Angular application using the console in the browser before the service has ever been lazy loaded?

jvandemo commented Mar 9, 2015

I'm wondering if this is not introducing security risks?

Currently when an Angular application has been bootstrapped, it can't be altered, so it can't be tampered with.

However, suppose that lazy loading is introduced and suppose that you create a placeholder for a service that needs to be lazy loaded.

Wouldn't this provide a visitor with the ability to inject a harmful service into the Angular application using the console in the browser before the service has ever been lazy loaded?

@ocombe

This comment has been minimized.

Show comment
Hide comment
@ocombe

ocombe Mar 9, 2015

Contributor

It wouldn't change anything, javascript isn't secure anyway, it's client side and you can do what ever you want with it, even with the current angular applications.

Contributor

ocombe commented Mar 9, 2015

It wouldn't change anything, javascript isn't secure anyway, it's client side and you can do what ever you want with it, even with the current angular applications.

@jvandemo

This comment has been minimized.

Show comment
Hide comment
@jvandemo

jvandemo Mar 10, 2015

Would it make sense to make placeholder definition a little more intuitive using a pre-defined constant in the global angular object?

Example:

module.directive('directiveName', angular.TO_BE_LAZY_LOADED);
module.service('serviceName', angular.TO_BE_LAZY_LOADED);
module.filter('filterName', angular.TO_BE_LAZY_LOADED);

This could prevent the need for placeholder* functions and if angular.TO_BE_LAZY_LOADED is an object, it could be very quick to detect equality using === in scripts that need to detect whether something has already been loaded or not.

Maybe even a step further

Or maybe take it a step further and create a lazy loading definition object that contains lazy loading settings (e.g. url) and has angular.TO_BE_LAZY_LOADED as its prototype.

To lazy load something, you could then check to see if your required component (service, filter, etc) is an instanceof(angular.TO_BE_LAZY_LOADED) and if so, you would immediately have the definition object that contains all info to actually load it (or pass to your custom loader that does the actual loading).

Once the loaders has finished, the definition object would be replaced by the lazy loaded object.

Don't know it that would make sense though?

jvandemo commented Mar 10, 2015

Would it make sense to make placeholder definition a little more intuitive using a pre-defined constant in the global angular object?

Example:

module.directive('directiveName', angular.TO_BE_LAZY_LOADED);
module.service('serviceName', angular.TO_BE_LAZY_LOADED);
module.filter('filterName', angular.TO_BE_LAZY_LOADED);

This could prevent the need for placeholder* functions and if angular.TO_BE_LAZY_LOADED is an object, it could be very quick to detect equality using === in scripts that need to detect whether something has already been loaded or not.

Maybe even a step further

Or maybe take it a step further and create a lazy loading definition object that contains lazy loading settings (e.g. url) and has angular.TO_BE_LAZY_LOADED as its prototype.

To lazy load something, you could then check to see if your required component (service, filter, etc) is an instanceof(angular.TO_BE_LAZY_LOADED) and if so, you would immediately have the definition object that contains all info to actually load it (or pass to your custom loader that does the actual loading).

Once the loaders has finished, the definition object would be replaced by the lazy loaded object.

Don't know it that would make sense though?

@andrezero

This comment has been minimized.

Show comment
Hide comment
@andrezero

andrezero Mar 10, 2015

@gautelo @btford regarding the config/run order of lazy loaded modules, not allowing at all is severely limiting ... means you could not lazy load any part of your app that contained config/run block .. so many libraries out there do have them, even if sometimes not for the right reasons.

What if there is a simple method to "apply" the lazy loaded modules, i.e., to tell angular that new modules were loaded and they need to have their config/run blocks invoked "horizontally"?

Consider modules lazyA and lazyB loaded by some means after the app is running, invoking something like angular.loadedModules(['lazyA', 'lazyB']) would trigger existing config() blocks followed by run() blocks.

The tradeoff is that the lazy loading mechanism would need to be aware of which modules were loaded. And, failing to declare one of them here can probably yield weird results (or crashes) that are hard to trace.

But still worthy to test the theory, since I can't find any other way that does not involve "nuke" options like the ones mentioned by @gautelo.

Say we are navigating to our "admin" section and we want to load it and suppose we have it bundled in a single file.

resolve: {
  'foo': function () {
    lazyLoaded.load('./admin.js').then(function () {
      angular.loadedModules(['admin', 'dashboard', 'fancyGrid', 'fancyCharts']);
    });
  }
}

These thoughts have been in my head for more than one year, I'm glad there is finally a proper place to share them, but I also don't have solutions. So, just my two convoluted cents.

Cheers

andrezero commented Mar 10, 2015

@gautelo @btford regarding the config/run order of lazy loaded modules, not allowing at all is severely limiting ... means you could not lazy load any part of your app that contained config/run block .. so many libraries out there do have them, even if sometimes not for the right reasons.

What if there is a simple method to "apply" the lazy loaded modules, i.e., to tell angular that new modules were loaded and they need to have their config/run blocks invoked "horizontally"?

Consider modules lazyA and lazyB loaded by some means after the app is running, invoking something like angular.loadedModules(['lazyA', 'lazyB']) would trigger existing config() blocks followed by run() blocks.

The tradeoff is that the lazy loading mechanism would need to be aware of which modules were loaded. And, failing to declare one of them here can probably yield weird results (or crashes) that are hard to trace.

But still worthy to test the theory, since I can't find any other way that does not involve "nuke" options like the ones mentioned by @gautelo.

Say we are navigating to our "admin" section and we want to load it and suppose we have it bundled in a single file.

resolve: {
  'foo': function () {
    lazyLoaded.load('./admin.js').then(function () {
      angular.loadedModules(['admin', 'dashboard', 'fancyGrid', 'fancyCharts']);
    });
  }
}

These thoughts have been in my head for more than one year, I'm glad there is finally a proper place to share them, but I also don't have solutions. So, just my two convoluted cents.

Cheers

@ocombe

This comment has been minimized.

Show comment
Hide comment
@ocombe

ocombe Mar 10, 2015

Contributor

The config/run blocks on new modules should be executed when they are lazy loaded, and the ones from the dependencies should not, by default.

What I did in ocLazyLoad is add params that you can use to rerun config/run blocks on dependencies, but you have to explicitly use this param, because it can often lead to errors or strange behaviors.

There aren't a lot of cases where this is needed, and just executing the run/config block on the new lazy loaded modules is usually what you want.

Contributor

ocombe commented Mar 10, 2015

The config/run blocks on new modules should be executed when they are lazy loaded, and the ones from the dependencies should not, by default.

What I did in ocLazyLoad is add params that you can use to rerun config/run blocks on dependencies, but you have to explicitly use this param, because it can often lead to errors or strange behaviors.

There aren't a lot of cases where this is needed, and just executing the run/config block on the new lazy loaded modules is usually what you want.

@gautelo

This comment has been minimized.

Show comment
Hide comment
@gautelo

gautelo Mar 10, 2015

I agree, it's probably a mistake to disallow lazy-loading modules that include config/run blocks. The consequence is that you get things run out of canonical order, or horizontally, as you say. But as long as things are fairly independent that shouldn't cause any issue 90% of the time. Having the option to rerun blocks, as @ocombe mentions, might solve another 9%. No idea what the last percent is, but it's bound to be something or other.. :)

gautelo commented Mar 10, 2015

I agree, it's probably a mistake to disallow lazy-loading modules that include config/run blocks. The consequence is that you get things run out of canonical order, or horizontally, as you say. But as long as things are fairly independent that shouldn't cause any issue 90% of the time. Having the option to rerun blocks, as @ocombe mentions, might solve another 9%. No idea what the last percent is, but it's bound to be something or other.. :)

@lgalfaso

This comment has been minimized.

Show comment
Hide comment
@lgalfaso

lgalfaso Mar 10, 2015

Member

config blocks can change a behavior and must be executed before the app starts. The immediate consequence is that whatever needs to be configured cannot be loaded after an app starts, and config blocks added to a module after an app should not be executed (BTW, this last part is true for lazy-loaded modules or not, and also applies today)

Member

lgalfaso commented Mar 10, 2015

config blocks can change a behavior and must be executed before the app starts. The immediate consequence is that whatever needs to be configured cannot be loaded after an app starts, and config blocks added to a module after an app should not be executed (BTW, this last part is true for lazy-loaded modules or not, and also applies today)

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Mar 10, 2015

Contributor

I think it's okay to run run blocks, but it's really a bad idea to try to run config blocks. I think by default, it should throw if you try to add a module with config blocks, maybe with an option to ignore them.

Contributor

btford commented Mar 10, 2015

I think it's okay to run run blocks, but it's really a bad idea to try to run config blocks. I think by default, it should throw if you try to add a module with config blocks, maybe with an option to ignore them.

@jvandemo

This comment has been minimized.

Show comment
Hide comment
@jvandemo

jvandemo Mar 10, 2015

Would it make sense for a build tool to extract config blocks from dependencies together with the items that are needed to execute them (e.g. the providers) during initial bootstrap?

Then the run blocks could run whenever the lazy loading happens.

May be prone to errors though as it would probably get complicated...

jvandemo commented Mar 10, 2015

Would it make sense for a build tool to extract config blocks from dependencies together with the items that are needed to execute them (e.g. the providers) during initial bootstrap?

Then the run blocks could run whenever the lazy loading happens.

May be prone to errors though as it would probably get complicated...

@lgalfaso

This comment has been minimized.

Show comment
Hide comment
@lgalfaso

lgalfaso Mar 10, 2015

Member

I will not oppose that when adding a run block, then running applications should execute it, but this is not how applications work today... Anyhow, I think this can cause confusion

Member

lgalfaso commented Mar 10, 2015

I will not oppose that when adding a run block, then running applications should execute it, but this is not how applications work today... Anyhow, I think this can cause confusion

@gautelo

This comment has been minimized.

Show comment
Hide comment
@gautelo

gautelo Mar 10, 2015

One idea would be to allow config blocks, but only when all injected providers are from the module or module-tree that's being lazy-loaded. Basically that we only block the config blocks if you attempt to lazy load a config block that takes an already loaded provider. But again, that could add confusion.

gautelo commented Mar 10, 2015

One idea would be to allow config blocks, but only when all injected providers are from the module or module-tree that's being lazy-loaded. Basically that we only block the config blocks if you attempt to lazy load a config block that takes an already loaded provider. But again, that could add confusion.

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Mar 17, 2015

Contributor

@geddski @ocombe – I just added a new section called "Okay but I really hate the placeholders thing"

Let me know what you think.

Contributor

btford commented Mar 17, 2015

@geddski @ocombe – I just added a new section called "Okay but I really hate the placeholders thing"

Let me know what you think.

@ocombe

This comment has been minimized.

Show comment
Hide comment
@ocombe

ocombe Mar 17, 2015

Contributor

Hey, works for me :)
Thanks

PS: you were coding in java before javascript? :P

Contributor

ocombe commented Mar 17, 2015

Hey, works for me :)
Thanks

PS: you were coding in java before javascript? :P

@geddski

This comment has been minimized.

Show comment
Hide comment
@geddski

geddski Mar 17, 2015

Contributor

Yay thx @btford!

Contributor

geddski commented Mar 17, 2015

Yay thx @btford!

@raul-arabaolaza

This comment has been minimized.

Show comment
Hide comment
@raul-arabaolaza

raul-arabaolaza Mar 27, 2015

Hi,

Currently at work we are implementing a very very modular angular app using lazy loading, the basic idea is to be able to create a sort of Angular RCP (a la eclipse) and create plugins instead of apps.

Every plugin is implemented as an angular module.

This means we have only one angular app but it's functionality is completely dynamic depending on the plugins/components/modules you want to load. For example, we have a main menu directive with a provider that allow us to add new items to the menu, so if we want to expose a new functionality in the app we only need to create a new plugin, hook into the main menu provider and voilá the app is extended.

Every plugin defines its dependencies that are lazy loaded (the plugins itself are also lazy loaded) into the angular app by using the great oclazyLoad library and requirejs.

The initial list of plugins to load comes from a backend service. So our platform is an angular app that simply lazy loads a bunch of components.

This gives us a great amount of flexibility we can expand/modify the app's functionality without code changes, great for role based authorization for example. And allow us to work on reusable isolated components instead of apps. Also we have only one deployed app which can give service to a lot of different user needs based on the components to load

I told all this because I believe this is a use of lazy loading you guys have not considered, all this proposal seems to be based on the idea of lazy loading components that are previously known, for performance reasons, reduce footprint, etc. But what about if I want to lazy load some modules dynamically, that is modules not known at coding time?

Some friction points:

  • Placeholder thing: The ng-allow-dangerous-lazy-providers directive seems a must, I would have nothing against placeholders if I could define them after app bootstrap (which I believe is not possible in the current proposal).
  • Config and run blocks: This is another problem, it could be very interesting for a lazy loaded module to be able to add functionality to the app using standard angular ways. One of this ways I believe is providers. If config or run blocks are not allowed then somehow lazy modules are not regular angular code but a sort of "second class citizens" in an angular app which would IMHO seriously limit its usefulness or capability to be reused as usual angular components or libraries.

HTH, Raúl

raul-arabaolaza commented Mar 27, 2015

Hi,

Currently at work we are implementing a very very modular angular app using lazy loading, the basic idea is to be able to create a sort of Angular RCP (a la eclipse) and create plugins instead of apps.

Every plugin is implemented as an angular module.

This means we have only one angular app but it's functionality is completely dynamic depending on the plugins/components/modules you want to load. For example, we have a main menu directive with a provider that allow us to add new items to the menu, so if we want to expose a new functionality in the app we only need to create a new plugin, hook into the main menu provider and voilá the app is extended.

Every plugin defines its dependencies that are lazy loaded (the plugins itself are also lazy loaded) into the angular app by using the great oclazyLoad library and requirejs.

The initial list of plugins to load comes from a backend service. So our platform is an angular app that simply lazy loads a bunch of components.

This gives us a great amount of flexibility we can expand/modify the app's functionality without code changes, great for role based authorization for example. And allow us to work on reusable isolated components instead of apps. Also we have only one deployed app which can give service to a lot of different user needs based on the components to load

I told all this because I believe this is a use of lazy loading you guys have not considered, all this proposal seems to be based on the idea of lazy loading components that are previously known, for performance reasons, reduce footprint, etc. But what about if I want to lazy load some modules dynamically, that is modules not known at coding time?

Some friction points:

  • Placeholder thing: The ng-allow-dangerous-lazy-providers directive seems a must, I would have nothing against placeholders if I could define them after app bootstrap (which I believe is not possible in the current proposal).
  • Config and run blocks: This is another problem, it could be very interesting for a lazy loaded module to be able to add functionality to the app using standard angular ways. One of this ways I believe is providers. If config or run blocks are not allowed then somehow lazy modules are not regular angular code but a sort of "second class citizens" in an angular app which would IMHO seriously limit its usefulness or capability to be reused as usual angular components or libraries.

HTH, Raúl

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Mar 28, 2015

Contributor

Config and run blocks: This is another problem, it could be very interesting for a lazy loaded module to be able to add functionality to the app using standard angular ways. One of this ways I believe is providers. If config or run blocks are not allowed then somehow lazy modules are not regular angular code but a sort of "second class citizens" in an angular app which would IMHO seriously limit its usefulness or capability to be reused as usual angular components or libraries.

Run lazily-loaded run blocks are fine, but it's very easy to introduce unintended behavior with race conditions between different values for the same settings specified in different config blocks. Config blocks are for setting up behavior before an app bootstraps. If you need to change behavior after bootstrap, you should expose this in the service itself, not the provider.

Yes, this means you might have to re-write existing code that uses config blocks incorrectly. The good news is that your app becomes easier to understand.

Can you give me a specific example where it's somehow desirable to lazy-load a module with a config block?

I told all this because I believe this is a use of lazy loading you guys have not considered, all this proposal seems to be based on the idea of lazy loading components that are previously known, for performance reasons, reduce footprint, etc. But what about if I want to lazy load some modules dynamically, that is modules not known at coding time?

This is a use case that I have specifically considered. See this comment: #11015 (comment). In the future, I'd recommend reading the entire thread before commenting.

The "ng-allow-dangerous-lazy" option is a direct result of this discussion. Apps that want this level of dynamicity at the expense of being easy to reason about can use it. Most apps know ahead of time all possible injectables, hence the placeholders.

Contributor

btford commented Mar 28, 2015

Config and run blocks: This is another problem, it could be very interesting for a lazy loaded module to be able to add functionality to the app using standard angular ways. One of this ways I believe is providers. If config or run blocks are not allowed then somehow lazy modules are not regular angular code but a sort of "second class citizens" in an angular app which would IMHO seriously limit its usefulness or capability to be reused as usual angular components or libraries.

Run lazily-loaded run blocks are fine, but it's very easy to introduce unintended behavior with race conditions between different values for the same settings specified in different config blocks. Config blocks are for setting up behavior before an app bootstraps. If you need to change behavior after bootstrap, you should expose this in the service itself, not the provider.

Yes, this means you might have to re-write existing code that uses config blocks incorrectly. The good news is that your app becomes easier to understand.

Can you give me a specific example where it's somehow desirable to lazy-load a module with a config block?

I told all this because I believe this is a use of lazy loading you guys have not considered, all this proposal seems to be based on the idea of lazy loading components that are previously known, for performance reasons, reduce footprint, etc. But what about if I want to lazy load some modules dynamically, that is modules not known at coding time?

This is a use case that I have specifically considered. See this comment: #11015 (comment). In the future, I'd recommend reading the entire thread before commenting.

The "ng-allow-dangerous-lazy" option is a direct result of this discussion. Apps that want this level of dynamicity at the expense of being easy to reason about can use it. Most apps know ahead of time all possible injectables, hence the placeholders.

@geddski

This comment has been minimized.

Show comment
Hide comment
@geddski

geddski Mar 28, 2015

Contributor

Can you give me a specific example where it's somehow desirable to lazy-load a module with a config block?

Loading an isolated app that has its own routes. This is our primary use case for lazy loading.

Contributor

geddski commented Mar 28, 2015

Can you give me a specific example where it's somehow desirable to lazy-load a module with a config block?

Loading an isolated app that has its own routes. This is our primary use case for lazy loading.

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Mar 28, 2015

Contributor

Loading an isolated app that has its own routes. This is our primary use case for lazy loading.

The New Router lets you re-configure it at run-time. It will soon have a shim that lets it use ngRoute's DSL. In theory this will address your concern, correct?

Contributor

btford commented Mar 28, 2015

Loading an isolated app that has its own routes. This is our primary use case for lazy loading.

The New Router lets you re-configure it at run-time. It will soon have a shim that lets it use ngRoute's DSL. In theory this will address your concern, correct?

@geddski

This comment has been minimized.

Show comment
Hide comment
@geddski

geddski Mar 28, 2015

Contributor

@btford yep should. You're smarter than you look ;)

Contributor

geddski commented Mar 28, 2015

@btford yep should. You're smarter than you look ;)

@raul-arabaolaza

This comment has been minimized.

Show comment
Hide comment
@raul-arabaolaza

raul-arabaolaza Mar 28, 2015

@btford
Sorry I did a quick read of comments and didn't realize the one about the plugin system :(

I know config blocks could introduce race conditions but my point is that without config blocks any module that depends upon libraries with providers could potentially not be compatible with lazy loading.
There are a lot of great libraries out there that use providers, ui router for example. In my opinion trying to find and solve specific cases seems a waste of time, if lazy loading allow the use of providers for lazy modules good, if not and we are aware of the limitations is good too.

Correct me if I am wrong but this proposal means that for a library to be usable with lazy loaded modules must port all/some/part/none configuration logic from providers to services like the new router service you are mentioning.

Honestly speaking I don't mind that on my components, as you say there are advantages on that and probably I have implemented wrong uses for providers. But I understand it could be not very interesting for library owners out there to do a big refactor in their code to make their libraries usable under lazy load. Which in turn could make this feature not worth to be used instead of the existing solutions out there

Regards, Raúl

raul-arabaolaza commented Mar 28, 2015

@btford
Sorry I did a quick read of comments and didn't realize the one about the plugin system :(

I know config blocks could introduce race conditions but my point is that without config blocks any module that depends upon libraries with providers could potentially not be compatible with lazy loading.
There are a lot of great libraries out there that use providers, ui router for example. In my opinion trying to find and solve specific cases seems a waste of time, if lazy loading allow the use of providers for lazy modules good, if not and we are aware of the limitations is good too.

Correct me if I am wrong but this proposal means that for a library to be usable with lazy loaded modules must port all/some/part/none configuration logic from providers to services like the new router service you are mentioning.

Honestly speaking I don't mind that on my components, as you say there are advantages on that and probably I have implemented wrong uses for providers. But I understand it could be not very interesting for library owners out there to do a big refactor in their code to make their libraries usable under lazy load. Which in turn could make this feature not worth to be used instead of the existing solutions out there

Regards, Raúl

@raul-arabaolaza

This comment has been minimized.

Show comment
Hide comment
@raul-arabaolaza

raul-arabaolaza Mar 28, 2015

I forgot to ask for constants, if no config blocks are run, that means a lazy loaded module can not use constants??

raul-arabaolaza commented Mar 28, 2015

I forgot to ask for constants, if no config blocks are run, that means a lazy loaded module can not use constants??

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Mar 28, 2015

Contributor

module that depends upon libraries with providers could potentially not be compatible with lazy loading

Yes, if the library is using config blocks in a way that is not intended.

There are a lot of great libraries out there that use providers, ui router for example.

The mere presence of a provider is not a problem. Also you would never lazy-load UI Router. You'd always need it upfront.

Correct me if I am wrong but this proposal means that for a library to be usable with lazy loaded modules must port all/some/part/none configuration logic from providers to services like the new router service you are mentioning.

This isn't correct. Any library you lazily load that requires reconfiguration at run-time must be re-written just for those services that require configuration. This will mean changing just a few lines of code, which is a small price to pay for determinism.

But I understand it could be not very interesting for library owners out there to do a big refactor in their code to make their libraries usable under lazy load.

Please show me an example where you'd need to do a ton of refactoring.

I forgot to ask for constants, if no config blocks are run, that means a lazy loaded module can not use constants??

This is incorrect, they'll still be useable post-config phase.

Contributor

btford commented Mar 28, 2015

module that depends upon libraries with providers could potentially not be compatible with lazy loading

Yes, if the library is using config blocks in a way that is not intended.

There are a lot of great libraries out there that use providers, ui router for example.

The mere presence of a provider is not a problem. Also you would never lazy-load UI Router. You'd always need it upfront.

Correct me if I am wrong but this proposal means that for a library to be usable with lazy loaded modules must port all/some/part/none configuration logic from providers to services like the new router service you are mentioning.

This isn't correct. Any library you lazily load that requires reconfiguration at run-time must be re-written just for those services that require configuration. This will mean changing just a few lines of code, which is a small price to pay for determinism.

But I understand it could be not very interesting for library owners out there to do a big refactor in their code to make their libraries usable under lazy load.

Please show me an example where you'd need to do a ton of refactoring.

I forgot to ask for constants, if no config blocks are run, that means a lazy loaded module can not use constants??

This is incorrect, they'll still be useable post-config phase.

@christopherthielen

This comment has been minimized.

Show comment
Hide comment
@christopherthielen

christopherthielen Mar 28, 2015

The mere presence of a provider is not a problem. Also you would never lazy-load UI Router. You'd always need it upfront.

I think his point is that ui-router states are declared by registering them with the ui-router state provider, which obviously must happen in the config block. Any lazy loaded user modules that register states with ui-router would have to be reworked to do so at runtime (which is something that ui-router has no official mechanism for)

christopherthielen commented Mar 28, 2015

The mere presence of a provider is not a problem. Also you would never lazy-load UI Router. You'd always need it upfront.

I think his point is that ui-router states are declared by registering them with the ui-router state provider, which obviously must happen in the config block. Any lazy loaded user modules that register states with ui-router would have to be reworked to do so at runtime (which is something that ui-router has no official mechanism for)

@btford

This comment has been minimized.

Show comment
Hide comment
@btford

btford Mar 28, 2015

Contributor

Right, but lazy loading was never officially supported. Backwards
compatibility with existing hacks is not one of my goals here. And again,
the changes to user code would be minimal.

I feel like this thread is going in circles. If you have a specific,
concrete case where it would be difficult for a third party library to be
lazy loaded, and where it cannot be easily adapted, feel free to share.
Otherwise please make sure that what you post hasn't already been
discussed. Thanks!

On Sat, Mar 28, 2015, 11:55 Chris Thielen notifications@github.com wrote:

The mere presence of a provider is not a problem. Also you would never
lazy-load UI Router. You'd always need it upfront.

I think his point is that ui-router states are declared by registering
them with the ui-router state provider, which obviously must happen in the
config block. Any lazy loaded user modules that register states with
ui-router would have to be reworked to do so at runtime.


Reply to this email directly or view it on GitHub
#11015 (comment)
.

Contributor

btford commented Mar 28, 2015

Right, but lazy loading was never officially supported. Backwards
compatibility with existing hacks is not one of my goals here. And again,
the changes to user code would be minimal.

I feel like this thread is going in circles. If you have a specific,
concrete case where it would be difficult for a third party library to be
lazy loaded, and where it cannot be easily adapted, feel free to share.
Otherwise please make sure that what you post hasn't already been
discussed. Thanks!

On Sat, Mar 28, 2015, 11:55 Chris Thielen notifications@github.com wrote:

The mere presence of a provider is not a problem. Also you would never
lazy-load UI Router. You'd always need it upfront.

I think his point is that ui-router states are declared by registering
them with the ui-router state provider, which obviously must happen in the
config block. Any lazy loaded user modules that register states with
ui-router would have to be reworked to do so at runtime.


Reply to this email directly or view it on GitHub
#11015 (comment)
.

@raul-arabaolaza

This comment has been minimized.

Show comment
Hide comment
@raul-arabaolaza

raul-arabaolaza Mar 29, 2015

Right, but lazy loading was never officially supported. Backwards
compatibility with existing hacks is not one of my goals here

Fair enough, no more complaints on my part then

raul-arabaolaza commented Mar 29, 2015

Right, but lazy loading was never officially supported. Backwards
compatibility with existing hacks is not one of my goals here

Fair enough, no more complaints on my part then

@ocombe

This comment has been minimized.

Show comment
Hide comment
@ocombe

ocombe Mar 29, 2015

Contributor

you need the config block if the lazy loaded module defines a decorator, but I'm not sure if there is a way to do that

Contributor

ocombe commented Mar 29, 2015

you need the config block if the lazy loaded module defines a decorator, but I'm not sure if there is a way to do that

@geddski

This comment has been minimized.

Show comment
Hide comment
@geddski

geddski Apr 6, 2015

Contributor

@btford do you have a current implementation of this I can start playing with? I've followed this up to this point.

Contributor

geddski commented Apr 6, 2015

@btford do you have a current implementation of this I can start playing with? I've followed this up to this point.

@gautelo

This comment has been minimized.

Show comment
Hide comment
@gautelo

gautelo Apr 6, 2015

Eyes @btford
Eyes OP - Loading new code section and placeholder syntax
Eyes Counter proposal 1
😃

gautelo commented Apr 6, 2015

Eyes @btford
Eyes OP - Loading new code section and placeholder syntax
Eyes Counter proposal 1
😃

@andrezero

This comment has been minimized.

Show comment
Hide comment
@andrezero

andrezero Apr 7, 2015

I feel like this thread is going in circles.

@btford on the contrary, it has never been so clear.

If one takes the time to read it all.

I believe the doubts expressed by @raul-arabaolaza are very representative of the community anxiety towards AngularJS progress when it comes to maintaining large, complex systems.

Thank you both for the exercise.

@btford can you please improve your original post so that it incorporates the enlightened discussion?

Under "Run and config blocks":

  • that it does not throw if a module with config is lazy loaded (despite your comment it should throw if you try to add a module with config blocks)
  • Any library you lazily load that requires reconfiguration at run-time must be re-written just for those services that require configuration.
  • [constants] they'll still be useable post-config phase.

You might also rethink the // this example is silly, maybe present a more real world one.

andrezero commented Apr 7, 2015

I feel like this thread is going in circles.

@btford on the contrary, it has never been so clear.

If one takes the time to read it all.

I believe the doubts expressed by @raul-arabaolaza are very representative of the community anxiety towards AngularJS progress when it comes to maintaining large, complex systems.

Thank you both for the exercise.

@btford can you please improve your original post so that it incorporates the enlightened discussion?

Under "Run and config blocks":

  • that it does not throw if a module with config is lazy loaded (despite your comment it should throw if you try to add a module with config blocks)
  • Any library you lazily load that requires reconfiguration at run-time must be re-written just for those services that require configuration.
  • [constants] they'll still be useable post-config phase.

You might also rethink the // this example is silly, maybe present a more real world one.

@thelgevold

This comment has been minimized.

Show comment
Hide comment
@thelgevold

thelgevold May 9, 2015

Question about the new router in 1.4:
Why can't the lazy loading be convention based and follow the structure under the components folder?

Meaning, if you navigate using the router and activate a component, can't you just load the top level controller for the component at that point? Ideally you shouldn't have to reference the top level controller using a script tag. Upon instantiating the controller it would be ideal if all the downstream dependencies would be loaded and instantiated at this point as well (services, directives,etc). Again without the need for script tags in index.html. Given how Angular 1.x DI works I suppose this solution would require all downstream resources to be combined into a single file though. I was hoping the new router would function more like Durandal. The router config seems almost identical to Durandal routing, so it seem like it would be possible to support a more seamless RequireJS-esq DI here. It seems a bit odd to me to specify placeholders etc.

thelgevold commented May 9, 2015

Question about the new router in 1.4:
Why can't the lazy loading be convention based and follow the structure under the components folder?

Meaning, if you navigate using the router and activate a component, can't you just load the top level controller for the component at that point? Ideally you shouldn't have to reference the top level controller using a script tag. Upon instantiating the controller it would be ideal if all the downstream dependencies would be loaded and instantiated at this point as well (services, directives,etc). Again without the need for script tags in index.html. Given how Angular 1.x DI works I suppose this solution would require all downstream resources to be combined into a single file though. I was hoping the new router would function more like Durandal. The router config seems almost identical to Durandal routing, so it seem like it would be possible to support a more seamless RequireJS-esq DI here. It seems a bit odd to me to specify placeholders etc.

@Narretz

This comment has been minimized.

Show comment
Hide comment
@Narretz

Narretz Sep 27, 2017

Contributor

The option to load new modules into the injector will be part of 1.6.7. However, it's slightly different from the original proposal. Read more here: 34237f9

Contributor

Narretz commented Sep 27, 2017

The option to load new modules into the injector will be part of 1.6.7. However, it's slightly different from the original proposal. Read more here: 34237f9

@Narretz Narretz closed this Sep 27, 2017

@ocombe

This comment has been minimized.

Show comment
Hide comment
@ocombe

ocombe Sep 27, 2017

Contributor

Nice! It's funny to see that it doesn't take much code to do that when it's inside of the framework :)

Contributor

ocombe commented Sep 27, 2017

Nice! It's funny to see that it doesn't take much code to do that when it's inside of the framework :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment