如何使用文件加載器以角度（2或4）複製靜態資產（如html或文件）

Question

我正在開發使用角度4的應用程序，捆綁由webpack完成。

我能夠正確捆綁所有的js文件。但是，當我試圖複製使用文件加載器的HTML文件。它不工作，並且不會將其複製到輸出文件夾中。

請找到我的webpack.config.js文件。

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" 
     }) 
    ] 
}; 

其中一個html文件。

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 }); 

     } 
    } 

能否請你幫我明白是怎麼回事錯在這裏

Answer 1

我得到了我的錯誤。這可能對其他人有用。所以只需更新我的答案。

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' 
     } 
    ] 
} 

當我們提到在TS HTML文件。我們需要使用require和templateUrl

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