TemplateURL - Relative Path not resolving.

I’m submitting a … (check one with “x”)

[X] bug report => search github for a similar issue or PR before submitting

Current behavior With the latest version of Angular 4.1.3, we need to use Relative URL’s for TemplateURL on the components.

These components are being used within an Angular Library I am building. The library compiles and is then referenced as a dependency in a new application.

Here is the old code I had within a Nav.Component :

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

New Proposed Code:

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

However I am getting the following error:

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

Expected behavior The path should route correctly to nav.component.html which is in the same folder as the nav.component.ts file.

Minimal reproduction of the problem with instructions Since we are building a library which isn’t quite yet finished, it is quite hard to reproduce a plunker for another another environment.

However hopefully someone will have some guidance/help with how the new TemplateURL’s work. As you can see from the above example, we have a standard typescript component which is referencing a html template. The directory is similar to this:

app

components

nav.component.ts nav.component.html**

So I need to reference the ‘nav.component.html’ as a templateURL within ‘nav.component.ts’. Both of these files are in the same folder.

What is the motivation / use case for changing the behavior? Upgrading to the latest version of Angular 4.1.3. Ideally need to use relative paths in the URL as absolute paths / module.id are now deprecated.

Please tell us about your environment: Windows 7. Visual Studio Code.

• Angular version: 4.1.3

• Browser: [Chrome v58 ]

• Language: [Typescript 2.3 / ES6]