Adventures in Angular

Adventures in Angular is a weekly podcast dedicated to the Angular JavaScript framework and related technologies, tools, languages, and practices.

Subscribe

Get episodes automatically

119

119 AiA Avoiding Common Pitfalls in Angular2


04:25 – Error message: “Unknown provider”

6:00 – Error message: “Can’t resolve all parameters”

10:00 – Mistakes from Angular’s framework

12:55 – Should I be using relative paths?

17:45 – Error Message: “Ng4 let customer end customer”

19:35 – Error Message: “Component dashboard component is not part of any module”

20:37 – Lazy loading and module errors

33:10 – NgModule for data collection errors

35:30 – No errors schema

39:30 – Syntax errors and decorators

45:25 – Forgetting to add a component to your template

49:30 – Rating Angular 2’s error messages

54:10 -Error Message: Object supporting error for NG4

56:30 – Mapping result errors

1:05:00 – Words for the wise

Picks:

Artisanal Pencil Sharpening (Ward)

Bob and Ray, “Most Beautiful Face Contest Winner”  (Ward)

Plunker (John)

Jamba Juice’s Peanut Butter Chocolate Love Shake (Joe)

Smashburger (Joe)

Tesla Solar (Joe)

Covert game (Joe)

Doctor (Lukas)

Legoland Discovery Center (Lukas)

One Stop Nutrition shakes (Lukas)

Bike Prank video (Lukas)

Born to Win seminar by Zig Ziglar on Audible (Charles)

MindMup2 (Charles)

Devchat Conferences

Devchat Webinars

NgConf 2017

This episode is sponsored by

comments powered by Disqus

TRANSCRIPT

Charles:        Hey everybody and welcome to Episode 119 of the Adventures in Angular Show. This week on our panel we have Joe Eames.

Joe:               Hey everybody.

Charles:        Ward Bell.

Ward:           Hello, hello.

Charles:        Lukas Ruebbelke. John Papa.

John:             Hello.

Charles:        I’m Charles Max Wood from Devchat.tv. We are going to be talking about Avoiding the Common Pitfalls in Angular 2.0.

Ward:           Hey Chuck, before we do, I think it’s really important to mention that we are recording this one week before November 8, which everybody know that’s the hot day on which tickets for NG Conf will be released, is that right Joe?

Joe:               Got it, that’s right. That’s the only thing notable about that day in fact.

Ward:           Exactly. Put that on your calendar, make sure that November 8 is on your calendar, and that your first thought on that day is to sign up for NG Conf.

Charles:        That’s right.

Joe:               Make sure you cast your vote for the lottery.

Charles:        That’s right. Go right down to that polling place and order your ticket.

Ward:           Exactly. Now that we got that out of the way. What are we talking about? Oh yes, mistakes.

Charles:        That’s right.

Lukas:          Common pitfalls. Angular mistakes.

Charles:        The bubble wrap is off.

John:             I never make mistakes, how about you guys?

Ward:           I met that stage in my life where I can’t remember all the mistakes I make. It’s a very nice place to be.

Charles:        Hope that.

John:             Unknown provider, what the heck is that? Why do I keep seeing that word?

Ward:           That’s what your kids maybe saying when you come home late. They call him the unknown provider.

Joe:               You been working on Angular 2.0 still 10:00PM, you show up, “Who’s this?” Isn’t that an unknown provider?

John:             Actually it sounds like a movie title, doesn’t it?

Lukas:          It kind of does.

Joe:               “In a world of myth and legend, one man is the unknown provider.”

Charles:        I sort of imagine that you hadn’t paid your cellphone bill and so when you try to make your call it said unknown provider.

Ward:           That could be.

John:             Yeah. But seriously, we go to Angular, we run a lot of apps, and we see these error messages which by the way I think we should call out that the error messages in Angular 2.0 are pretty darn awesome. They actually tell you information. One of them I see a lot is you have an unknown provider, Fu provider, whatever the name is, and it gives you a couple hands on how you can fix it, doesn’t it?

Charles:        Don’t go knock up my Fu provider.

Ward:           Yeah. That maybe one of the more common ones so we get really used to it fast. Who’s going to say what the cause is? Who wants to volunteer? Joe, I’m volunteering you. When you see unknown provider, what did you do wrong?

Joe:               You put in a type that doesn’t exist. It’s in your constructor of some component or some service and you said, “I want this.” You give it a parameter name and then you give it a type in TypeScript. It’s leaking internally, it’s leaking in its provider list and it says, “A type is not registered as a provider in my provider list.” The likely thing that you’ve done is you forgotten to go to your app module and listed in the providers list. That’s the likely thing that you’ve done.

Ward:           Ding, ding, ding, give that man a gold star.

Lukas:          Are we got a gold stars for this show?

Ward:           We’re giving out, we’re giving ding, ding, dings and giving out gold stars for right answers to what did I do wrong. Let’s play the game at home, what did I do wrong. John, do you have another what did I do wrong question?

John:             Yeah. What about this injectable thing? What happens if I lead that off and I’ve got constructor parameters in my service?

Ward:           They’ll all, hit the buzzer once. Chuck?

Lukas:          That actually happens? That’s a toughie.

Charles:        I don’t know what actually happens. I just follow the examples and make sure they’re right in the first place.

John:             That’s actually a good point because of the reasons the style guide says always put out injectable on your services, is because sometimes in those cases and sometimes if you have a service that has a constructor that tries to inject something, those particular times, it’s going to have some problems. Then it’s very related to provider issue. Ward, I volunteer you, what is that?

Ward:           I don’t actually know what error you get if you leave it off. I was just about to run some codes and find out.

Joe:               First step there is even if you don’t have constructor parameters, even if you’re like, “This service is stateless, I don’t have any external dependencies, I don’t need to include it this time.” Don’t do it, just include it.

John:             Yeah. It was an argument a while ago made. I think it was possible in the beginning. Why should I put this extra injectable in there? Which means you need the import statement for it if I don’t need it. May it’s just wasting code and it’s an extra function but I think we’re really talking about a tick at this point. It’s such a negligible overhead and it saves you from possible issues later on that I always do it.

Joe:               I have always been of the opinion that it’s way less important to have your code tight. Don’t code for the computer code for the humans. It’s you, your co-workers, the guys that come after you, whether they are junior or senior. Missing that, getting an error, and not realizing that it’s because the add injectable isn’t there is ten times more cost to your whole organization than any performance cost you are likely to see on 999 out of 1,000 projects.

Charles:        I just have to point out too that my co-workers that I’m writing this code nicely for is me after I forget everything that I did this week.

Joe:               Right. Be kind to yourself.

Ward:           Yeah. But because we were wondering, and it’s an example of the kind of messages you get, the answer is, because I just did it, can’t resolve all parameters for hero service. And then it lists the parameters it can’t resolve. I think I could get that. That doesn’t tell me, “Add injectable.” It doesn’t tell me what to do about it but it does tell me what it is. This gets a scene to the whole question of what’s a great error message. I have a hopes that in the future what we’re going to do when somebody’s error messages include links to web page where you can learn more about that error and possible solutions to it. I think that that error messages are pretty good start.

