Webpack 4.\+0 plugin that AoT compiles your Angular components and modules.\hypertarget{md_sfcode_node_modules__ngtools_webpack_README_autotoc_md2029}{}\doxysection{Usage}\label{md_sfcode_node_modules__ngtools_webpack_README_autotoc_md2029}
In your webpack config, add the following plugin and loader.

Angular version 5 and up, use {\ttfamily Angular\+Compiler\+Plugin}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{import \{ AngularCompilerPlugin \} from '@ngtools/webpack';}
\DoxyCodeLine{}
\DoxyCodeLine{exports = \{ /* ... */}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /(?:\(\backslash\).ngfactory\(\backslash\).js|\(\backslash\).ngstyle\(\backslash\).js|\(\backslash\).ts)\$/,}
\DoxyCodeLine{        loader: '@ngtools/webpack'}
\DoxyCodeLine{      \}}
\DoxyCodeLine{    ]}
\DoxyCodeLine{  \},}
\DoxyCodeLine{}
\DoxyCodeLine{  plugins: [}
\DoxyCodeLine{    new AngularCompilerPlugin(\{}
\DoxyCodeLine{      tsConfigPath: 'path/to/tsconfig.json',}
\DoxyCodeLine{      entryModule: 'path/to/app.module\#AppModule',}
\DoxyCodeLine{      sourceMap: true,}
\DoxyCodeLine{      i18nInFile: 'path/to/translations.en.xlf',}
\DoxyCodeLine{      i18nInFormat: 'xlf',}
\DoxyCodeLine{      i18nOutFile: 'path/to/translations.xlf',}
\DoxyCodeLine{      i18nOutFormat: 'xlf',}
\DoxyCodeLine{      locale: 'en',}
\DoxyCodeLine{      hostReplacementPaths: \{}
\DoxyCodeLine{        'path/to/config.development.ts': 'path/to/config.production.ts'}
\DoxyCodeLine{      \}}
\DoxyCodeLine{    \})}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\}; }

\end{DoxyCode}


The loader works with webpack plugin to compile your Type\+Script. It\textquotesingle{}s important to include both, and to not include any other Type\+Script compiler loader.\hypertarget{md_sfcode_node_modules__ngtools_webpack_README_autotoc_md2030}{}\doxysection{Options}\label{md_sfcode_node_modules__ngtools_webpack_README_autotoc_md2030}

\begin{DoxyItemize}
\item {\ttfamily ts\+Config\+Path}. The path to the {\ttfamily tsconfig.\+json} file. This is required. In your {\ttfamily tsconfig.\+json}, you can pass options to the Angular Compiler with {\ttfamily angular\+Compiler\+Options}.
\item {\ttfamily base\+Path}. Optional. The root to use by the compiler to resolve file paths. By default, use the {\ttfamily ts\+Config\+Path} root.
\item {\ttfamily entry\+Module}. Optional if specified in {\ttfamily angular\+Compiler\+Options}. The path and class name of the main application module. This follows the format {\ttfamily path/to/file\#Class\+Name}.
\item {\ttfamily main\+Path}. Optional if {\ttfamily entry\+Module} is specified. The {\ttfamily main.\+ts} file containing the bootstrap code. The plugin will use AST to determine the {\ttfamily entry\+Module}.
\item {\ttfamily skip\+Code\+Generation}. Optional, defaults to {\ttfamily false}. Disable code generation and do not refactor the code to bootstrap. This replaces {\ttfamily template\+Url\+: \char`\"{}string\char`\"{}} with {\ttfamily template\+: require(\char`\"{}string\char`\"{})} (and similar for styles) to allow for webpack to properly link the resources.
\item {\ttfamily source\+Map}. Optional. Include sourcemaps.
\item {\ttfamily compiler\+Options}. Optional. Override options in {\ttfamily tsconfig.\+json}.
\item {\ttfamily context\+Element\+Dependency\+Constructor}. Optional. Set to `require(\textquotesingle{}webpack/lib/dependencies/\+Context\+Element\+Dependency'){\ttfamily if you are having}No module factory available for dependency type\+: Context\+Element\+Dependency{\ttfamily errors. $\ast$}direct\+Template\+Loading{\ttfamily . Optional. It causes the plugin to load component templates (HTML) directly from the filesystem. This is more efficient if only using the}raw-\/loader{\ttfamily to load component templates. Do not enable this option if additional loaders are configured for component templates. $\ast$}fork\+Type\+Checker{\ttfamily . Optional, defaults to}true{\ttfamily . Run the Type\+Script type checker in a forked process. $\ast$}host\+Replacement\+Paths{\ttfamily . Optional. It allows replacing resources with other resources in the build. $\ast$}platform{\ttfamily . Optional, defaults to}0{\ttfamily . Possible values are}0{\ttfamily and}1{\ttfamily .}0{\ttfamily stands for browser and}1{\ttfamily for server. $\ast$}logger{\ttfamily . Optional. A custom logger that sends information to STDOUT and STDERR. $\ast$}name\+Lazy\+Files{\ttfamily . Optional. If}true{\ttfamily then uses the}\mbox{[}request\mbox{]}{\ttfamily placeholder to set dynamic chunk names. $\ast$}missing\+Translation{\ttfamily . Optional and only used for View Engine compilations. defaults to}warning{\ttfamily . Possible values are}warning{\ttfamily ,}error{\ttfamily or}ignore{\ttfamily . Determines how to handle missing translations for i18n. $\ast$}i18n\+In\+File{\ttfamily . Optional and only used for View Engine compilations. Localization file to use for i18n. $\ast$}i18n\+In\+Format{\ttfamily . Optional and only used for View Engine compilations. The format of the localization file. $\ast$}i18n\+Out\+File{\ttfamily . Optional and only used for View Engine compilations. The name of the file to write extractions to. $\ast$}i18n\+Out\+Format{\ttfamily . Optional and only used for View Engine compilations. The format of the localization file where extractions will be written to. $\ast$}locale\`{}. Optional and only used for View Engine compilations. Locale to use for i18n.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules__ngtools_webpack_README_autotoc_md2031}{}\doxysection{Features}\label{md_sfcode_node_modules__ngtools_webpack_README_autotoc_md2031}
The benefits and ability of using \href{https://www.npmjs.com/~ngtools}{\texttt{ {\ttfamily @ngtools/webpack}}} standalone from the Angular CLI as presented in \href{https://youtu.be/uBRK6cTr4Vk?t=6m45s}{\texttt{ Stephen Fluin\textquotesingle{}s Angular CLI talk}} at Angular Connect 2016\+:


\begin{DoxyItemize}
\item Compiles Sass/\+Less into CSS
\item Type\+Script transpilation
\item Bundles Java\+Script, CSS
\item Asset optimization
\item Virtual filesystem for assets
\item For serving local assets and compile versions.
\item Live-\/reload via websockets
\item Code splitting
\item Recognizing the use of {\ttfamily load\+Children} in the router, and bundling those modules separately so that any dependencies of those modules are not going to be loaded as part of your main bundle. These separate bundles will be pulled out of the critical path of your application, making your total application bundle much smaller and loading it much more performant. 
\end{DoxyItemize}