Add ngc option to inline templates for libraries.

[filipesilva]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Angular library authors should inline templates (html/css) to ensure overall compatibility between different consumer types.

This can be done with a fairly simple script, but it has a few pitfalls:

• special care must be taken to maintain sourcemap lines (inline over TS sources before ngc).
• unit testing requires a separate module.id based setup to load templates into karma.
• no watch mode.

Expected behavior

Since inlining is heavily encouraged for library AOT compilation, it should be included as an option for ngc (e.g. angularCompilerOptions.inlineTemplates).

Minimal reproduction of the problem with instructions
An example library can be found at https://github.com/filipesilva/angular-quickstart-lib.

What is the motivation / use case for changing the behavior?
Less work for everyone building and shipping components, one less point of failure.

• Angular version: 4.x

• Language: [ TypeScript 2.x ]

/cc @IgorMinar @jasonaden

[dherges]

dupe of #15722

[dherges]

As a workaround, you can use gulp-inline-ng2-template writing to intermedita TypeScript sources, which are then compiled by ngc. Here is an example.

@dherges the second link is dead. Could you provide working link?

[mlc-mlapis]

... this one? https://github.com/dherges/ng-packagr/blob/master/src/lib/steps/assets.ts#L22-L43

[dherges]

cc @filipesilva

You had something in mind like TypeScript transformations?

[dherges]

Hi @filipesilva,

is like you said: ngc generates the AoT metadata BEFORE TypeScript transformations are applied. Tried with customTransformers:

  // Hook into TypeScript transformation API
  const customTransformers: ng.CustomTransformers = {
    beforeTs: [ componentTransformer ]
  };

    const visitComponents = (node: ts.Decorator): ts.Node => {
      if (isPropertyAssignment(node) && node.name.getText() === 'templateUrl') {
        return ts.updatePropertyAssignment(
          node,
          ts.createIdentifier('template'),
          ts.createLiteral('foobar')
        );
      }

      return ts.visitEachChild(node, visitComponents, context);
    };

And then, the .metadata.json still includes "templateUrl" but the .js files include the "template" property in the decorator.

[dherges]

Found a workaround: explicitly call ts.transform(), then create a ts.CompilerHost reading ts.SourceFile from the previous transformation result.

Result in *.metadata.json:

                    "arguments": [
                        {
                            "selector": "baz-component",
                            "template": "foobar",
                            "styleUrls": [
                                "./baz.component.scss"
                            ]
                        }
                    ]

In *.component.js:

BazComponent = __decorate([
    Component({
        selector: 'baz-component',
        template: "foobar",
        styleUrls: ['./baz.component.scss']
    })
], BazComponent);

Now I wonder whether we can apply rollup and uglify as afterTs transformers?

[filipesilva]

Heya @dherges, thanks for looking into this! It's rather unfortunate that we can't truly run transforms before AOT does it's thing... I get how your workaround works but I expect that it would get cumbersome and error prone to maintain those patched in transforms in more complicated scenarios.

@chuckjaz WDYT about allowing custom transforms before the AOT compiler ones?

[mlc-mlapis]

It would be super elegant to do some things by this way.

Allowing custom transforms before the AOT compiler ones.

[alexeagle]

I want to take this approach for inlining in ng_package. Doing it later in the build pipeline requires workarounds for various things. Let's discuss it this week, I'd like to get it for v6 so Bazel-built packages have inlined resources.