Charles:        I do want to just jump in here really quickly because these seem like both of these things so far, things that you forgot to do, that you should’ve done. I guess that’s one type of common pitfall but when I think common pitfalls usually they’re things that the frameworks lead me to do that aren’t quite correct. I’m wondering there are things like that where it’s, “I think it work this way but it didn’t actually work that way.” It leads me to organize my code poorly because it walks me down the road of doing this other thing.

Lukas:          There are definitely things that lead you but others definitely plenty of common pitfalls that are just so easy to forget this and miss this. I don’t think we should necessarily restrict ourselves to adjust the things that frameworks push you towards.

John:             Yeah. I know one of them that I’ve run to once or twice too especially since some of us have worked with Angular since app invade us. At one point I was listing all my template URLs and CSS with pads, I would say app/feature/customer/customer.html for my template URL. That works through a certain degree but once you started getting into relative pass with the modules and things are webpack do this for you automatically. Right now we’re not using webpack, we’re using module ID. Once you start using those relative pass, the full pass kind of conflicts with that. That’s something I ran to once in awhile when I forget, again it’s just more of a forgotten thing.  It’s not obvious on typing your URL, should I do relative or should I do just the name of the file?

Joe:               Originally early on, I started playing around with this but there were some major problems with using relative pass. Once you start to talk about like taking it to production, it works fine when you throw that little module ID in there for a little bit and then you start doing some funky stuff. All of a sudden it wasn’t going quite right for me. Has this been validated? The relative URLs now work if you’re going to do ahead of time compiling. If you’re going to do modification, you’re going to do bundling. That was the problem that I had is the minute I tried to bundle, the relative pass was not working right, which it was the whole thing I was trying to solve.

John:             Yes. There are several steps in that build process and I will tell you the ones that I know that it definitely works. AoT, I’ve tried it with that, works fine. The next step is that I took it and I did tree shaking with it with rollup. Finally, I did a bundle with it, some modification and compression, all that kind of stuff. That’ll work fine with it. The one thing I haven’t tried that with yet, if I do all that and top of it do code splitting with lazy loading. I haven’t tried that yet and I publish it.

Ward:           There is work to be done on lazy loaded separate code split stuff. That’s an active area within the Angular core development right now because it’s known to that’s a problem. Things get lost, the load loses track or where it is. It’s a solvable problem but it hasn’t been solved yet. These are at the edges of where Angular is today but we’ll get there.

Lukas:          Going back to Joe’s question though. Repeat your question Joe because I think we went further.

Joe:               Yeah. My question really is should I actually be using relative pass because it’s one thing to say, “Hey, in my dev projects it’s so much easier.” I used relative pass then I could move files around and they stay together. Builder likes to work with the relative pass, at least webpack likes to recruit relative pass. Actually, really should I? Because if I say I’m going to take this production, I want a code split, I want a lazy load, and I want to do optimistic lazy loading, should I be using relative pass right now or should I wait and just use full pass?

John:             For me, for template URLs, yes.

Ward:           Yes, the answer is yes.

John:             For doing lazy loading routes, that’s the thing we’re still working on. For templates and CSS, yes.  

Ward:           Webpack isn’t going to help you. There’s no way out right now. You’re not going to solve the problem by using an absolute path because the problems we’re facing with lazy loaded code split AoT stuff doesn’t work with absolute paths either. It’s no choice, use relative pass. That’s the recommendation. Use them always.

John:             Yeah. For that matter, any time I have a component, I’m always making the templates, CSS and the html be in the same folder. When I say relative, I’m just using the file name.

Ward:           Yes. It’s module relative.

Joe:               This is actually kind of a very specific thing again related to this that I haven’t figured out or haven’t played around with recently. At the time that I was checking that out, you have to use two entirely different things based on whether you’re using webpack or whether you’re using systemJS. You had to use module.id or module ID based on which load are you using. Is that still true? Do you have to choose one and then if you by chance decide to switch, your loader obviously you got to go to and change everything around?

John:             The good news there is no. That was the case at one point. Ward correct me if I’m wrong in this, last time I checked is using systemJS, yes you need the module ID, if you’re using webpack, you don’t. We actually manage to work it out such that we always provide module ID. If you’re using webpack it just ignores it. That way we can called one way.

Ward:           Correct. That is the same phrase these days. It’s the property name and the metadata is modulecapitalID: and then it’s little module.littleID. Always, always, always. The reason that that’s now so, I think you were talking about where the value from module ID property could have been underscore, underscore module name, or something like that.

Joe:               Yes. That’s what it was. I was thinking the right thing, it’s the underscore.

Ward:           That problem went away because we now configure the TypeScript to generate commonJS format and therefore systemJS recognizes that its module ID. When you follow the setup that everybody’s recommending for you, life’s just go swimmingly.

Joe:               When you do that, for your template URL do you just put in the name or do you it Dot Slash at the beginning.

Ward:           Me, I’m a name guy but I see Dot Slash, it doesn’t matter.

John:             I just use the name.

Joe:               Nothing in the style guide about that?

John:             I’m not sure if it’s in there but it should be. I’ve got the inclination at some point or maybe if I get motivated I might create some kind of a decorator or a function that automatically does convention over code with that. I can actually figure it out, “Hey, look I’ve got a file and it’s called Fu component. The template and the CSS has the same name, why do I have to specify this thing?” That would be something I’d love to see.

Ward:           I see that coming.

Joe:               Why or when can I just not put that in at all? And it does different for me.

Ward:           If you know you’re going to be doing the CLI and webpack, you got to use the CLI and its build chain with webpack, then you can omit the module ID.

Lukas:          It adds in it for you.

Ward:           It doesn’t need it at all because what it does is it writes a require statement in on the template and in lines it. There’s no place to go. The reason it works with the way where the CLI is working the webpack thing is every time you’d lay down something it’s like template URL and styles URL, it goes back in and replaces that with require and in lines it. It either in lines it or does a require, I can’t remember which. But any event it’s going go in there and it’s going to replace it for you. It’s kind of do the right thing.

John:             I want to switch curious in this because simple error that I ran into literally every week because I feel like I’m dumb when I hit it. NG4 lets customer and customers, what’s wrong with that?

Ward:           Yes. What is wrong with that? Who’s going to answer that question?

John:             It looks perfect.

Lukas:          It looks perfect but it’s not.

Ward:           It’s up says Lukas, ding, ding, ding, ding, give that man a star.

Lukas:          A prize.

Ward:           I’m wondering what’s the message.

John:             NG4 off or something like that if I recall.

Lukas:          NG4 let off?

John:             Yeah. It’s like what the heck, that’s what I wanted but no, the other in are very different, obvious over the properties of an object and is over DA, or they’re not even around.

Joe:               Yeah. They do just to match the syntax of what the new ES6 iterator for arrays or something.

