Change templateUrl property before webpack build

Question

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

Do you need to do this is Angular itself or are you ok with using another language? What's your development environment (particularly operating system)? Are you using an IDE? There are multiple possible solution, in theory, but I would like to know a little more about your setup so I can suggest one likely to be appropriate for you. — Peter David Carter, Jul 24 '17 at 10:05
I am not sure what do you mean by "another language"? I am using .NET core as my server side technology and angular2 as client side technology. Apart from that web pack is being used for module bundling. I am using Visual Studio 2017 and visual studio code (for angular) for development. — Asad Ullah, Jul 24 '17 at 10:45
Well, for example it would be possible to write a simple bash script or Python program to parse for the templateUrl string and replace it, or it may also be possible to do in node as well. I assume you have node if you're using Angular and Webpack, but I don't know if you have access to Python or bash script, or if you particularly wanted a solution within the framework for some reason. Also, in some IDEs, like Atom, there will be a 'find and replace' option, which might suit your purposes. — Peter David Carter, Jul 24 '17 at 11:02

Asad Ullah · Accepted Answer · 2017-09-12T07:14:51.657

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/.

Change templateUrl property before webpack build

1 Answers1