Angular-cli: Allow templateUrl and styleUrls to exclude path

[johnpapa]

As per our discussion with @wardbell @Brocco and @filipesilva , we'd like to make the CLI be comfortable when a module.id exists in the @Component( ... ) decorator such that the url properties can simply be the name of the file. Examples that should work:

// no module.id
@Component(
  templateUrl: './foo.html'
) export class FooComponent { ... }

@Component(
  // module.id and just a file name, defaults to ./
  moduleId: module.id,
  templateUrl: 'foo.html'
) export class FooComponent { ... }

@Component(
  // module.id and uses the existing specified path /.
  moduleId: module.id,
  templateUrl: './foo.html'
) export class FooComponent { ... }

[clydin]

Webpack's loader-utils helper methods urlToRequest and stringifyRequest should probably be used in _replaceResources inside the CLI's loader.
I was looking at putting a PR together awhile ago but haven't had time.

[filipesilva]

Per conversation with @hansl, we should prepend ./ unless there is a /, regardless of moduleId.

[clydin]

That's essentially what the helper functions do. Plus support the webpack specific tilde which would most likely be expected if the loader is used independently of the CLI.

[filipesilva]

@clydin coolio, I'll use them then. I wasn't too familiar with those helper so I appreciate the explanation.

[CarreraPHP]

@filipesilva , Whether moduleId is present or not, 'foo.html', '/foo.html' & './foo.html' will point to the same file and will be bundled. Am i right?

[filipesilva]

@CarreraPHP /foo.html and ./foor.html are different. Consider you have src/app/one/two/folders/foo.ts and `src/tsconfig.json'.

• /foo.html is src/foo.html
• ./foo.html is src/app/one/two/folders/foo.html

That is the difference.

[CarreraPHP]

@filipesilva , Thanks for the clarification. '/foo.html' is not the way angular style guide suggests and not the way angular-cli generates files so couldn't realise this basic path concepts. However, the confusion came up due to the way static resources like images are referenced relative to the folder that contain the html template file (don't know if this is not the way it is done currently, the angular-cli version i used at that time was beta.17).

[filipesilva]

@CarreraPHP I actually gave you some bad information there.

In AoT, /foo.html will give you /foo.html in the file system.
In JiT, /foo.html will be based on the <base> tags href property.

In the CLI we always inline styles and templates so we go by AoT rules.

Edit: further correction.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}