Ward:           Yup. What happens? The error message is interesting. If you accidentally make mistake and you say in instead of, when you get back is, “Template parse errors can’t bind to NG4 and since it is unknown property of let’s say LI.” That isn’t the great message in the world but then if you then read further in the message, it highlights the exact spot in your html. This is what’s really nice about what happened now. Who know if you had big html. Whatever the problem is it could be anywhere in there, it could be any LI. There it is, pointing exactly to the one that you got wrong. You can at least find the LI that isn’t behaving properly. That’s nice and it’s a very common thing to do because I always forget it, like you do John.

Here’s another common one. I create this cool dashboard component and I’m ready to see it rock. I can’t wait to see it, I putted it in my template and all that stuff, and then I get an error. The error is “Component dashboard component is not part of any NG module or the module has not been imported into your module.” What does that mean, anyone?

Charles:        Doesn’t it mean that you forgot to import it in into the app component? No?

Ward:           That’ll be a minus 10 points for Chuck.

Lukas:          It’s your app module rather, is not been declared.

Ward:           Bingo! Ding, ding, ding, ding, you get another prize Lukas.

Lukas:          Yay, more cookies.

Ward:           More cookies for you so you get to choose the next favorite there.

Lukas:          This is actually when I ran into about a week and a half ago, I just was actually unaware of this but I was doing a route example, and in the lazy loaded module I want to use the JSON pipe and dump something out. Whatever reason, Angular just could not find the JSON pipe. It’s just like, “What the heck is going on?” So I made it not lazy and it started working again. I ping Victor and I’m like, “What is going on? Here’s $100, help me out.” Come to find out that on lazy loaded modules you need to import common. When he said that I’m not importing it normally, and come to find out actually common is actually comes for free with the browser module. That was kind of a big, “gotcha” for me is it that if you’re doing lazy loaded routes, then you need to explicitly import common. Whereas with the main module, if you’re importing browser module then you get that for free.

Joe:               Are you saying that it comes with browser module, but if you’re doing lazy loading you have to also explicitly load it on top of loading browser module?

Lukas:          No. In browser module, it comes with common but if you’re going to actually use something that belongs to common in your lazy loaded module, you need to explicitly import common to your lazy loaded module.

Ward:           I’m going to ask you a question Lukas.

Lukas:          I’m probably going to get it wrong.

Ward:           No. No, no. This is all Ruby. All things. Before that was a lazy loaded module you were routing to the component directly, is that correct?

Lukas:          Yes.

Ward:           Was that component declared in your root app module?

Lukas:          Yes, I believe it was. Pretty standard. When you peel it off and make it lazy, then that would disconnect. Now you’re pointing to [0:22:47.0] know the JavaScript file for the module. When I look that I’m like, “Oh, that makes total sense.” I’m no longer connected to the main module. Therefore, if you break that connection then you do have to import common for that lazy loaded module which I did not know but then it’s like, “Oh, that actually makes a lot of sense.”

John:             This brings up the providers and modules issue which is going to be the biggest pitfall for most people.

Ward:           Can I unpack one of Lukas’? One of your sentences in there Lukas is correct and one of them is not.

Lukas:          Yes, correct me, please, by all means.

Ward:           This is really helpful for all of our listeners I think. You attributed it to lazy, you said that the reason that it was a problem and that you needed to import into your lazy module the common module in order to get all the basic default Angular directives. You said that that had something to do with lazy, it doesn’t actually. It has to do with the fact that when you had your Fu component inside the app module, you’re absolutely correct. It got the benefit of the imported browser module which itself imports common module. As long as you only have one module in your application and you threw everything in there, you were benefiting from the common module hiding inside the browser module. The minute you create a new module, lazy or not, any new module and you declare anything into it, that new module has a clean slate. It has no knowledge of anything, Angular or anything. It’s any module, not a lazy module in which you declare something, you’re going to have to import everything that you actually need for any of the component you declared in it. That’s why you needed common module there. You can confirm this for yourself simply by continuing to make that a non-lazy load but put that component in another module and you’ll see you also need in that module to have imported common module.

Lukas:          Ward, thank you for explaining out that for me.

Ward:           This is big. This is really not obvious at all. I think a lot of people are starting up by just creating one big app module and throwing everything into it. Eventually they’re going to say to themselves, “This thing’s too big, I need to break this apart into smaller pieces even if I don’t lazy load. I just want to break it into the reasonable units.” As you start to create supporting modules, these are the discoveries you’ll make.

Joe:               Which I totally disagree with. I think that breaking up your code in the module to make it feel more manageable is nine times out of ten a bad idea. Just going to say that loud. That’s what I think.

Ward:           You may not be alone in that but then you don’t have to break them up. Tell us Joe, would you like to break in the modules?

Joe:               Maybe I’m just discard person from Angular 1. Maybe I’m carrying those Angular 1 scars around with me that I just cannot get rid of. In Angular 1 the little seed project, the Angular seed. Remember this? You had like six different modules in it. Each module had like two pieces of code in it. In Angular 1 modules did zilch, zip, nothing. There is only one purpose to ever have a module, a separate module in Angular 1, that is if you’re going to provide your code for other Angular users to utilize.

John:             Or for testing.

Joe:               I never had a problem with testing and needing a multiple second module.

Ward:           Joe, you could do that in Angular 2.0. It sounds to me like your position is, “I don’t see the value in having multiple modules. Maybe if I go off and do lazy loaded I can replace it.”

Joe:               Yes. There we go.

Ward:           All right. Other than that I only want to have one big module. You know what, that’s fine, nobody’s going get your way. Nobody will so just do it.

Joe:               I hate the recommendation to go and make six modules. One for each folder in your application, every features to be a separate module. Not that necessarily people are saying that but I think that the parse is getting out there. It’s on module. That’s what the Angular seed look like.

John:             Every files should be to a modules different in every feature, those are two different things.

Joe:               In the line between features are so hard to draw. What you get with this, you get this kind of like just every folder on just making its own module because it feels like a feature. What is a feature? I hate it.

John:             To me the two reasons to do it, it’s actually same for Angular 1 and 2.0 for me. One of them is if I find something on a promote, which is the one thing you mentioned. The second is actually testability. Let me explain what I mean there, is when I test features, when I look at code and I say, “This in itself I shall test this without mocking anything else in my entire app.” That’s when I use a module for two because if I have a feature, like customer for example, it’s got seven screens and a bunch of services and stuff. I want to test that feature without having to do with routing and all my other things in my application. That’s the case where I have a module either Angular 1 or 2.0. It’s just easy for me to just say, “Only test this one area and the rest of the stuff is just not even there.” In that case, that’s why I like modules for those.

Joe:               Yeah but you can totally test without that. You can do all that kind of testing and isolate your stuff from the routing without it being separated out into its own module. You can do that.

Ward:           One of the reasons that I liked it too also because I’m used to having team development or even I split personality development. I tend to say I like to see a certain feature area, and for me the feature area is really mean something. They have to do with the user work flow typically. I like to evolve that even though if itself haven’t own its own track, its own evolutionary track as opposed to some other feature. I can do that with folders and not have modules but I find that the module and the folder concept works. But ultimately, your argument leads Joe also to having one giant folder and just have everything in one flat structure and there’s an argument for that.

John:             Where I’m going guys, this is a great topic for another day because we’re talking about pitfalls today.

