angular: "Develop JIT along with AOT" - Relative Paths not working

I’m submitting a …

[ ] Regression (behavior that used to work and stopped working in a new release)
[x] Bug report 
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I originally posted the following issue https://github.com/angular/angular/issues/16891 once I upgraded to Angular 4 to resolve a problem I was having with relative paths.

The answer was relative paths are a “technical restriction” with JIT and I had to convert my project to support AOT. I agreed that it would be good to keep up with the times and went along with this. After some hard work, I finally got it working and relative paths did indeed work across my application - hallelujah!

According to the AOT compiler guide, we can ‘develop JIT along with AOT’. Ideal, or so I thought. Unfortunately this once again triggers the issues I was having with relative paths in JIT.

Expected behavior

To be able to develop JIT along with AOT, and all paths to components to be resolved successfully with each compiler.

Minimal reproduction of the problem with instructions

Follow the steps here: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html Unfortunately I cannot produce a plunker due to the complexity of the app, sorry! I might give it a go later if we’re still none the wiser.

For example, I am using a Library of components which is imported from a private repository into node_modules. One of these components is a ‘nav.component.ts’ with the following code:

@Component({
  selector: 'navigation',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css'],
  providers:[CredentialManagementService]    
})

This gets the following error when running in JIT mode:

nav.component.html Failed to load resource: the server responded with a status of 404 (Not Found)

I understand the role of the systemjs-angular-loader to help handle these and convert them to absolute paths, but this doesn’t seem to be working for imported modules. This does work fine in AOT mode though.

What is the motivation / use case for changing the behavior?

There seems to be some confusion with JIT/AOT and the use of relative paths.

The guides suggest that we can develop JIT along with AOT, however previous issues and comments have suggested that relative paths are not supported across both environments.

Surely we don’t need separate files and paths for each, as this doesn’t make logical sense? How have others been able to do this? Will JIT eventually become defunct?

With these in mind, should the promise of being able to develop JIT along with AOT be removed from the Angular guides if JIT do not support the same paths that AOT does?

Please tell us about your environment

Angular version: 4.2.2

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v6.5.0
- Platform: Windows