Short Imports with TypeScript Path Mapping

I need to start this video off on a sad note on New Year's Day I lost my father unexpectedly at the age of 57 he lived a good full life but I just want to remind everybody to enjoy the time you have with your family because it can end before you know it I'd like to say thank you to everybody who supports this project and I look forward to bringing you a whole bunch of awesome resources in 2018 to kick things off I'm going to give you a quick angular productivity booster to eliminate long relative paths that look like this to a single global namespace this means you can give all of your feature modules a specific namespace and you never really have to worry about relative paths within your project to demonstrate this I'm starting off in a brand new angular 5 app and I'm going to generate a couple of ng modules first one being Corps second one being shared from there I'm going to generate a service inside of the core module we'll just go ahead and call this the off service then I'm going to generate a component but for no reason at all I'm going to nest this deeply within the file structure of the project let's go ahead and call it the deeply nested user login component then if we look at the file structure on the left you can see the actual component file itself is nested about six levels deep within our project this isn't really a problem unless we need to import this file in a different file that's nested higher up so let's try this by importing the service into the component just a quick side tip here whenever you import a file in typescript start with empty parentheses then type out the path so you can use typescript autocomplete from your IDE and save yourself a few extra characters of typing at this point we're going to have to traverse up the file structure so we do dot dot slash a whole bunch of times until we finally get to our core module then we go in there and grab the off service if you're an angular developer you probably get really annoyed if you have to do this frequently in a large complex file structure it also becomes a problem if you change the file location because you'll have to go back and rewrite each individual path that references this module and it's also a problem when the imports are reversed if we were to import the component in the service we'd have to write out the end tire deeply nested paths fortunately typescript gives us an easy solution to eliminate this problem altogether before I show you the actual solution I want to show you the end result so instead of the dot dot / path that we have here we're going to namespace the auth service so that we can reference it from anywhere in the project without dealing with the relative path in this case it's our core module so we'll namespace it with at core an added benefit is that the import statement looks exactly the same throughout your project so you can easily do a find and replace if you change the name or location of the imported file we can follow the same pattern for our component but this time we'll namespace it with shared instead of core the only thing you have to watch out for is name collisions so you wouldn't want a namespace anything with angular or ngr X or any other common mono repo out there to make this possible all we have to do is make some updates to our TS config in the root of our angular app inside of the compiler options object we're going to first set a base URL which will point to the source directory from there we'll use typescript path mapping to give paths relative to this base URL their own custom namespace the @ symbol is completely optional but I think it helps make it stand out from regular imports each namespace will point to a directory within your project so in this case we're just pointing to the core module then we'll do the same exact thing with the shared module but since we have that deeply nested in there we'll use those deeply nested paths as well and while we're at it another really useful path to namespace is your angular environment the environment paths are always really long so we can just give that its namespace and never have to worry about the relative path again and again you want to be careful of name collisions so if you want to be extra careful prefix everything with the name of your app that's it for my short imports video if this video helped you please like and subscribe and if you're serious about building apps with the stack consider becoming a pro member at angular firebase comm you'll get a free copy of my book as well as exclusive access to my upcoming full statics strike payments demo thanks for watching and all see you soon [Music] [Applause] [Music]

Channel: Fireship

Views: 35,826

Keywords: angular, angular 2, firebase, webdev, app development, typescript, javascript, lesson, tutorial, angular 5, productivity, angular tips, angular productivity, path mapping, ts angular, feature modules

Id: 1FOfL6bDSF4

Length: 4min 32sec (272 seconds)

Published: Sat Jan 06 2018