Ward:           Exactly. Fair enough. You’re not wrong Joe, you’re not wrong.

John:             No, Joe is not wrong. You can design anyway you want, honestly. It’s really is more user’s choice. Joe, you and Ward hit something earlier, actually Lukas and Ward did. I want to have follow up on. We’re talking about Lukas’ scenario and Ward you are right, you said that if you went from having one module to multiple modules, you then have that same problem but there’s a way around that too. If I have a second nested knot, maybe a nested module, whatever you want to call, a child module, that child module could import the common module. But he could also export that common module. And then the root module could import that child module which is going to want anyway. Therefore, the root module doesn’t have to worry about getting common module.

Ward:           Nor would any of the others that imported that shared module.

John:             Exactly.

Ward:           John, why would they want to have a shared module? This is also speaking to Joe’s question about why you would have another module. Which again only make sense if only one module in your whole application, none of those matters. Let’s supposed that you’re going down this road where you think that there should be features, why would you create a module that you would share with other modules?

John:             Especially I deal with lazy too because you definitely have other modules, assumingly doing other modules. I shared module for way that we’ve been talking about it, let’s get some examples. I shared module maybe I’ve got a service, my customer data service, or maybe more generic, an exception handling service, or a logging service. I only want one instance to that anywhere in my app. I don’t want to reimport this thing all over the place either. One way to do that is just pull that guy to the app once. But there’s another kind of shared modules too. Some of those you do want most instances. This really becomes a design decision which maybe we should go into far down the road of NG modules. NG modules is a complex topic. Designing your application for how it’s going to work based on how you want your services to behave is really important.

Ward:           It certainly is. You’re right that we are verging on a different show. If you Joe’s root, when you only have one module and you never lazy load it’s all easy.

John:             Exactly. Which honestly, I just redid my course on Pluralsight. I went to the entire course with one module and then at the end I’m like, “Aha. I want to do lazy loading, I want to do preload strategies, I want to do all other stuff, I want to share things.” I introduce modules, and at that point that’s the place where things get hard. You then have to think about it.

Ward:           Yup. You’re right, you can get a real far piece before you start adding modules to the system.

John:             Other than the first one.

Ward:           Other than the first one. Every seed, every CLI is going to give you one right of a box so you don’t have to write that yourself. You just have to keep remembering to add your new components to it and we just read the message that you get. When you forget that it says, “Hey you didn’t declare this.” It’s good.

Joe:               I’m coding along, written an app, this is an app that doesn’t necessarily do a lot of data collection. All of a sudden I’m doing some data collection. I really want to use NG model. I haven’t been using it before but I’ve also want to use NG model. I add it in and things just start working right. I’m changing it, it’s updating. Changing the value in the text box does not updating the underlie so they’re just going wrong.

You know the canonical example of two way binding an Angular 1 was you put a text box, underneath it you’d put a span tag or something that have the same things as you type you’d see a change instantly.  When we use two way binding a real app, we don’t really do that. We use it for something else, I just want to update the model behind the scenes without having to do anything specifics I just threw an NG model on. It’s not completely obvious right at the beginning, then when I type in the value it’s not updating up. Since things start working and start looking inside and all of a sudden you realize it’s not updating my model behind the scenes when I type into the text box, why? There’s my next “gotcha.” What am I doing wrong?

Ward:           You actually put it in in the tag, you wrote the word NG model.

Joe:               Yeah. In the banana in the box I got that same text.

Ward:           Yes. I was wondering if you did the banana in the box.

Joe:               Did the banana in the box. You know I did wrong.

John:             Did you get NG model is not a known property on the input element?

Joe:               No. There’s a catch to that. I’m doing testing and I’m using the schema thing.

John:             The no, no on schemas. What is that? What’s that like?

Ward:           Yeah, exactly. You didn’t tell us that.

Joe:               Sorry, I forgot the important part.

Ward:           All right. That’s an important part because what John was telling you was that having done that in regular code, you would have got a very clear error, that’s it, “I don’t know what NG model is.”

Joe:               Let me back up, I’m test driving my code. I’m writing this test for this form and I add an NG model and I’m using that no schemas thing because it has some subcomponent that I don’t want to load and run. Can you remember Ward what that no schemas like, the kind of brought without my head?

Ward:           I never remember any of the top of my head but I’m going to get it to you in a second as you keep talking.

Joe:               All right. I’ve added that, I’ve already got this, in this fly what it says is that, whenever you encounter an unknown tag, it’s really a component but it’s not a valid html tag, a typical html tag, just ignore it. If you don’t know what it is, just ignore it because what that really means is I’ve got some that took upon of that I’m testing has a subcomponent but I don’t want test that, I don’t want to loaded them, I’m just testing the component that I’m testing. I’ve got that flag set and now that it in NG to model and it doesn’t work. It’s not working and I’m just trying to make codes, that should be right but the test is failing. There you go, there is the scenario. What am I doing wrong John?

Ward:           I’m prepared to tell you when John bails.

Joe:               John taps out.

Ward:           Have you tapped out John?

Joe:               He might have jump off or got a flag for a second.

Ward:           Okay. The schema that you’re asking, that you’re putting on there is called the no errors schema. It’s something that you can put actually on any module but it makes sense only in testing. There’s a property, rarely use property, rarely mentioned property called schemas which is one of the out of the box I use for is the no error schema, which basically says to Angular, “If you don’t recognize it, don’t complain.” If you don’t put the no error schema in there and it sees something it doesn’t recognize, it complains.

John:             Can we do that with regular code? Can we just run that in regular code and Angular will never tells us there, no error perfectly?

Ward:           It’s in add Angular Core, it’s not in Angular Core testing, it’s in Angular Core. You can add that to every one of your modules if you wish and you’ll never get any compiler errors when it doesn’t recognize something. Good luck with that. You’ll get exactly the experience that Joe got, which he sees something and nothing’s happening and he doesn’t know why. So don’t do that.

Joe:               The simpler case is I’m just coding along and I add that NG model banana box and I get that like unknown thing and I was freaking out like, “Why am I getting this?” I know the NG models are real thing, Angular knows about this, why am I getting this problem?

Ward:           Yeah. Of course the message merely tells you it doesn’t recognize.

Joe:               If you tell me how to solve it.

Ward:           It doesn’t say, “I have inside knowledge about NG module so I know exactly what you forgot.” Remember, this is no different than if you put Fu in brackets and bound to the Fu directive. I don’t know what to tell you all, I know is Fu doesn’t exist. It’s just like that.

In the case of NG model, which is such a part, a regular part of our Angular development, those of us who’ve been around would know the solution to the problem is that you needed to bring in the forms module, the Angular forms module. If you import the Angular forms module, all will be well.

John:             Which is easy to forget if you’ve done Angular 2.0 for a while because until RC4, or RC5, you didn’t have to do that. That separated it out.

Ward:           Yup. We had long discussions about whether that one should be there by default in the same way that it’s just part of the common module. The common module has all the things that we know should be there, NG4, Ngif. Why was an NG model there? There’s discussion in the history on issues on Angular GitHub. It turns out there’s a good reason, I’m not going to go into it but it was a tough choice but it was a good choice. If you want that NG model thing, you have to reach out the forms model to get it.

