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/

Seems related stackoverflow.com/questions/34556154/…, github.com/angular/angular/issues/6053, github.com/angular/angular/issues/2383#issuecomment-176461396 — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 8, 2016 at 11:22
yups related to, but not exact what i want, have you any idea about this question ? — Pardeep Jain
– Pardeep Jain, Commented Apr 8, 2016 at 12:45
@PardeepJain, You can use angular-cli, They provide auto-setup for this all. Very easy to use — Nishchit
– Nishchit, Commented May 12, 2016 at 6:53
yeah i know but i would prefer setup settled by myself, angular-cli best for fresher's i think, you can see my setup here github.com/MrPardeep/Angular2-DatePicker — Pardeep Jain
– Pardeep Jain, Commented May 12, 2016 at 6:56

Community · Accepted Answer · 2017-05-23 11:46:44Z

6

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

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered May 31, 2016 at 6:19

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ckapilla · Accepted Answer · 2016-05-15 19:47:16Z

1

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.

answered May 15, 2016 at 19:47

ckapilla

1,17813 silver badges26 bronze badges

2 Comments

Pardeep Jain Over a year ago

does't work, already tried, btw whats the difference between these three ?

ckapilla Over a year ago

Here is a good explanation of relative (starts with /, ./ or ../) vs non-relative paths in typescript and how they are resolved typescriptlang.org/docs/handbook/module-resolution.html

Collectives™ on Stack Overflow

Angular2 relative paths for templateUrl and styleUrls?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related