Is it possible to inline html and styles in js files generated by ngc-w (not only the final bundled js)? about ngc-webpack HOT 6 CLOSED

@tinesoft Hi,

This is not really related to the plugin but more a general question about webpack, angular and library distribution...

When you publish a library you need to remember that people are using with with and without AOT.

You need to provide a distribution that supports both, this means having all inline resources (template/styles) inlined in the code as well as supply all the resources as files.

Inlined: For JIT
Supplied: For AOT

The metadata.json files that the compiler creates will reference those supplied code for AOT compilation of you library with applications that use it.

Now, you also need to understand the role of webpack in the process...
Webpack creates the UMD bundle, that's it. It does not create the ES modules. Since a UMD is a bundle, like any other application, you get the resources inlined.

The ES modules are created by typescript.
Your tsconfig sets "outDir": "./dist" and this is where the ES modules distribution comes from. The angular compiler does not emit ngFactory/styles/ etc... files to dist and this is how it should be, it will only emit metadata.json files which are used when these files are compiled by an application... the logic is simple, the application using your library needs to be compiled but you can't compile the same source code twice so you distribute NON-AOT compiled source code but with AOT metadata so it can be compiled (metadata is needed since type information is lost).

To recap, TypeScript compiles the files, AOT compiler just adds metadata files, no change to the files and no extra source code!

Since TypeScript compiles the files you end up with a templateUrl tag without any change, just a simple string (e.g.: ./my-component.html) - webpack is not there...

for AOT support you just need to add a webpack copy plugin that copies all the files you need to the dist dir (html/css/etc). Since metadata.json files reference them and they are present they will be used in the AOT compilation process on application using your library.

For JIT it is not that trivial... you need a process that traverses the source code and looks for these resources and replaces them with the inlined version.

You need to be careful here not to relay things you are used to from webpack loaders, for example lazy routes via loadChildren needs a webpack loader... (though 0% change they are used in a lib, just for the demonstration)

Another common use case is postCSS plugins (auto prefixing, etc...), you'll get a different result from webpack if you use them.

You need something that does the above (gulp plugin maybe) but it won't be perfect.

It is possible to use webpack for this task, but it requires a new plugin and some logic...

from ngc-webpack.

Hi @shlomiassaf

Thank you for this detailed answer. Very informative 👍
I'm already using a combinaison of ngc + gulp to publish my library in a way that works
for both AoT and JiT compilations. I thought there was a simpler way to achive this using with your plugin and webpack combined...

Anyway, thanks for your help!

from ngc-webpack.

@tinesoft have you found a better approach to UMD bundling?

from ngc-webpack.

Hi @cgatian ,

Well i continued using my gulp + ngc combinaison to achieve this. Thanks to this plugin gulp-inline-ng2-template i can inline the *.html and styles into my components. Then i run ngc from gulp on the inlined components generated earlier, to generate the library files (*.d.ts, *.metadata.json, ...) for AoT compatibility.

You can have a look on this project i'm contributing to.

I plan on releasing this into a yeoman generator soon. If you're interested, i'll post back here when it is done.

Cheers!

from ngc-webpack.

from ngc-webpack.

@cgatian you can take a look at this library starter kit.

from ngc-webpack.