Joe:               Okay. I’ve got another one.

John:             Yeah. I do too when you’re done.

Joe:               All right. I know what the problem is, I can’t remember exactly what the behaviour is, I’m going to describe the behavior thinking pretty sure that this is the right, what you see when you get the thing wrong but I’m not 100% sure. I’ve got an input property. For some reason that input property is not getting its value. I got this subcomponent and I’m binding a value to it, inside that subcomponent I got the @input and the name of my variable, that’s the property now on the subcomponent and I run the thing and that subcomponent is not getting the bound value from the parent component, what am I doing wrong?

John:             Did you use the square brackets in the outside?

Joe:               Yes. I got the syntax correct, I use the square brackets to do the binding in the html.

Ward:           You don’t have no error schema?

Joe:               Nope, don’t have that.

Ward:           Because I was going to say you misspelled the directive.

Joe:               No.

Ward:           I’m sorry, you misspelled the property.

Joe:               No. That’s the one I get all the time. I get those all the time. I cause this problem to myself all the time.

Ward:           Where were you referencing this input value? That’s the matter? You never get it?

Joe:               Yeah. It just never gets like I threw a bunch of lifecycle hooks or whatever, and it’s never getting set, it’s not getting set.

Ward:           Joe, you stamp the jump work.

Joe:               Did I stamp? Stamp the jump?

Ward:           Yeah.

Joe:               Here’s what I forgot, the open and close paren in with the add inject.

Ward:           Doesn’t edit complain about that?

John:             You mean with the add input?

Ward:           That’s a syntax error when you forget to put the functional parameters.

Joe:               Are you sure?

Ward:           Yeah. In TypeScript it is. I’m going to go do that right now.

Joe:               Do that right now.

John:             I know at point I didn’t catch you because I met with people doing it a year ago when you add injectable and it was no param frenzies.

Joe:               Obviously it wouldn’t work in like a Plunkers, since Plunker doesn’t give you any kind of TypeScript. I think that I’ve had this happen recently in just regular code like my VS code editor with TypeScript.

John:             I think the rule or you never their right Joe is every time you use a decorator they’re all functions.

Joe:               Yes. Decorated that all functions.

Ward:           Yeah. I used to forget to do that all the time when I was first starting out and it was maddening. I thought the TypeScript started picking that up.

Joe:               Here’s are really interesting thing, exercise to go through, write your own decorator. Because there are a lot more complex than you would think. A decorator is a function that has to return another function. When you actually write your own by hand, it’s really interesting. Especially when you’re talking about creating your own decorator ticks in the parameter. Because it looks to you like you’re invoking a function. You have two functions, one function that has to return another function. The parameter that you give it is actually passed in, I think to the second, the return function, when it gets invoked. It’s a fun exercise.

John:             They were fun exercise. They were fun to write in .Net too. It’s definitely interesting syntax. Every time I do it, because I don’t do it often, I have to go look it up and remember why I did it the way I did it. Parameters don’t make sense at first glance but then when you walk it through they do.

Joe:               One thing that’s nice about that is you start getting this idea that decorators are functions, I have to invoke them. Since this funky syntax with the @ and the name of the decorator. It’s just looks like just arbitrary syntax, it’s really not because in the end that open and close paren is the invocation of an actual function. More underneath there is a function, that open close paren is getting translated into, “Let’s call this function.” Without that open and close paren, you got a function that never gets invoked.

John:             It’s like the Netty without end parenthesis.

Joe:               Without the end parenthesis or creating your own function and then trying to call it by just putting in the name of the function without the open and close paren. See that similarity. That for me is a common “gotchas” putting in the add inject without open and close paren.

Ward:           Okay. I just found one in some code, I remove the parens, and I immediately get a red squiggle and when I run the top compiler it complains. They both complain the same thing, “Unable to resolve signature proper ejector when called as an expression. Supplied parameters do not match any signature of [00:44:39].”

John:             Someone’s have gotten smarter with the tooling.

Joe:               Yeah. Are you using S with input or something else?

Ward:           I just did the one I input. I went into existing code, which had added input print paren and then I just removed the parens and that’s when I get that squiggly.

Joe:               What version of TypeScript are you using?

Ward:           2.0.6.

Joe:               Okay. This might be true like 1.8.10, that was the default in VS code.

Ward:           What’s wrong with you brother, man, you got to stay up, this is so cool. This all new, this is like last week.

Lukas:          This is JavaScript man, keep moving. That problem is so last week.

John:             I’ve got a super, super simple one for you guys. That is so simple that it’s hard. It’s something that existed in the similar form in Angular 1. You have written your App, you’ve got your components, you got your index html, everything exists, there’s no errors. You run your Angular app, it compiles, it loads in the browser, nothing shows up. There’s not a single error in the console window. What did you do wrong? I almost did this on stage last week so I’m very familiar with this.

Joe:               Let me ask this, did you put the right component into your bootstrap in your app module?

John:             Yes.

Joe:               Okay, so you’ve done that. With Angular 1, my first guess would have been you forgot the NG app directive.

John:             Exactly, exactly. That’s why they’re very similar. It’s very similar to that.

Joe:               In Angular 2.0 what is it?

Lukas:          Did you forget your top level directive in the html?

John:             Explain Lukas because I think that’s the right answer.

Ward:           You left the tag out?  

Lukas:          Yes. Components basic [00:46:34] in the template and so in the side of html you need to essentially add a reference or your top level component selector into the html or you have really no connection to your Angular application.

John:             Bingo. That’s it, that’s it. You can make all the app in the world but if you don’t actually use any of the elements, you don’t use the components, nothing happens.

Joe:               Your index based studies better have a custom component.

Ward:           It can’t be in the index stage. I just did it and what it says it complains that it can’t find the bootstrapping components. It can’t be the one in the index.html because I knew that and I just confirmed that. But you’re right, if you created a component that you were using in some other template and you forgot to put it in there, then it would fail. The index.html when you will get an error if you will meet the [00:47:35]

John:             Yes, you mean the route one? The route one has to be there but any other components you add like the things I did the other day was I created like a hero’s component list. I walk through it, I did this all on stage, and they’re alive, got them getting working and then I almost forgot to actually put that component into the template in my app that component.html. If you don’t do that, you run the app, it finds out component html but you never reference your other components and they’re all declared, that’s fine but you’re not using it so the app runs and nothing shows up.

Ward:           That’s painful.

Joe:               Yeah. Very painful.

John:             It’ll be nice to some kind of a message from Angular saying, “Dude, you referenced a component, this ten components, and you actually didn’t use any of them.”

Joe:               Right.

Ward:           There’s a guy on the Angular team who’s working on tooling that trying to help us with all these kinds of things. We talked about that. May actually be possible to putted into cross reference mode and not only does it tell you when you try to use something it doesn’t know anything about but will also tell you when you got something that you’re not using. That’s really what you’re driving at there. Of course that won’t get you everything so if you use that component on your Fu, within component A but neglected to do it in B, and wondering why it doesn’t show up in B, there you go, what are you going to do?

John:             The good thing that point about all these is I fully believe that some of these things were talking about will to be errors in six months to a year. That the Angular team will found ways to either help us with it or identify them. I just like they were things we were doing six months ago that we no longer need to do inside Angular 2.0. The tooling is definitely catching up.

Joe:               Overall, error messages in Angular 2.0 today, as a recording, what kind of a grade would you give them? School grade A to F.

Ward:           For me it’s a B+.

Joe:               Okay. John, Lukas, and Chuck?

John:             I’m going to give Angular 1 error messages D or D-. I’m going to give Angular 2.0 messages B.

Joe:               Okay.

Ward:           Just because the template stuff is so great, that’s where most of my problems are.

John:             TypeScript tells me find a lot of my other mistakes in the tooling, in the code, it’s the html where I usually go wrong.

Joe:               In Angular 2.0 you give it a B, is that what you said?

John:             Yeah.

Joe:               Okay. Lukas, how about you?

Lukas:          I think if I were truly objective, I agree with John. I think 1.x errors probably get a D. At the same time when you do it every day for like three years, you come accustomed to pattern recognition. Totally you’re just kind of like, “I’ve done this a thousand times.” And you can just start to look and totally know what has gone wrong. I think that in Angular 2.0 it’s much, much, much better so I would say D for 1.X, B for 2. Even I’ll say this is that Angular 1.x was full of things that you just have to know or just want to work. For instance, like snake case, the camel case was one of these things that if you just did know it, you would just get bit even a bigger one was expression isolated scope, that actually has to be an object map. This is truly a string that then gets converted back. I really have a hard time thinking of anything in Angular 2.0 that’s just one of these situations where you know whether you don’t. I think really hug credit to the Core team for ironing out those really confusing bits Angular 1.x directives. I’m looking at you when I say that.

Ward:           Yeah. I think the future is as I said earlier to now provide a link so that you can go learn out more about what the typical causes and solutions are for something. It’s told you that there’s something wrong, great. But what if I don’t know what to do about it, that I think is an important frontier. Is there another way in which I think the errors are ready to bugging experiences worst. In Angular 2.0 that’s when you get into this pitfall of zones.

Joe:               Amen.

Ward:           If something blows down there and you’re fighting your way through those zones stack traces.

Joe:               Yeah. Even if you look at the stack trace, there’s like 20 function calls and zones and you’re like, “I don’t care. This is not helpful.”

Ward:           I don’t know what it is because I’m incompetent. I just don’t know what to do. I think there’s got to be some room for improvement there.

Charles:        I just wanted to chime in really quick because I was thinking like a B+. The reason that I was going to say it is just that my gauge for how good an error is and Lukas kind of eluded to this is can I look at it without having any experience and figure out what’s wrong. Generally, I can but not always. Sometimes it’s a little bit confusing if I don’t understand exactly what Angular is trying to do for me. I would give it an A if could understand it without understanding some of the 100 stuff that I have to understand in order to get it.

That being said, I think they’ve done a really good job with making it better. I’m also pretty well convinced that the only way they can figure out how to make the error messages what they need to be is do the best they can and then see where they fall apart. I’m pretty happy with it overall.

Joe:               I would give it a B to a B- but there’s a reason for that and that is because I’ve done some elm. After having done elm, nothing even begins to measure up. It can’t for technical reasons but almost amazing when it comes to error messages.

Lukas:          It’s like having a senior code or sitting right next to you saying, “No, this is what you meant.”

Ward:           That does sound delightful.

Joe:               It is delightful.

Ward:           I got an error for you guys. This one I expect Lukas to immediately come to so listen up. I’m caught in promise, something, something component, cannot find a differ supporting object, object of object of type object, NG4 only supports binding to iterables such as arrays.

Lukas:          Are you using the A sync pipe? Actually I think where I’ve seen this is I’ve actually tried to use the JSON pipe on asynchronous object.

Ward:           You were so hot. I’m giving you full credit. Ding, ding, ding.

Lukas:          You basically trying to jump like use the JSON pipe but it’s actually putting an observable into, you’re tying the JSON pipe on an observable and so what you had to do is whatever your value is, A sync pipe JSON.

Ward:           That may also be true. The specific case I had was where I had an NG4 over like say let hero or heroes. Heroes is an observable and I forgot to pipe it into the A sync.

John:             I don’t like that error message. To me that’s one of those error messages you need a pattern matching for. You just have to see it to know it.

Ward:           Yeah. I always forget it because I don’t get enough. That’s an example of a terrible message.

John:             Yup. The differ.

Ward:           Of object of object of object of object. It’s almost as bad as the universally most horrible error message in all of JavaScript which is cannot find undefined.

Joe:               Yes, yes.

Ward:           Yeah. Undefined is not a property or something like that.

John:             You cannot find property of undefined.

Ward:           Yes.

John:             Thank you very much JavaScript.

Ward:           Thank you. Would you just tell me what property that is? “That’s undefined.” That would be helpful. You know what it is.

John:             At least you get zero or down.

Ward:           You know what it is.

Joe:               Don’t hold out on me man.

Ward:           Exactly. Nope, tot telling you. There’s a property, it’s undefined, I’m not telling you where it is. Good luck with that.

John:             Let’s play a game. Here’s a last one I’ve got for you guys. Since you brought up observables, I ran to this a lot and I’ll just tell you the scenario. You start coding, you pull in the http module, you’re doing an http get, and then when you get the results back, your data on that backend is like data.results.customers. You don’t want to return that to the component, you just want to return customers from your JSON. You need to map the results. Will we then chain the map function on the http get so you have http get might url.map, you can put your function in there, and then you run your code. You get the error, “I don’t know what the hell map is. What are you doing John? There’s no map observable.”

Joe:               This is the worst one because there’s like eight different ways to solve it and only three of those ways work at any given version of Angular 2.0. This is the worst one. If you search for that problem, like map does not exist, you will find so many articles, comment threads, and discussion about this and none of them are useful. None of them tell you, give you the right solution. What about the fifteenth one you read that you try will actually then solve your problem. When you’re done with it you’re going to say to yourself, “I’m not 100% sure what I did to fix the problem.”

John:             You may not even know it’s about RXJS when you do it. You just write your code and you’re like, “It’s a map.” If you’re like me, you might be thinking, “I use map on arrays all the time so why isn’t map there?”

Joe:               I know that Ward is not going to have this problem but personally for me I’ve encountered this problem 20 times, 30 times, I’ve solved it every time. Today if you asked me, “I got this problem, how do I solve it?” I was going to say, “I have no idea. I can’t remember.”

Ward:           Joe, solve it. Solve it.

Joe:               I can’t remember the right way to solve this so I’ve got to go and look it up.

Ward:           Yes you can. You can do it. You can do it.

Joe:               No.

John:             We actually had a chat about this. You turn away today about this problem, about the solution. We all have three or four different ways to solve it Ward, we all talked about?

Ward:           Yes. But it was very new ones’ discussion. There’s an [00:58:46] way. All right Joe I’m going to spot you some of it, then you finish it for me. Import ‘RXJS/add/operator/ finish it. Import ‘RXJS/add/operator/

