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

Open
btford opened this Issue Feb 9, 2015 · 74 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 1.5-candidate 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
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.

@btford btford referenced this issue in angular/router Feb 9, 2015
Open

feat(1.x): lazy-loading #22

@btford
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
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
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
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.

@lgalfaso
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
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
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
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
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
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
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
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
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.

@btford
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
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
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
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
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
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.

@gautelo
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
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
gautelo commented Feb 18, 2015

@btford Awesome. Looking forward to this. :)

@ewinslow
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.

@btford
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
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
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
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
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?
@ocombe ocombe referenced this issue in ocombe/ocLazyLoad Mar 8, 2015
Closed

Angular 1.5 & ocLazyLoad #138

@jvandemo
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
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.

@gautelo
gautelo commented Mar 9, 2015

@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
Contributor
btford commented Mar 9, 2015

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
gautelo commented Mar 9, 2015

@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
Contributor
btford commented Mar 9, 2015

@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
Contributor
btford commented Mar 9, 2015

@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
cwalther commented Mar 9, 2015

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
Contributor
ocombe commented Mar 9, 2015

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
gautelo commented Mar 9, 2015

@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
Contributor
btford commented Mar 9, 2015

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
Contributor
ocombe commented Mar 9, 2015

@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
gautelo commented Mar 9, 2015

@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 commented Mar 9, 2015

@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
gautelo commented Mar 10, 2015

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

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

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

@gautelo
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
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
Contributor
ocombe commented Mar 17, 2015

Hey, works for me :)
Thanks

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

@geddski
Contributor
geddski commented Mar 17, 2015

Yay thx @btford!

@Narretz Narretz added this to the Ice Box milestone Mar 22, 2015
@raul-arabaolaza

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
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
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
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
Contributor
geddski commented Mar 28, 2015

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

@raul-arabaolaza

@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

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

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

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

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
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
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
gautelo commented Apr 6, 2015

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

@andrezero

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

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.

This was referenced Feb 16, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment