Comments (6)
@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.
Related Issues (20)
- Missing assets HOT 1
- Error "callback(): The callback was already called" when building with the new cleanup loader HOT 12
- breaks webpack-dll-bundles-plugin HOT 1
- Add missing any to parameter in plugin.d.ts
- AOT build with angular i18n
- Cannot set property 'disable' of undefined (tsconfig inheritance)
- Plugin doesn't work with angular 5.0.0-rc.0 HOT 23
- Angular 5.0.0.rc6 HOT 7
- Angular 5 Issue HOT 2
- 4.1.0 missing ngc-webpack/src/cli.js HOT 1
- Loader typescript chain in AOT ? HOT 2
- js, .d.ts and metadata file not generated
- Watch mode simply doesn't work with 3.x?
- Missing tsickle depedency
- Lint only
- Change log docs?
- 'Must specify "tsConfigPath" in the configuration of @ngtools/webpack.' HOT 1
- ngc version 3 work with webpack 4 HOT 1
- Error: The "@ngtools/webpack" package installed is not compatible with this version of "ngc-webpack" HOT 9
- Angular 7 ngc-webpack HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngc-webpack.