Joe:               Then map. That like is the source solution but if you do that there in that file then you just did the same problem in the next file. There’s these generic ways to solve it.

Ward:           You don’t, you don’t have it again in the next file if your application run through this one first.

Joe:               Right. Right, right, right.

John:             You may or may not get us.

Joe:               I really like John, it was in the tour of heroes I think you did this John, you did this generic solution. You cheated.

John:             I did. I cheated. Basically I wrote the answers down at the back of my hand then I do it that way. That’s how I did in tour of heroes.

Ward:           It actually shows up in testing too. Joe I know you do testing. Nobody else does but you and I do.

Joe:               Right. Turns up a testing too. It’s a bugger there too.

Ward:           Right. One of the options is to sort of say, “I don’t want to ever see this problem again. I’m going to hit the top of my root module. I am going to load all of these operators that I ever need and then I’ll be done with it, all I have to do at one place.” That sounds very tempting. But then when comes time to test that service that needs the map, it has no idea about you’re having prep extended observable with all those things and when it runs it says, “I don’t know what map is.” You say, “Wait a minute, it works in production. It knows what map is in production. How come it doesn’t know in my test?” And that’s why.

Joe:               A while ago, you could just import observable and it would solve this problem.

Ward:           That was long time.

Joe:               That was a long time ago. I got so used to that and then I stop wondering why.

John:             We were doing what? Import RXJS/RX or something like that at some point. Which basically imports the entire darn thing.

Ward:           That’s the entire world and its 300,000 and so what? By the way that’s what my pals do. When they’re doing desktop apps and where size doesn’t matter is some people say. Some people say size doesn’t matter. But it doesn’t. In their world of infinite bandwidth and connectivity and big machine, you just say, “Why would I mess with this in my environment? Bring in the kitchen sink and be done with it.”

Joe:               Right. There’s the thing is like I’m just going to do it that way and I’m let tree shaking solve my problems for me.

Ward:           Won’t do it, won’t do it.

Joe:               It won’t do that?

John:             No. Not on operators.

Ward:           Nope, nope, nope, nope. It serves our extensions to the prototype that has no idea.

John:             I did not know that.

Joe:               Wait a second, tree shaking can find unused functions, how can it not solve that?

Charles:        It’s not magic Joe.

Joe:               It is magic. Tree shaking is magic. It is magic, I saw the talk in Angular Connect, tree shaking is magic.

Ward:           It is. Plant tree, water it, and it will grow.

John:             The way you look it is for symbols you import directly, yes. The things that you can grab a handle of as a symbol, yes. For extensions and chains, no.

Joe:               That’s the basic tree shaking but there is like the closure compiler. That can find functions that are not used and pull them out.

Ward:           Although I thought I had heard that the closure compiler wouldn’t get that one either and there’s certainly plenty of things you have to do to tell the closure compiler what to do. This is the hardest part of development, is tuning your application for production but it has always been lost. Every other environment I’ve ever been into, you always have some amazing incantations, and you have to go find the right wizard to help package it up.

Joe:               I heard that webpack tree 2 shaking would do this as well.

Ward:           I’m waiting for webpack 6.

Charles:        Its elemental magic does not work on models.

John:             A year for now, they’ll all be shakes.

Joe:               Yes.

John:             That’s why Joe what I do with my stuff and I think you’ve seen this, what I did actually cheat upfront and I import all the operators that I want to use in my app in my root module. And then in my unit test, I always import that file again.

Ward:           That’s true. We thought about doing that as part of our testing. That will do John. I think that’s a really brilliant strategy except that now you’ll never know if you ever had some other kind of mistake. I think that’s a reasonable approach, it’s a reasonable approach.

Joe:               You also pick your 10 most common wants and if you only use seven, you still have 3 unused ones. Not that they’re 300,000 of unused ones but still you got those unused ones. If you ever decide to use the different one, some got a way better solution, a way better solution for this.

Ward:           Don’t use RXJS?

Joe:               You turn every observable into the promise, you don’t use any operators.

John:             There you go. Or don’t use the operators, just use the functions because that’s also an option too, but just then you can chain of course which really sucks.

Joe:               Yeah. You’re also then totally using RXJS in a non-idiomatic way.

John:             Yes. Exactly.

Joe:               [01:04:24] come along behind you and be like, “What are you doing?”

Ward:           When you have seven comes. That is the way we’ll do it.

John:             Double call ins, what do you call that thing?

Ward:           It’s called bind. It’s this binding. Comes in the ES7. For those people who know C# it’s the equivalent of an extension method.

Lukas:          Oh really?

John:             That’s why I looked at it, it’s called binding?

Ward:           Yeah. It’s a binding operator.

John:             It’s coming in ES 2016, is that what you guys saying? The version that supposed to be of landed by now.

Joe:               It’s almost 2017, yeah.

Ward:           Actually it’s been front of the TC39. The last I looked which was like today I think, just by happenstance, I don’t think it was approved yet. Everybody wants it but I think it didn’t come in in time for seven so maybe it’ll be an eight, who knows. Anyway, we’re all waiting for it, we like to have it.

John:             Ward’s one of the guys that checks the weather and he checks the TC39. I warned you, Alexa, what’s the current status of Vios 7?

Joe:               That’s a great idea for an app, that’s what we need to build. We need to build the Alexa app for the TC39, there we go.

Charles:        All right. I’m going to push us over into picks.

Ward:           Wait, wait, wait, wait, wait, wait, just before we go to picks, let’s bring these things around. Our goal is not to scare people.

Lukas:          It’s too late.

Joe:               We’re the worst, we’re the worst podcast on the internet.

John:             To be fair, we could have made all these terrible mistakes in any other framework and we have, we have.

Ward:           Because everything else is a dumpster fire except elm, right Joe?

Joe:               You got it, you got it Ward.

John:             Oh my gosh. It is way better in Angular 2.0 than Angular 1. Angular 1, my least favorite error was that, I can’t remember the exact message but it’s basically you forgot a provider and instead of being told a provider it says, “Cannot find NG local.” You’re like, “I didn’t use NG local. Why are you telling me about this?”

Ward:           All right. We can pick.

Charles:        All right. Ward, pick?

Ward:           All right. Just for John, because I know how much he loved it last time.

John:             Star Wars?

Ward:           No, it’s better than that. I found a new video on Artisanal Pencil Sharpening. I’ll put that one in the show notes. It’s the same guy talking some more about how to sharpen your pencil the right way. I think it’s required viewing. When you’re about to shoot yourself for having watched that, I’m then going to also post a link to one of my favorite comedy teams, Bob and Ray doing one of their classic interviews about the most beautiful face contest winner. I’ll plunk that in there. If you don’t know Bob and Ray it’s time to learn about Bob and Ray.

Charles:        All right. John, what are your picks?

John:             Oh my gosh it’s hard to follow up Ward. I’m just thinking about how boring that video must be.

Charles:        Hey, it’s Artisanal.

John:             How to watch a pencil being sharpened. We twist the pencil, watch the wood flakes as they fall gently to the floor.

Charles:        You’ve seen it.

