feat(@ngtools/webpack) support of single file component

[ghetolay]

Intro

This pr add the possibility to use inline template and styles with any types. So it allows us to effectively use single file component with Angular.

You can for example do the following :

template: `!md!
## This template is written in markdown
`,
styles: [`!scss!
  @import 'var';
  :host {
    div {
      color: $red;
    }
  }
`]

While using markdown to write angular templates doesn't seem like a great idea (but it's fun!) most people use scss for their styles. And you can even drop the type !scss! if you set scss as the default for styles.

API

I've added defaultStyleType option to the cli and defaultTemplateType + defaultStyleType to AOTPlugin and AngularCompilerPlugin to define default types so you don't have to set it every time.
The syntax to add type is simple it's the file extension you're expecting (e.g. the one define on your loader rule) surrounded by !. It must be at the very start without any spacing or newlines like on the example above.

Known bug

If you serve your app on aot and edit the type you"ll get an error. But this is not related to this PR and the same can be done with resources urls. The problem is that we feed the angular compiler with the previous ts program containing the compiled files before the change. So it end up asking for a file that doesn't exist anymore.

Discussion

The idea was to make it work without changing Angular at first. So we can see how this goes and then optimize it with changes to the compiler. For example this requires all components to be compiled by ts twice. That's why I don't think this pr is acceptable to merge like that, maybe we could add an experimental flag to enable it or just use this as a POC to get a feeling before implementing it on the compiler.
The good news here is that all the complex/hacky part of this PR can be easily done by the angular compiler.

So as I just said, for the moment this should be treated as a POC but I think it would be great if we could remove all those .html and .scss files and use clean single file component. The sooner the better :).

Example

I've created a repo with an example at https://github.com/ghetolay/TestAngularSFC
There is both a cli and a custom webpack build so you can play with it using any types you want, you just need to drop a loader to the config.

So what do you guys think ?

[sandangel]

Hi everyone, I have an idea of using tag function for inline template and inline style.

for example we can use like this:

template: html`
    <p>App works</p>
`,

styles: [
    scss`
        @include ...
    `
]

Pros:

1/ Get better IDE support, because now it know code inside back tick is template or string interpolation. The code now can be easily formatted, autocomplete, syntax highlighting...

2/ Support more template engine and preprocessor like pug, handlebar, less, md

It just an idea and I think this is really nice to have in the framework

[hansl]

Hi @ghetolay,

The Angular team reviewed this proposal and decided this was we were interested into, but didn't want to work on right away. This is a long term feature.

Unfortunately that means we will close this PR as part of our cleanup. When we investigate having single file components we are going to use this as one of the options to design.

Thanks

[angular-automatic-lock-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.}