Why it is important to set Relative Paths and How will you do it

By default Angular2 take path absolute path I mean from the root of the app mostly from the

SRC folder

But sometimes we have to give the relative path to avoid name collision so we have to use the property of component annotation named "module.id" .by using this component looks at the current folder path instead of from root level and it also make it easier to reuse our components in other applications.

For example By default:

@component({
....
// from root level path without module ID
TemplateURL : './abc/def/ghi/jkl.html' 
....
})

With using module Id

@component({
.....
//relative path
TemplateUrl : 'jkl.html',
ModuleId : module.id

// Same in case of CSS path
..... 
})

There are several downsides to using absolute paths. They make it harder to adjust our folder structure over time as the application grows. They make it harder to reuse our components in other applications.

So what do we do? We can instead use a component relative path approach.