John:             My pick first is going to be a Plunker pick. You may know Plunker, you may think you know Plunker, but there is a new feature in Plunker. Jeffrey, what’s his last name Lukas?

Lukas:          Oh, you totally caught me off-guard. Jeffrey Goodman.

John:             Jeffrey has created a new version of Plunker which I don’t know if it’s fully released yet but it is available in some forms. It’s phenomenal because it’s solves one of the biggest problems in existing Plunker, and that’s when you have more than five or six files, you’ve got folders, it’s really hard to read Plunkers. The new version of Plunker is going to have a nested folder, and open and close, basics stuff that just makes it so much easier to do. Kudos to Jeffrey and Plunker.

Ward:           That’s a good one. I like that a lot. We started to use that in some of Redux too.

Charles:        All right. Joe, what are your picks?

Joe:               I’m going to pick the Jamba Juice’s Peanut Butter Chocolate Love Shake. If you happen to have a Jamba Juice, do you? You should immediately turn off this recording, go to Jamba Juice, and buy one. They’re absolutely delicious. I don’t know why. I keep craving them. I think they must put like cocaine or something in them because I cannot get enough of that PB Chocolate Love. They’re seriously delicious, they’re so good. It’s like getting a chocolate peanut butter shake, a malt or something which I also love.

That’s the healthy version. I’m going to pick the unhealthy version which is Smashburger. If you happen to live in the State that has Smashburgers, they have Chocolate Peanut Butter Malt, it’s the unhealthy, I’m sure neither one is really healthy but the way worst for you is the Chocolate Peanut Butter Malt from Smashburgers, so good. I’ll pick those.

I’m also going to pick Tesla’s new solar shingles and power wall too. I just got this email because I was interested in the power wall, the battery for your home. “By the way, we just doubled the capacity of the power wall and we’ve got these shingles now.” Tesla’s coming out, the car company. Although they said they’re really just a battery company but they’ve got these batteries you put your home, and now they’ve got these shingles on your solar cells. They’re super cheap and I guess Tesla’s be more cost effective than adding solar to your house, it’s getting these shingles. This could be a really big game changer in the energy game. I’m going to pick Tesla just because Tesla’s an awesome company. Open source in their patterns on cars and to open enough and get more people to make electric cars. They’re great, I love Tesla.

My last pick is going to be kind of a met pick. I didn’t love this. Played a board game called Covert, where you play a spy, or a network of spies like you’re the CIA or something like that. You have this network of spies. It’s going around the world doing spy tasks. It’s just plays like a regular board game like Risk or something. It was pretty fun. It wasn’t amazing, it was pretty fun. I’m going to give it just one and a half thumbs up instead of two full thumbs up. Those are my picks.

Charles:        All right. Lukas, what are your picks?

Lukas:          All right. My first pick is this album called Dr Hypenstein by Redtenbacher’s Funkestra. It is super funky and amazing. I think it’s been the only album I’ve actually listen to for the last two weeks. It’s pretty fantastic.

This last weekend, my wife went out of town so I was watching my boys and I took them to the Legoland Discovery Center. I think that’s actually a really nice way to spend $20. They just busy played and entertain themselves for pretty much all afternoon. At least the one in Phoenix had this 4D Cinema that you could just go on and watch this newly network, really quite entertaining. I did scare my two-year-old so if you have a small child and maybe little much.

Finally, my third pick, I’m wasn’t going to say anything but because Joe is poetic about chocolate peanut butter shakes, if you ever had a one stop nutrition, you can get a healthy version that is full of protein plus recovery nutrients and it also taste like a chocolate. Peanut Butter Malt, really, so suck it Joe. It’s a way better than Smashburgers, although I do like Smashburger.

Joe:               I’m feelin’ the love Lukas, I’m feelin’ in love.

Charles:        All right, I’ve got a couple of picks. The first one is I said ago this year to listen to all of these Zig Ziglar content that’s on audible.com. I’ve really been enjoying it but lately I’ve been listening at least for the last week to the Born to Win seminar. It’s about 15 hours of Audio and it is so good. Basically what it’s about is it’s about everybody has a seeds of greatness in them and here’s how you be a successful person. I can’t say enough good things about it, really, really enjoyed it.

I’m also going to pick a tool that I found, I had recommended to me yesterday actually. I was talking to somebody about Facebook, social media, and stuff. He mentioned that I need to use a mind mapping and he told me to use software called MindMup, mindmup.com. What you can do is you can actually have it save your mind maps to Google Drive. Then you could just access that stuff through Google Drive, it’s pretty awesome. Just go to mindmup.com, click on get started, and then click on Google Drive, and you can install the app to Google Drive and then it just works.

Joe:               Have you actually used this Chuck? You tried it out?  Because my problem with Mind Maps online where I love them paper but online, there’s a dissonance between writing ideas out. Of course on paper it gets cluttered but on a software product I tried severally, just never quite organized it the way I want to organize. Didn’t just feels like I happen to learn too many keystrokes and I practically have to learn them, a lot of them actually having a lot of good keystroke button. It’s too much moving back and forth, the mouse and stuff. I haven’t been really pleased.

Charles:        Yeah. I’ve ran across that in a couple of places where, I don’t know exactly how to put it but essentially yeah.

Joe:               This guys say they have a frictionless interface. It says frictionless Chuck.

Charles:        Yeah. I haven’t used it a lot. I’ve fiddle with it a little bit and it seemed to work nicely. I use Mindmeister before, you had to learn their keyboard interface in order to use it. It was just way too much. The other thing is a lot of times the mind mapping tools will space stuff out weird or bunch it up all together and then as you add more stuff then it’ll kind to space to out because it has too. I don’t know if it has problems or not but I’ve been pretty happy overall with just the fact that a.) it’s in Google Drive, and b.) it seems like a pretty simple tool that does what I want it to do. How does that grab you? My answer to your question is mostly I don’t know. I haven’t deeply dealt into that. Anyway, those are my picks.

I also just want to let folks know that the conferences for next year are up. You can go to devchat.tv/conferences. I’m hoping by the time this comes out, you can also go to devchat.tv/webinars and I’ll have a new interface up for that so that people can see what I’m doing there as far as live events.

Finally, I’m going to start posting videos to YouTube everyday just talking about Devchat.tv, the business, life, and stuff like that. If you’re interested in kind of a more personal take on what I’ve got going on, then by all means, check that out. That’s all I’ve got for picks. Is there any news on NG Conf other than go get the lottery stuff?

Joe:               The same piece open now. It’ll be open for a while, it’s up on until January something. Go smith your talks on the CFP. It won’t be very long after this when the tickets are going to be completed. December 6 is when the final few tickets just go on public sale. You got the lottery drawings until then just keep pulling names for the lottery tickets and offering them the opportunity to buy their tickets. They have a couple of days, if they don’t, we give other people the opportunity. That’ll be going on for like the next months, so couple of weeks after you hear this, and then December 6 is the last tickets, and that’s it.

Charles:        All right. We’ll go ahead and wrap the show up and we’ll catch you all next week.

Joe:               See yah.

Ward:           Bye, bye now.

x