107 AiA NgModule

00:00 3226
Download MP3

1:55 - Public Service Announcement: Moving past RC54:40 - Advice for an easy transition9:40 - Modules and smaller apps14:15 - Process for moving folders and modules16:30 - Sharing code between projects19:40 - Ahead Of Time Compiler27:00 - Non-Javascript back-end systems29:25 - Functions of the NgModule31:00 - Components and Templates


Stranger Things on Netflix (Joe)Game of Thrones (Jules)Angular 2 Class with John Pop and Dan Moleen. Use code “AIA” for $200 off registration (Joe)Gboard for iPhone (Jules)Factorio game (Steve)Electric Knife Sharpener (Ward)IdeaBlade (Ward)Freshdesk (Charles)


Charles:        Hey everybody and welcome to episode 107 of the Adventures in Angular Show. This week on our panel, we have Joe Eames.Joe:               Hey everybody!Charles:        Jules Kramer.Jules:            Hey everyone!Charles:        Ward Bell.Ward:           Howdy howdy!Charles:        Stephen Fluin.Stephen:       Hello.Charles:        I’m Charles Max Wood from Devchat.tv. Quick reminder about Angular Remote Conf coming up in like three or four weeks. This week, we’re going to be talking about Angular modules. We kind of mentioned them and went into them a little about it last week but there is more depth to be plumbed so we’re going to go ahead and do that. Stephen also wanted to make us a quick public service announcement if you missed it last week, just so that you know what’s coming up on the pipe with RC6.Stephen:       I think we mentioned this in the past but with RC5, we left in a lot of kind of legacy old code really with the intent of helping people upgrade and migrate to the latest RCs. It is our intention that in the next release we’re actually going to be removing all those deprecated capabilities and features. If you’ve been relying on deprecated router or you are using some sort of kind of long-form bootstrap or anything that you might have found in the internal API that we’re kind of weaving around just to help people along, those are going away in the next release. Make sure that you take the time to upgrade to NG Modules, make sure you take time to take all of the directives out of your components and use any modules that kind of meant to be done because those sorts of things will not work in the next release.Ward:        What’s that experience like, Stephen? I’ve done some conversions on relatively the small things but you had look a lot about it to try to make this transition. What’s the general over-all experience, what kind of time can people expect to take, are there traps that they should avoid?Stephen:       Sure. Actually within Google, we’ve updated over 100 apps that were using kind of different legacy things as a part of this process just to validate that the migration path is as smooth as possible. I would say that there aren’t really major touches, the top things that we end up seeing are if anyone is using a router deprecator which we deprecated a few months ago, that’s definitely something that you need to migrate over. I’ve actually done a few of those myself. The configuration is almost identical, it just needs to kind of move a little bit away from the decorator and onto the route configurations part of your NG Module. The other kind of things to be aware of or notice is really finishing up that NG Module migration. You’ve created an NG Module and now you’ve been auto-hoisting all of your directives up to that module, you’re going to want to do those things explicitly going forward.Ward:        What can you say about—have you been doing like, “Okay, we’re just going have a one big app module for the whole darn thing and chuck the whole kitchen sink into it so I have a gigantic collection of declarations and all that stuff.” Or have you been saying, “Maybe that’s not the way to go.”Stephen:       I think it depends kind of where you are in your development process. Stuffing it all into one ginormous NG Module is the fastest way to get up and running just to make sure that you’re not being broken by a future release, but being thoughtful about where your app breaks into pieces is going to be very helpful. We’ve been playing with things like lazy loaded child routes where having that sort of thoughtful design into how your application is architected is really going to end up having performance and usability benefits for users. One example that I see a lot is any sort of administered tools or authenticated tools, keep that in a separate NG Module or multiple separate NG modules and then only Load that and all the off code when a user is trying to do something that requires those sorts of admin privileges.Ward:        I think I agree. I think when you’re doing the conversion, your first step, which is just get it to work. You kind of chucking it all in there. I hear a lot of people who immediately say, “Is that what I have to do, do I have to have one ginormous module with 200 declarations in it?” I say, “Of course not.” Now is the time—now that you got it back on its feet, now is the time to look for the natural scenes in your app and create what we’ve been calling features modules just a module that’s oriented towards a collection of closely related functionality.                     There’s actually a section in the documentation that those through this exercise are taking the one route app module to rule them all and breaking out a feature module and showing them what the steps are. It’s actually a pretty quick process, this is even without worrying about lazy loading root stuff. That’s my recommendation on top of it but I think it’s a two-step dance, as you were describing.Stephen:       There’s even some kind of some neat tricks that you can do along the way to help make things easier. For example if you have every informal group or section of your application, if you have a list of your directives and you have a list of those components, you can actually create a constant that exposes those and then you can create a higher-level constant that groups them to keep your route level app module as you’re doing this kind of rebuilder, you’re finding those scenes to keep it down from 200 component declarations.Ward:        Another thing I do when I have lots of feature modules is each of the feature modules has the same set of imports and stuff like that. I have found creating a single module that re-exports stuff is a real time saver and also sort of simplifies the code I'm looking at. I might have my basic module that all the things are supposed to be there, all my standard gear. Maybe I use NG Module so I want to re-export model, so I re-export the forms, modules, maybe I want to use some stuff from the router, I can export that, maybe I want to link it out, maybe common module. I can put that all together in one thing and now my feature modules look pretty clean because I’ve got my standard kit of components, directives, and pipes that I'd like to see in my templates. That’s really where I’m getting at. That’s a good trick for me.Stephen:       That kind of reflects me. I’ve kind of seen it a hundred times in my career which is that any organizations in business that gets to a certain size is going to start having this kind of idea of shared components or shared services within an application and then just kind of building that into the way you’re building your NG Modules makes a ton of sense. If I’m company X, I’m going to have the company X module that all of my applications that we built, all the various projects we have are going to be importing which can expose the common things we want to use, everything from our standard visual library via some UX toolkit that’s either built from scratch or on top of something like Angular material or any other UI frameworks, as well as kind of logic services, you can centralize all of those as well.Ward:           If you look at your application of any size, you probably were striving to achieve some kind of organization this way by having folders. It’s RC4, whatever that is, you probably have a folder structure just to keep your own sanity. You probably were already organizing your folders along these lines and you had these seams in mind and so your folder structure is probably a good indicator about where a good place to create a module is.Charles:        What about on small apps where you don’t have this kind of neatly broken-up thing, when do you want to start thinking about moving stuff out of the main app module?Stephen:       We’re going to get to long.Charles:           Final one, out.Ward:       Exactly. We crossed 500 this time. I think it’s the exactly the same instinct that leads to you suddenly decide that one big folder with everything in it is no longer working. It’s almost that moment that causes you to stay in it. If I don’t like it all in one folder, I'm probably not going to like it in one big app module. If you’re doing any testing at all, I’ll tell you right away, I highly recommend that you go to your feature modules as quickly as possible, that will get into why we have our testing show.Joe:               I think that a lot of these things that are going to impact the big projects fall by the waist side a little bit when we first put together stuff. I’ve worked at big companies that produce big apps, big Angular apps and other types of stuff. The types of concerns that they have are not usually the types of things that you see talked about on blog posts. These thoughts forward of what do we do, or as an example here our Angular One app, the demo, the code size was 5 megabytes. It was 5 mb download before people can start using the code, they’re using the application. We ended up having to roll on our own lazy loading in Angular One which is not a trivial task, truly not a trivial task. Angular One wasn’t meant to be lazy loaded. Things like that, they sort of miss what most people realize needs to go into a product that can work for large enterprise, for large apps. I hate to use the word enterprise because that implies often times to people things that they don’t identify with. You can be at a very small company, what you consider to be a very small app, and quickly realize that you’re dealing with the same problems that US Bank and Capital One and whoever these guys are dealing with Walmart Labs, they’re dealing with big problems that big apps have that you just don’t deal with when you walk through the tutorials and you just figure out, “I need this, and I need this. I want some service rendering for SEO, I checked off a couple of little things.” But when you go to a big app, the little tiny problems that you ignore get exacerbated so much and magnify that you have to deal with them. Code size is one of them. Like you said, the organization—there’s plenty of big applications, you can spend a lot more money just figuring out and deciding and going through the code and grooming it to follow a few standards than a lot of people will spend building an entire app of small to medium size.Stephen:        You will go through the exercise of re-thinking it throughout the evolution of the application. I can report with great belief that I have since moving to Angular module, NG Module, I’ve done a number of shuffles for the folder structure and various things and it is actually so much easier now that we don’t have all of those cost cutting directives and pipes and stuff like that. I find it really rather easy to move, I’d say, “I really like to refactor this one big thing and do a bunch of things or move it from where it used to be to some place else.” That process is far less painful now with Angular modules than it was before Angular modules. I’m so pleased to say so. You are talking about how Angular One is to do lazy loading. Now, it is like a fall-off from a bicycle, fall of the log. I mean it’s pretty easy to go back and forth between deciding the module is lazy loaded and deciding… It’s just really super simple, maybe we’ll talk about that later in the show.Joe:               I have a follow-up question for you on that specific topic and that is let’s say I put together my app and I’ve decided that I want this piece that I'm going to shove off into some module, separate module. I don’t want to either walk to the steps per se but describe how you feel like that rates on a pain scale, “Oh, I’ve got to take this folder. Everything in it, I got to put into some module and maybe lazy load it, maybe not, whatever.” What’s that process like? How does that feel?Charles:        I’m going to give my answer but I’m curious about Stephen’s experience as well. Mine is like 1, 2, 3, 4. Create folder, create module file, copy in the declarations from where you stole it from before, patch up the one you stole it from and go. It’s maybe a half-hour process for something that is—has share around that stuff in it. But that’s my experience, I’ve done it a number of times now. Stephen, what’s your experience on this?Stephen:       I do it in a couple of steps as well. The first one is the same. I basically move all of the declarations from my original app module into the new one. Basically, anything that used to be owned by and managed by the first module is now in that new one that I’m creating. The first time we’ve hold the file in place, everything’s going to work seamlessly and then what I do is as a second pass, I go and actually move all the files, I re-factor that to point the new paths so the things that are matching the file system to the NG modules.Ward:           There you go. Two ways to do it. Both of them, they feel very quick to me. What’s great about it, you can do all of that because you don’t need to go around and fix up all of the files that you move to correct where they’re getting their directives and pipes from because that’s no longer a problem.Charles:        One thing that I see with this though is that these modules could be used to build a sort of, for a lack of a better term, plug-in system for Angular where you have these modules that you can pull in somehow and then that you declare them in your app module and then everything can see them. Is that one way that we’re looking at taking this where we can then share code between different projects?Stephen:       I don’t know if I would agree with the term plug-in system but the coach shareability code portability is absolutely a design intent. If you look at how we build projects like Angular material that is now an NG Module, or actually it’s a set of NG modules that are available on NGM. We’re also actually looking at serving a meta module so that if you want all of material design, you can actually just import all that at once so you don’t have to specify individual components. But then the idea is because these things are composable, you can actually just import exactly what you need whether you want everything or just specific parts.Ward:           Three of Angular’s old things work this way. The router, drop in module, the HTTP, drop in forms, drop in.Charles:        Okay, I guess my next question is basically along the lines then of let’s say that I have two or three applications, they all authenticate in pretty much the same way, I could build my own module, put it into an NPM package and then just NPM install them into the other ones and then import the module and I’m done?Joe:               Yes.Ward:           Yup.Charles:        I love you guys.Ward:           Absolutely.Stephen:       Part of that, I mean going back to what I was saying at the beginning about this deprecation in the removal of all those kind of legacy things, we want everyone writing code in a similar way and in a very forward looking way. One of the next big horizons that I think a lot of app developers are going to try to take on is using all these composable parts that they’ve built and doing what we call Ahead Of Time compilation where instead of shipping Angular and then rendering and compiling it kind of fly just in time on the browser, you can actually do that at development time and then remove that part from this part that you ship to the browser. Instead of rendering HTML in real time and compiling it, you’re actually just running JavaScript that modifies and adds notes to the dom.Ward:           Yeah, this is ahead of time compiler, AOT compiler, that in the past is referred to as the offline compiler. Stephen is that right?Stephen:       Yep. Here’s the few names kind of informally before you may have heard Static, you may have heard Offline. As we try and make this easier for everyone and as we’re starting to put a documentation on how to do this, you’re going to see the term Ahead Of Time compiled vs Just In Time compiled. The difference there is really the compilation step is actually nearly identical. Just In Time happens in the browser on the client side and Ahead Of Time happens when the developer invokes it at build time.Joe:               Can we first talk a little about where that state of tool is at right now and where does it live, how you invoke it, and maybe walk through just a little bit of what’s different about using the Ahead Of Time compiler vs just the usual thing you do?Stephen:       Sure. This project lives in NPM and on GitHub under the name Compiler CLI and then just at the command line instead of NG which we use for Angular CLI, you're going to see NGC. What that does, it basically takes all of your components and modules and turns them into component factories and module factories. This was something we’re doing kind of behind the scenes in Just In Time, that everyone’s doing so far. Really the focus right now or us is making it as simple and as approachable as possible so that you don’t have to modify your code to get it working and so that it’s very easy to kind of transition between these two modes.There’s a lot of work still going on there but if you’re interested and you feel like wanting to try things ahead of documentation coming out, you can definitely just basically install Compiler-CLI from Angular Scope in NPM and run that on whatever source folder you have or whatever folder you have in your TS config and then there’s a couple more bootstrap steps you can take where instead of referring to platform dynamic, you can refer to platform browser and then instead of bootstrapping your module, you’re going to bootstrap a module factory. If you do those two or three things, then your application is suddenly in Ahead Of Time mode and the actual Angular part of your application itself ends up being about 60% smaller.Ward:        That’s because why, Stephen?Joe:               Hold on. Can you clarify that? When you say 60% smaller, you mean like so it’s 40% of the result size from 100k it’s now 40k?Stephen:       Correct. In Just In Time compartment, what everyone’s been using till now, the compiler part of Angular, part of the library that you actually ship to the browser in that bundle, was about 60% of our source code. It’s a huge piece of code and it exists for a number of different reasons, performance is really one of the top ones. Testability, universalities or ISOmorphisms, the idea that you can run any application on a server without a concept of a DOM, these are some of the reasons that we have a compiler. We had one in Angular One as well but we just never had to think about it. But because it’s so much more powerful in Angular Two, it’s a little bit bigger and that’s why we’ve given you the ability to ship code without it.Ward:           That’s one way, particular over you’re going to smaller payload, it’s going to arrive faster and that means that you’ll actually be able to launch faster. And then the other thing of course, the other performance boost is you’re not wasting time compiling the code on the browser because it’s already pre-compiled.Stephen:       In several of the tests that I did, we had an app that had probably 30 or 40 components and it went from a load time of 1.7 seconds to a load time of 1.2 seconds when you switch from Just In Time compilation to Ahead Of Time compilations. We were very happy with that one.Charles:        Do you just stick this into your build process as part of one of your build steps?Stephen:       Yep. That’s the only reason I would caution anyone. We’re trying to integrate all of the tools so that the Angular CLI uses NGC. There’s discussions right now for example that the Angular CLI should actually just always have your application in offline mode so that you start there and you just kind of always live there so that you never even have to worry about shipping it, the compiler to the browser.Ward:           I’m not ready for that but that’s an exciting prospect. I mean, if it was really that easy for the launch part, I’d say why not? Since that the ultimate delivery vehicle. I only say that, guys, not because I know anything only because I spent all my time not using the AOT. I’m afraid of anything new.Joe:               What’s the state of the AOT compiler?Stephen:       If you look back ever since kind of RC0 a few months ago, AOT has actually worked. It’s been a core part of the design of Angular Two. It was just harder and harder to use and we’re making it easier and easier now. If you look back, I refer to this idea of component factories and module factories, that was how you did it even back then all those things existed, but you had to manually update all of your references. Talking a little about the genesis of NG Module, one of the things that you had to do is you had to manually import all of the directives that you want from Angular. For example if you want NG you want NG4, you want any of the pipes that are kind of part of the platform, you have to import each one of those manually which was a huge pain and it meant that you had to write different code if you want to do Ahead Of Time compilation. Going back to NG Module, that’s one of the reasons we did that is now when you import browser module or common module, that’s where we’re putting all those things and that’s how we’re making sure that the compiler has the right context at build time when it doesn’t encounter those things naturally through a normal run time environment.Ward:           One of the things I find comforting about this, because here I am developing in a Just In Time compiler. Most of us should be frightened of switching compilers because we think that it’s not going to produce the same code. My impression, you can correct me Stephen, is that the Just In Time compiler and the AOT compiler are producing the same code.Stephen:       Yep, that’s correct. Most developer don’t even actually end up seeing the compiled code at all. If you are an Angular developer and you pull up your Angular application, if you look in your sources, if you look hard enough, possibly it helps if you turn off the source mapping, you can actually find all the generated templates in both Angular 1 and 2 where you can see the JavaScript that’s actually running to modify the page. We just kind of hid that away from you previously because you didn’t need to deal with it and you still don’t need to deal with it in the most part, it’s just when is that file getting generated. It’s the same compiler code running, we just want to make sure the context is being setup properly even when you’re not running your application and kind of just normal first do one then do two kind of mode.Ward:           If you’re really geeky and you run any of our plunkers, and then you hit F12 to see the browser tools, you can actually see the factories that are generated on the fly because our plunkers, we always do the typescript stuff in the browser. It’s very easy to see the code that’s being generated and it’s kind of fun to look at it and then quickly close it up and say clearly a human being didn’t do that.Stephen:       I don’t feel the same way, I’m not a big fan of looking at it. Fortunately, I never had to but the idea is that it’s actually BM optimized code. The code gen that’s going on takes no account how do browsers actually work.Ward:           I always say that if you want to really geek out, there’s actually no reason why you have to go in there but it’s kind of fun to see what kind of JavaScript the compiler generated. It’s fun for about a minute and a half and then you say, “Okay, back to my regularly scheduled program.”Charles:        One of the things that I’m wondering about here is that I know a lot of people that do their JavaScript, for a lack of a better term, maybe frontend development and they keep all that stuff in a folder on their backend system and then they run some compilation steps as part of the process. I’m thinking about Rails in particular and you use the Rails Asset Pipeline for that. Would this replace that or are people working on a way to add that into some of these other systems that build for non-JavaScript back-end systems?Stephen:       Sure. Maybe you can clarify more about what you mean by non-JavaScript backend systems?Charles:        For example, Rails uses Note to build the JavaScript but it has its own task and rake that you run to precompile your assets which is kind of this Ahead Of Time build step that you’re talking about now. Is there going to be an easy way to tie that into systems like the Rails Asset Pipeline or just going to be command line or what?Stephen:       Sure. The compiler CLI is a command line tool that runs and does these things kind of for you. It’s really designed with that sort of portability in mind so that people can write whether it’s in the kind of Angular CLI NG Command, whether it’s gulp, whether it’s scrunch, whether it’s web pack. What we want is to be able to be invoked as people want to as a part of their own build chains.Ward:           I think the answer there is yes, Chuck.Charles:        Yeah, that’s what I heard.Jules: You could’ve just said yes.Stephen:       See, I don’t think you guys wanted a yes. I think you want to know how it works.Charles         Okay, it was yes with warm fuzzies.Stephen:       I’ll just say yes from now.Charles:        Stephen, you want to give me a million dollars?Stephen:       No. I want to give you a million dollars Chuck, I just don’t have the million dollars.Jules:            That’s what I was going to say.Stephen:       It’s not my million dollars, it’s someone else’s.Ward:           I’ll give you Joe’s million.Charles:        There we go.Ward:           The million that I was going to give Joe.Joe:               I was just going to give it to Ward anyway.Ward:           There you go. It’s just the gift that keeps giving.Charles:        Back to the discussion of the Ahead Of Time compiler and modules, one other thing that I’ve been thinking about is are there things that the modules do besides imports and exports or is that the complete functionality there?Stephen:       When you build your NG Module, you’re going to see a bunch of kind of different parameters. Beginners, they’re going to see obviously the import or anything that they’re going to pull in, your forms, your third party libraries. They’re going to see declarations which is where you list any of the components or directive pipes that are owned by this module so you should use that module for context when you’re doing the compilation, and then bootstrap. Those are the three that most are going to first encounter. But then as you mentioned, there’s exports, and now I want to build a module that is exposing something of somebody else and then there’s a few others. There’s actually a little bit of magic happening behind the scenes so if you use the Angular Router for example, what we’re doing is we’re registering each of those components that are in your aesthetic route as things that need to be compiled. There’s another parameter called entry components where if the compiler can’t figure out, “Hey, I need to go compile this component because you’re loading it dynamically for example, you’ll want to list things there.Ward:           The intuition to have I think is if you’re going to refer to the component in a template then you’re good to go by declaring it. If you’re test selector and you expected that some other component is going to display it inside of its template, then you put it in declarations. But if it’s something that will never appear in any other template, then it’s going to be one of these things called an entry component. What category of things would never appear in another template? There are two common ones, the first is the app component that you boot up because that never appears in the template at all so you kind of have to mention that and then you’re doing that by mentioning it in bootstrap.Stephen:       We’ve automatically assumed that any components are bootstrapping should be an entry component, should be compiled.Ward:           Exactly, and then the other one that you’re commonly going to encounter is when you route to something. If you remember about how you route to something, you’re throwing it into a router outlet, you’re not actually putting any tag in a template that’s going to represent the component, you are routing to it. That means the router is doing the job of creating the instance of the component and dropping it into the DOM. Fortunately, one of the things that the router module does for you is it looks at that configuration and says, oh I better tell the compiler about these guys too. Pretty much anything that most developers are going to create that doesn’t appear at template we’re going to pick up and tell the compiler about in this thing called the entry components.Charles:        It doesn’t get mentioned in any of those places then it doesn’t get pulled in when it’s compiled?Ward:           It’s gone. It’s not going to be recognized at all, which is a good thing. We forgot to mention that one of the downstream tools—one of the goals here is to deliver the smallest application payload that we can. There’s a lot of stuff that you’re importing and bringing in from Angular that you may not use in your application there because other people want to use it but you didn’t want to use it. There are going to be downstream tools that can shake that stuff that out so anything you’re not using will appear on final payload.Charles:        Yeah, we did a JavaScript Jabber episode on Rollup.js?Stephen:       That is one, yep.Charles:        If you want more details on how that works, go check out that episode, we’ll put a link in the show notes.Ward:           But a lot of what we’re doing in entry components and in the declarations list and entry components is telling them what to generate, what to keep, what not to do so that it’s thrown away. If we didn’t have entry components, then the client wouldn't know to put a code on  it because it can only pre-code in there if it can discover it in a template somewhere. If it’s not in the template, it’s not going to be able to know that it should put that compile thing into that code base. But because it gets listed in entry components, either because you bootstrapped it or you routed to it, then the compiler learns that it’s supposed to keep that code too.Stephen:       There’s one final property on the NG Module decorator. Before I describe it, I want to tell a little bit of a story where I’ve been a developer so I built a lot of components in my time, Angular 2. Occasionally, I will bat finger the name of one of my components in my templates. Then, I would write that, yes it’s true, I will admit it and then I would save the file and I would run it. My application wouldn’t crash, it just wouldn’t work. The things that I had written didn’t load so then these components weren’t rendering. I assume this hasn’t happened to anyone else on the call?Ward:           No.Stephen:       Okay, perfect. Developers like me, one of the things that we did, I think it was on the last release or the next release is we’ve turned on much stricter checking of the components and of the HTML types that you’re using in your templates. We actually should be smart enough to say, “Hey, this HTML tag you used that refers to an Angular directive or this HTML tag you used comes from the HTML.” When you encounter something like that, we should actually build a throw error saying, “Hey, you’re referring to this thing that doesn’t exist.”But with that strict checking comes a problem of what if you’re using an HTML that isn’t an Angular directive and isn’t part of HTML spec. The last parameter that we offer in NG Module is that schemas. What schemas allow you to do is it allows you to specify, “Hey, I’m going to be pulling in this kind of unexpected HTML.” If you ever do this, you’re going to get a warning or an option that you cannot turn it off entirely but have some custom elements as your schema gets chosen, or you can actually supply schema for example I’m working with the Palmar team so that if you want to have inter-operation ability between your Angular 2 application and you Palmar application, you can say, “Hey, I’m using Palmar, these are the elements, these are their schemas and Angular you should be okay with these things.” The idea is we still want to be able to do that strict checking to make sure that you’re not bat fingering or to help you find those types mistakes while still allowing you to do kind of more advanced techniques with HTML and with standard and with web components.Ward:           One that we left out, Stephen we didn’t mention about providers.Stephen:       Oh, everybody knows about providers.Ward:           Yeah, actually this is one of the things that’s a bit of a stumble for people because they’ve encountered providers on components before and so they think that providers on the Angular module is the same thing. It really isn’t quite the same thing. It’s still a provider which means that you’re telling the dependency injection system how to create the service that you want to inject. It’s still a provider, same syntax, but there’s an important difference. When you specify a provider on a component you’re saying, “When Angular creates a new instance of this component, I want it to create a new instance of the service too. If anybody in the subtree component tree asks for this service, it should get it from the one that I’ve got my component here.” It’s kind of scoping it to the components subtree which is a very important mechanism continues to be important in your application design.Modules are a little bit different. Our goal there isn’t to create a little sub-universal, a little private service environment. Our goal with modules is actually to enrich the application as a whole. Therefore, when you have a provider in your module, what you’re really doing is you’re saying, “Oh, I want to contribute this service to the entire application so it gets thrown into essentially the global injector. That’s how the router works. When I had a router module, I don’t want to add just the router service just for one little component. I want everybody to have access to the one true router that’s running all the applications. The router module has its list of providers and those who contributed to the entire application. That’s a distinction that you’ll want to be aware of as you start thinking about how you want to provide service to your application.Jules:            Hey, Ward!Ward:           Yeah?Jules:            You said that you were going to be this great benefactor to my app and making sure that every compartment has access to the router service, the router service is probably a bad example of this but what happens if maybe I only want that router service, again by example, in one component?Ward:           That’s a great question. To make it feel more real, let’s suppose that I have a feature area that’s coping with orders and I have some kind of service that goes and gets orders. When I’m over the customer’s world or I’m over in something else, I don’t want that. Is that kind of the game?Jules:            That’s exactly where I was going, although technically in your scenario we’re still offering customers the orders.Ward:           Let’s pretend they don’t. The safe answer for that is that, which is the same answer that we were using before the Angular modules, is that if I construct my feature area that’s oriented towards orders, I have a top component for that feature. It’s the component that rules that domain. I have that component provide the order service that they access service to get orders and manipulate orders and takes orders. Because I do that within the bounds of that component and within the component providers, then every component that descends from that will see it and nobody above or on the side of the order feature or the order component feature will see it. That is the way you’ve been doing it and that’s the way you can continue to do it.Another option that uses modules is if you’re lazy loading the order feature, every lazy loaded module gets its own private injector. This is not true if you’re not lazy loading but when you lazy load a module, it gets its own injector. If my order module is lazy loaded and my order module provides and order the access service, then it will be visible only within that lazy loaded module, it won’t be visible outside. Those are two ways to do it, the traditional way and then the lazy loaded way.Stephen:       How are we doing?Ward:           I try to say that in as plain English as I could. It’s a tough decision that you have to make. You have to know who you want to have see your services. Modules are really designed to give access and components are way of scoping to that just that component in its subtree.Charles:        Is there anything that we should really dive into or dig into before we get into picks?Joe:               Did we talk about just the default ways, say I don’t want to really use modules or lazy loading because I’m doing something from small to medium or I’m just starting it out? What’s that story like and how does this affect that?Ward:           That’s a great question, Steve you want to take that?Stephen:       Let me repeat the question to make sure I’m understanding, what if I have a legacy application providers or?Joe:               Oh, no. I’m starting up a new app and I don’t care that modules are a feature that exists in Angular 2, lazy loading and all that, I just don’t care about that. I just need to build a small to medium sized app and I have no care nor need for modules. How do they affect me?Stephen:       If you have no dependencies, then you should go into the RC4 and RC5 migration site on our dock site and copy and save the file, the bootstrap and the very simple NG Module. You need to create an NG Module and you need to bootstrap it.Ward:           Quickstart also, Quickstart has that setup for you, it’s got one—you’re always going to have one root-app module but that’s about as much as you really need to know about it. You just start adding, every time you create a new component that you want to reference, you just add it to the declarations of that one root thing that we usually call that module. It’s a pretty simple formula, rinse and repeat.Joe:               Can I sum it up in saying it has very little to no effect on me?Ward:           Very little. I think it’s easier actually than what you used to do.Stephen:       If you’re a brand new developer and you are doing something, you have exactly one NG Module that you’ll copy and paste from somewhere and everything will work. You’re a developer prior to NG Module, you will need to adopt at least one NG Module.Ward:           If you’re just starting out cold like Joe was just suggesting, I just want to get going and run, then all you got to know is that there is one app module and it’s got declarations and every time you create a new component, chuck it in there.Charles:        Alright so let’s go ahead and do some picks. Joe, do you have some picks for us?Joe:               You bet, I saw a TV show over the last few days. I’ve been watching a few episodes and I intend to continue binge watching. It’s a Netflix show called Stranger Things. I think it’s on JavaScript.Jules:            I’ve been wanting to watch that.Joe:               It is so freaking awesome. It is so well done and so cool. As much as I love The Lost before it started sucking, I loved this just as much.Ward:           Is it strange?Joe:               It is. It is very strange. It’s a lot of child actors that do really good job. These like young, young, teen actors, pre-teen actors, they did a really great job with them. Just the whole thing, I really enjoyed it. I highly recommend taking some time and trying it out. It’s been a great show to watch. If you’ve kind of liked X-files this kind of weird mysteries type show, tension and thrill to them, you’ll really like it. Very cool show.Charles:        Is it something I can watch with my kids?Joe:               Depends on the age of you kids. There’s some older teenagers in there and there’s sort of a subplot about this girl and she gets this boyfriend and things happen between her and the boyfriend, romantic things. If you don’t want to expose your kids to that topic, then no, it’s not okay. It also some fairly intense, couple, kind of minorly scary parts. Way less scary than the movie Poltergeist. I’m not really a big scary movie fan myself. I want to qualify it as being scary but certainly it has thrills and moments of shock.Charles:        Okay.Jules:            I’ve been binge-watching Game of Thrones. Yes, I know I’m behind the time. The very last episode is tonight, pretty excited about it.Charles:        Is that a pick?Jules:            No, that is next on my list though. That show is—thank for your review.Joe:           Definitely take time. It definitely takes some time to watch it. That was my first pick. I also want to pick the class I’m helping out John Pop and Dan Moleen. I don’t know where John is today but helping him out, Fort Lauderdale, Florida, October 6th and 7th I think, they’re teaching a two-day class on Angular 2, getting up and running with it. I’m really excited to go and help them out. I love those guys, I love all the stuff that they do. I think they’re amazing teachers. If you want a couple of hundred of bucks off your ticket, the code AIA will get you $200 off and the URL is ftlotterdale.ng-learn.com. It’ll be on the show notes of course. That’s my second pick. I would like to mention as well that if you have a company that’s got an Angular 1 app and you’re trying to migrate it Angular 2 and you’re looking for some help doing that, please reach out to me. I’d love to talk to you and maybe see about helping out.Charles:        Awesome. Jules, what are your picks?Jules:            I don’t really have any picks this week because I literally spent the last four days moving from one house to a house that is less than half the size of that house so it’s been a challenge. Here’s what I discovered while I was moving and having to text a whole bunch of people. A couple of weeks ago, my Android Nexus broke and I made a bet that I could use an iPhone for 30 days and that by the end of that 30 days, I would love the iPhone. Let me just be clear that I hate the iPhone. There are two things on this device that I appreciate and the rest I just like—however, my pick for the week is Google Hangouts on an iPhone. I know you guys all use Hangouts but Google Hangouts on an iPhone has this really cool feature where I can send memes instead of emoticons and they’re so awesome that if you’re communicating with me on text, you’re probably only communicating with me in memes at this point.Ward:           Cool.Jules:            That’s my pick.Ward:           Cool.Charles:        Stephen, what are your picks?Stephen:       Alright. A month or two ago, there was a new video game it didn’t get around but it was released on Steam called Factorio which I am absolutely addicted to. Basically, you build factories that build factories. If you like any sort of kind of city world management games and if you like automation, this is a game that you’re basically building things that build themselves so it’s kind of fun. My other pick would be a project from Sean Larkin that he’s working on which is a web pack dashboard so that as you’re building a web pack application, you can actually get a nice dashboard of what the build is going rather than just kind of a simple progress bar. That is a project that I think he just started this week or this weekend but you’ve been seeing this GIFs that he’s been posting on Twitter. It’s very exciting.Charles:        Very cool. Ward, what are your picks?Ward:           Actually, I’m so thrilled to hear another Apple hater, just because it’s fun to be in that strange crew of people who like to resist the trends. I can’t actually hate on it that much because it’s actually turned out to be pretty good but you’ll never hear me saying that out loud on a podcast. My pick is—hey I like to cook. I like sharp knives. I just got the Chef’s Choice Trizor XV knife sharpener that can take a totally destroyed knife and put a 15 degree edge on it and I’m really excited about that. It puts me in the camp of like 10 people.Joe:               I’m glad that you opened up with the fact that you like to cook and not just I like sharp knives. It would’ve made it a lot weirder.Charles:        I don’t know, from Ward, it wouldn’t be that weird.Ward:           It’s Halloween and what do we think about on Halloween? Sharp knives. Get your skills ready, it’s either pumpkin carving or neighbor carving, whichever comes up. Alright, enough of that.Jules:            Okay so I have to add my pick because Stephen just figured out that it isn’t actually Google Hangouts on the iPhone that does that. It’s G Board on the iPhone that does it.Ward:           It’s not google Hangouts?Jules:            It’s a feature of the G Board keyboard that you can get on iPhone.Ward:           Oh, look at that. You’ve been revealed.Jules:            Well, we just sat and figured it out while you were talking.Ward:           I think I actually loaded that on there. My final thought though is like Joe I'm in business, my idea company is pretty skilled at Angular. If you’re just too busy to take your project, we’re also available to help you get over to Angular 2 from wherever you happen to be. Including maybe you’ve written a Sliver Light application or you’re some kind of a Microsoft person that needs to make the transition to this new breed of web applications and we’ve got the jobs to do that too.Charles:        Alright. I’ve got a couple of picks. The first one is we’ve had a foreign exchange student staying with us for the last five days and it’ been a lot of fun. If you’ve been thinking about getting a foreign exchange student, go out and pull the trigger. Our foreign exchange student is from Italy, she’s 17. When I was on my mission in Italy, I lived near the city she’s from. Anyway, we’ve had a bit to talk about because I kind of get where she’s coming from. It’s been a ton of fun, my kids love having her around. It’s been cool so we’ll see how that goes going forward throughout the rest of the school year but I’m pretty optimistic about it.The second thing I’m going to pick is there is this killer chocolate chip recipe on All Recipes and I’ve made it two or three times. The people that I’ve shared the cookies with can’t shut up about it. I think they’re terrific as well so I’m going to post that as a pick as well, post the link to that recipe. Finally, I’m looking forward to trying this out, I fiddled with it a little bit but I’m going to start using it in Earnest and that is Fresh Desk. I’ve been moving things around a little bit within the business of running the podcast and I get a lot of emails that are just general, “Hey, can you help me with this?” or “I didn’t get access to this,” or “I have a question about the conference.” I’m going to try using a help desk and Fresh Desk looks really cool and seems to be a good way for me to go. I’m looking forward to seeing how that works out as well. Those are my picks. With that, I guess we’ll go ahead and wrap this show up. Thank you all for coming. We’ll catch everyone next week,Ward:           Awesome.Jules:            Peace out!Stephen:       Thank you.

Sign up for the Newsletter

Join our newsletter and get updates in your inbox. We won’t spam you and we respect your privacy.