babel-plugin-angular-component
Babel plugin that adds require() declaration if file contains templateUrl and styleUrls properties.
Example
Your some.component.ts
that contains this code:
@ {}
will be transpiled into something like this:
@ {}
Usage
- Install
babel-plugin-angular-component
.
npm install babel-plugin-angular-component --save-dev
- Add
babel-plugin-angular-component
intowebpack.config.js
. webpack.config.js
example for Angular 8+:
const HtmlWebpackPlugin = ;const HtmlWebpackTemplate = ;const path = ; moduleexports = mode: 'development' devtool: 'source-map' entry: polyfill: __dirname + '/app/polyfill.ts' app: __dirname + '/app/main.ts' output: filename: '[name].bundle.js' path: path devServer: port: 80 resolve: extensions: '.ts' '.js' '.html' '.css' optimization: splitChunks: chunks: 'all' module: rules: test: /\.ts/ use: loader: 'babel-loader' options: plugins: 'plugin-angular-template' loader: 'ts-loader' test: /\.component\./ use: loader: 'raw-loader' test: /\.css/ exclude: /components/ use: 'style-loader' 'css-loader' plugins: inject: false template: HtmlWebpackTemplate headHtmlSnippet: '<base href="/">' bodyHtmlSnippet: '<app-root></app-root>' ;