How to copy static asset like html or files in angular (2 or 4) using file-loader

Question

I'm developing an application which uses angular 4 and bundling is done by webpack.

I'm able to properly bundle all the js files. But when i tried to copy the html file using file-loader. It is not working and not copying it into the output folder.

Please find my webpack.config.js file.

var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');

module.exports = {

    entry: './app/main.ts',
    output: {
        path: path.join(__dirname, 'appbundle'),
        filename: 'app.bundle.js',
        publicPath: '/'
    },

    module: {
        rules: [
            {

                test: /\.html$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            },

            { test: /\.ts$/, loader: 'ts-loader' },
            { test: /\.scss$/, loader: ExtractTextPlugin.extract('raw-loader!sass-loader') },
            { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url-loader?limit=10000' }
        ]
    },

    resolve: {
        extensions: ['*', '.js', '.ts']
    },

    plugins: [
        new ExtractTextPlugin('app.bundle.css'),
        new HtmlWebpackPlugin({
            template: "index.html",
            filename: "index.html"
        })
    ]
};

One of the html file.

 import { Component, OnInit } from "@angular/core";
    import { HeaderComponent } from "./components/header/header.component";
    import { SidebarComponent } from "./components/navigation/sidebar.component";
    import { DashboardComponent } from "./components/dashboard/dashboard.component";
    import { RouterOutlet } from "@angular/router"
    import { Observable, BehaviorSubject } from "rxjs";
    import { PageTitleService } from "./services/pagetitle.service";
    import {DateRangePickerComponent} from "./components/datepicker/lart.datepicker.component";
    import {CustomDatePicker} from "./components/datepicker/custom.datepicker";
    import {LoadingComponent} from  "./components/loading/loading.component";

    @Component({
        selector: "lart-root",
         templateUrl:'./app.component.html',
        styles: [require('./app.component.scss').toString()]
    })

    export class AppComponent implements OnInit {
        public pageTitle: string;
        private pageTitle$: Observable<string>;


        constructor(private pageTitleService: PageTitleService) {
            this.pageTitle$ = pageTitleService.pageTitle$;


        }

        ngOnInit() {
            this.pageTitle$.subscribe(title => { this.pageTitle = title });

        }
    }

Can you please help me to understand what is going wrong here

Answer 1

I got my mistake. This might be useful for other people. So just updating my answer.

Webpack.config.js

 module: {
    rules: [
        {
            test: /\.html$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                        publicPath:'/'
                    },
                }

            ],
            include: path.join(__dirname, 'app'),
            exclude: [
                path.join(__dirname, 'index.html'),
                path.join(__dirname, 'appbundle', 'index.html')
            ],
        },
        {
            test: /\.ts$/,
              loader:'ts-loader'
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [
                    {
                        loader: "css-loader"
                    }]
            }),
            include: path.join(__dirname, 'content', 'css'),
        },
        {
            test: /\.(scss)$/,
            loader: ExtractTextPlugin.extract(
                {
                    fallback: "style-loader",
                    use: [
                        {
                            loader: "css-loader"
                        },
                        {
                            loader: "sass-loader"
                        }]
                }
            ),
            exclude: path.join(__dirname, 'content', 'css'),
        },
        {
            test: /\.(woff2?|ttf|eot|svg)$/,
            loader: 'url-loader?limit=10000'
        }
    ]
}

When we refer the html file in ts. We need to use require and templateUrl

@Component({
        selector: "lart-root",
         templateUrl:require('./app.component.html'),
        styles: [require('./app.component.scss').toString()]
    })