angularwebpackwebpack-html-loader

Change templateUrl property before webpack build


I have an angular2 application which is being bundled by web pack. I am using html-loader to load html files.

I wanted to ask that is there a way i can change my template url before the webpack build process starts?

Like when webpack build is about to run, i want to append a directory name before html urls. This will allow me to compile angular application against different templates.

Example:

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})

Before web pack build starts, i want to append directory name before url, like

@Component({
    selector: 'nav-menu',
    templateUrl: '/ThemeFolder/navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})

Solution

  • Ended up doing a string replace using webpack-replace loader. In my webpack.common.js i added a rule like

     rules: [
              {
                  test: /\.component.ts$/, loader: 'webpack-replace',
                  options: {
                      search: 'default', // old directory name
                      replace: 'acme' // New directory name
                  }
              }
    ]
    

    Please note that you have to install webpack-replace loader first/.