diff --git a/public/docs/ts/latest/cookbook/component-relative-paths.jade b/public/docs/ts/latest/cookbook/component-relative-paths.jade index 4c274d5563..835b5944af 100644 --- a/public/docs/ts/latest/cookbook/component-relative-paths.jade +++ b/public/docs/ts/latest/cookbook/component-relative-paths.jade @@ -69,7 +69,7 @@ include ../_util-fns .alert.is-helpful :marked - Webpack users may prefer [an alternative approach](#webpack) that uses `require`. + Webpack users may prefer [an alternative approach](#webpack). .l-main-section :marked @@ -129,12 +129,18 @@ a#why-default a#webpack .l-main-section :marked - ## Webpack: load templates and styles with *require* + ## Webpack: load templates and styles Webpack developers have an alternative to `moduleId`. - - They can load templates and styles at runtime by setting the component metadata `template` and `style` properties - with `require` statements that reference *component-relative* URLS. + + They can load templates and styles at runtime by adding `./` at the beginning of the `template` and `styles` / `styleUrls` + properties that reference *component-relative URLS. +makeExample('webpack/ts/src/app/app.component.ts')(format='.') + +.l-sub-section + :marked + Webpack will do a `require` behind the scenes to load the templates and styles. Read more [here](../guide/webpack.html#highlights). + + :marked See the [Introduction to Webpack](../guide/webpack.html). diff --git a/public/docs/ts/latest/guide/webpack.jade b/public/docs/ts/latest/guide/webpack.jade index cbcd9a16cc..b5a2fb6875 100644 --- a/public/docs/ts/latest/guide/webpack.jade +++ b/public/docs/ts/latest/guide/webpack.jade @@ -441,6 +441,7 @@ p. `src/vendor.ts, src/polyfills.ts` ) + :marked ### Highlights: