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

[btford]

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:

• overmind – https://github.com/geddski/overmind
• webpack bundler – https://github.com/webpack/webpack
• ocLazyLoad – https://github.com/ocombe/ocLazyLoad
• angular-widget – https://github.com/wix/angular-widget

[petebacondarwin]

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]

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]

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 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]

@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]

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]

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]

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]

@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]

@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]

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]

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]

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]

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]

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]

@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]

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]

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]

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]

@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]

@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]

@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 https://github.com/angular/angular.js/issues/11015#issuecomment-73628247

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

[gautelo]

@btford Awesome. Looking forward to this. :)

[ewinslow]

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]

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]

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]

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]

@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]

@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]

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]

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.

[gautelo]

@jvandemo That can be done without lazy loading as well. I don't consider a web client a secure client. It is always possible for a user to inject/intercept things. Even if they for some reason don't realize how to pause angular when it's about to bootstrap, you can always modify things. It's javascript. It's not meant to be locked down. Your server is supposed to be the thing that's locked down.

[btford]

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 – If an attacker can run arbitrary JS on a page, you're doomed regardless of whether you're even using Angular. What's to stop an attacker from tearing down the existing app and bootstrapping a new one with malicious code?

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?

@cwalther – If I understand correctly, I think this use case is completely at odds with what we're trying to do with placeholders, and isn't really common enough to warrant in core. The good news is that there are other ways to accomplish this sort of behavior, albeit not at the DI level. Also this is a case that Angular 2's DI system can handle elegantly.

[gautelo]

@btford I heard mention of this feature a few times at ng-conf, so I went back to check what's happening. You mentioned that you would try to incorporate my "Counter proposal 1" into your proposal. However I don't see it in the "Loading new code" section where I would expect it. Didn't it make the cut after all? Awaiting further clarifications, or is this issue abandoned and a solution allready in place somewhere else?

[btford]

@gautelo – Sorry, I'm still in the process of incorporating all the feedback. It was my intention to add your suggestions to the proposal. I'll try and update the original post today.

[btford]

@ocombe –

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?

If you try to register$b with the injector and it has no placeholder for $b, it will throw, even if $b is never instantiated. So the answer is you should either move $b into a different module and not load that module (better), or add a placeholder for it.

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)

You'd need placeholders for the transitive graph of dependencies. I don't think it's possible to implement otherwise.

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?

I don't understand what this means. A module is just a "bucket" that holds providers, run blocks, config blocks, and placeholders.

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

You can only inject an entire module. Modules are the level of granularity for lazy loading. If you want to load part of a module, you'll have to split the module into parts as needed.

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?

Yes. Well, maybe not an error, but you'd at least get a warning.

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?

There will definitely not be any recompilation for directives.

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?

There will need to be support for having multiple placeholders of the same name for directives.

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?

You do not lazy load components. You only lazy load modules. And actually, you only lazily provide, something else (a code loader) actually does the loading. If you try to add something to an injector, it will throw when you try to add it with this new API.

[cwalther]

Also this is a case that Angular 2's DI system can handle elegantly.

I’m glad to hear that!

Thanks for the confirmation about placeholders and plugins, that’s what I suspected. I’m not so much worried about 1.x actually, as what I’m currently doing there (which, if I understand correctly, is what other current lazy-loading solutions do: keeping the registration methods of a module around during the run phase) seems to be working well enough so far.

[ocombe]

Hmm ok thanks for the answers @btford. That's what I feared: this implementation will be really hard to use. If you want to lazy load a module from an external library you'll have to create placeholders for all of their services, controllers, ... It will be a nightmare.

Let's say that you want to lazy load angular-translate, I have no idea what the name of 3/4 of their services/directives/... are, and they probably define many things for internal use, when I only use one or two services. How do you expect users to know about all of those things? They will have to read the source code of every new library that they want to lazy load?

There should be a way for users to only define placeholders for the things that they'll use. If you say that we can only lazy load modules, then this should be easy to implement. The hard part with lazy loading is when you want to add new components to existing modules because you have to think about the run/config phases, about the existing components with the same name, ... But loading a complete new module should not cause too many problems. In fact lazy loading new modules doesn't really require placeholders.

I'm afraid that if you choose this implementation then you will complicate the process more than necessary. But it is also good news for me because it means that ocLazyLoad will still be useful :)

[gautelo]

