Angular-cli: Support inlining of css and html resources

[jelbourn]

The CLI should support swapping out templateUrl and styleUrls with the inlined template and styles, respectively. This will facilitate the publishing of components (such as material2).

There is currently a gulp plugin that does this already. The actual inlining logic is all contained in one module while the gulp-specific parts are in another.

The inlining needs to at least occur after other build steps run for any tools that may output css or html. The material2 source, for example, uses scss to generate the css files that should be inlined into the components.

The pending Angular offline template compiler actually won't cover this use case, as the person running the template compiler is the _end application_, not the component library.

cc @hansl

[jimitndiaye]

This is indeed needed. Currently I like many others use webpack to require template html files so they get inlined. Would be great if this was supported out of the box.

[filipesilva]

Hm, though cookie. Perhaps this should be part of the bundling functionality.

Also cc @cironunes who was working on prod builds.

[hansl]

this should be prod build only anyway. Assigning to @cironunes to fix.

[jelbourn]

@Brocco your PR looks like it's just for _generating_ components. This issue was about inlining the contents of separate files at build time.

[Brocco]

@jelbourn you are correct, I apologize. This will be handled when the idea of offline template compilation gets added the CLI.

[randyaa]

Related to this, when developing locally and using ng serve how do we properly reference the templates? It seems to want to load them relative to the root of the project?

[justindujardin]

@randyaa use moduleId in your Component decorator:

import {Component} from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'awesome-component',
  templateUrl: 'awesome.component.html',
  styleUrls: ['awesome.component.css']
})
export class AwesomeComponent {}

[randyaa]

any update on this? would be nice to see soon.

[adamduren]

@filipesilva Is this the issue to follow for offline template compiler and tree shaking to get build sizes shown at ng-conf or is there a better one to follow?

[adamduren]

This one also seems to be closely related. https://github.com/angular/angular/issues/6612

[jelbourn]

This is a completely different issue than offline-compiler support (which resides in angular/angular). Inline resources is something that would be done for Angular component libraries which are then consumed into application and compiled as one unit.

[pablodenadai]

@jimitndiaye would you have more info on how to implement webpack with Angular CLI so I can require the templates?

[jimitndiaye]

@ghpabs I only use angular-cli for the scaffolding (ng generate...). So I only added the minimum necessary to get that to work. The project is based on angular2 webpack starter with minimum config added to enable angular-cli to work.
That webpack template allows in-lining html, css, etc.

[filipesilva]

Inlining of CSS and HTML added in https://github.com/angular/angular-cli/pull/1455.

[madaraszistvan]

How can I configure it?

[filipesilva]

@madaraszistvan it happens automatically, there is no configuration for it. Are you having problems with it?

[madaraszistvan]

I see, the css and html is in the main.bundle.js. And the styles.bundle.css is containing the global styles. Thank you.

[efreethy]

@filipesilva By support for inline templates, we are asking for an option that triggers a transformation layer before compilation. Namely a layer that will turn all templateUrl attrs into template attrs that point to the fetched html template strings.

The lack of this tooling is the primary reason why this library: https://www.npmjs.com/package/gulp-inline-ng2-template is getting ~30,000 downloads a month.

It is the only sensible way to prepare an angular2 package to be properly pulled in from npm (relative paths fail!)

[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._}