Angular2 relative paths for templateUrl and styleUrls?

Question

While searching I found something named as moduleId to set the relative paths of template and CSS files, but I don't know exactly how to use moduleId in our components of angular2?

Actually, the problem is in my folder structure.I am loading my all .js files from dist folder whereas my view(.html files) are in the src folder. So when I use moduleId: module.id like this angular took the path from dist folder, instead of src folder.

So anybody here helps me tell that How to set custom moduleId for my component angualr2?

My folder structure like this.

                                  App
                                  /\
                                 /  \
             (.js + .map files)Dist    Src(.ts + .html + .css files)

• Folder Dist containes all .map and .js files
• Folder src containes all .ts, .HTML, and .css file.

Actual coding (working) -

@Component({
    selector: 'class-timing',
    templateUrl: 'src/components/TimeTable/class-timing/class-timing.html',
    styleUrls: ['src/app.css']
})

Modified coding (Not working due to incorrect path) -

@Component({
    selector: 'class-timing',
    templateUrl: 'class-timing.html',
    moduleId: module.id,
    styleUrls: ['src/app.css']
})

Referring to this tutorial http://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/

Answer 1

Resolved my Problem by changing path (from src to dist)of importing file at the run time like this :-

moduleId: module.id.replace("/dist/", "/src/")

By doing so you can change path directory of module ID.

thanks to @Nicolai for this awesome comment

PS:- Posting as answer may help someone

Answer 2

I also had some questions about what worked and didn't work for TemplateUrl paths. I found the following was true in my testing:

templateUrl: 'folder name / file name' did not work

templateUrl: '/folder name / file name' did not work

templateUrl: './folder name / file name' DID work

so you might try that out.