@ocombe You've missed the main thing. You shouldn't manually write these placeholders. That should be automated by your build process. It shouldn't be very hard to extract this information from your (or other peoples) sourcefiles and dynamically build the placeholder files from grunt/gulp.

The second most important thing that's missunderstood is which things should be lazy loaded. Even though you could lazy load angular-translate, you probably want that for all of your application, so you shouldn't lazy load that. If your application consists of hundreds of views and an inhouse component library with data services etc., then you should lazy load your view modules, not your component and service library. In short, this is not an effort to lazy-load framework. It's an effort to lazy load application parts for those applications that are huge.

Why would you even want to lazy load the component libraries? Those are probably used by everything anyway, so they would be loaded in the start no matter what.

(Of course there might be an instance where one subset of your components/services are used exclusively for certain views. Well, in that case make those things a module, and generate the placeholders. This proposal should still help in that case.)

[btford]

this implementation will be really hard to use

I think @geddski had similar concerns. I'm exploring an approach that would make it easy to automatically generate the placeholders. The problem is that it can be difficult to statically analyze the Angular module API. It might be worthwhile to also provide an option to turn off this strict "placeholder." requirement, with the understanding that in doing so you might create a system that's difficult to reason about.

I'm afraid that if you choose this implementation then you will complicate the process more than necessary. But it is also good news for me because it means that ocLazyLoad will still be useful :)

ocLazyLoad will be useful regardless – this API is just one piece in lazy loading, not an end-to-end solution. :)

[ocombe]

@gautelo: Hmm yes I took angular-translate as an example, but it's probably something that would be used everywhere in your app. Let's say that I want to lazy load ui-grid because I have grids somewhere in the app. I don't need this in other parts of my app.

I'm ready to bet that most users use lazy loading for libs and not for their own modules. It's really rare that your own modules become so big that you need to lazy load them to gain enough kb to make it worth while.

Of course you can use tools for that, but someone will have to write them before you can use them (In fact, I started working on something similar for ocLazyLoad, so maybe it will be useful for Angular in the end, not just for my lib). But those tools will probably have bugs, or maybe they won't be maintained as fast as you'd like (if someone does it on his free time like most open source projects, you can't expect them to add new code every days). And many developers don't use tools (I know, it's a shame but it's also a fact). Tools are for dedicated developers. Also sometimes you just want to write a quick PoC and don't want to take too long on adding/configuring tools.

@btford: I'm really interested in this approach that would help generating the placeholders. I started working on a code analysis tool that would understand Angular dependencies, but if you have any leads, please share them :) If we can turn this "strict mode" off, then it would make it way easier. Only those who know what they do and accept the risks will turn it off and everyone is winning.

[gautelo]

@ocombe I agree, for a quick poc I won't use tools. And also I won't bother with lazy-loading ;)

As for a non-strict mode. I do appreciate that this could be very usefull for many. Definitely worth exploring if it's possible to support something like that.

[jvandemo]

@jvandemo – If an attacker can run arbitrary JS on a page, you're doomed regardless of whether you're even using Angular. What's to stop an attacker from tearing down the existing app and bootstrapping a new one with malicious code?

@btford — You're right, I never thought of tearing down the entire app and bootstrapping a new one. I always thought you were safe after the bootstrap process in that you couldn't inject malware anymore. Thanks for explaining! (Thanks to @gautelo @ocombe as well!)

[andrezero]

just a +1 for making the strict mode optional for all the reasons mentioned above

an extra +1 to make it opt-in

and a stretch +1 to make it opt-in per module

[andrezero]

@btford my mind is puzzled with this:

I assume .config() and .run() of lazy loaded modules to be executed as JS is loaded, whatever means are used to load it.

This means the execution order (config > run) will be vertical (as in per module) as opposed to horizontal (all configs > all runs).

Isn't this a problem for loading groups of modules with complex inter-dependencies that are phase sensitive?

[gautelo]

@andrezero Yes, that's a problem. I see only two solutions, and neither one is optimal.

1) Allow this to behave differently when lazy loading. (Potentially confusing.) 2) Disallow lazyloading modules with .config() and/or .run() blocks. (Less confusing, but is limiting the usefullness. However, the main scenario involves the router. The run-block for the ui-router is effectively the resolve blocks. So not being able to have config/run blocks shouldn't really be a problem in the main scenario.)

[jvandemo]

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]

@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]

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]

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.. :)