relative template and style urls in ionic2

[jgw96]

From @michaelknoch on June 15, 2016 14:48

is there a possibility to use relative template and style urls for ionic2 components when using browserify bundle?

I am running an angular2 web app using CommonJS and module.id in my components. The plan is to reuse these ng2 components in my ionic application, but i was not able to fix the relative/absolute path problem for now.

Anny suggestions?

Copied from original issue: ionic-team/ionic-framework#6922

[jgw96]

From @BenjaminDieter on June 17, 2016 10:55

Ionic uses WebPack, which allows us to use require() or import.

Require: (did not work for me because of missing typings which I didn't want to include)

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: require('./header.component.html'),
  styles: [require('./header.component.css')]
})
export class HeaderComponent implements OnInit {
}

Import:

import { Component } from '@angular/core';

import { Component }  from '@angular/core';
import headerTemplate from './header.component.html';
import headerStyle    from './header.component.css';

@Component({
  selector : 'my-app',
  template : headerTemplate,
  styles   : [headerStyle]
})
export class HeaderComponent implements OnInit {
}

Source: Component-Relative Paths in Angular 2 on ThoughtRam. Thomas Burleson describes how to achieve the ability to use relative paths while using WebPack there.

[jgw96]

Hello @BenjaminDieter we actually use browserify for Ionic 2 (we used to use Webpack). @michaelknoch i will speak with some of our build team and see if they have an answer for this question. Thanks for using Ionic!

[jgw96]

From @michaelknoch on June 17, 2016 22:45

I made some experience with https://github.com/ludohenin/gulp-inline-ng2-template. Maybe rendering referenced templateurl and style files inline is a solution @jgw96

ionic-team/ionic-gulp-tasks#35

[jgw96]

From @natevecc on June 19, 2016 13:52

Is there a way this could be handled by the @component's moduleId property instead of inlining the html/css? https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html#!#moduleId-anchor

[jgw96]

From @441N143G on July 6, 2016 12:43

any news about relative paths?

[jgw96]

Hello all, just a heads up that were changing up our build chain to support minification, tree shaking and offline template compilation, so all this will be changing relatively soon. Once that is done I will be revisiting this issue. Thanks everyone!

[jgw96]

From @vong-xiv on July 7, 2016 18:41

@jgw96 this is a pain that need to be addressed.
I would suggest that you guys remove the need of using templateUrl and styleUrls out (as you guys did with selector) and let it handle by the build.
So, as long as the app developer keep their html and scss files in the same folder as .ts file, then the build will grab those html and scss and place them in the correct place and add a correct path into app.bundle.js.

example:

Let's say a developer has hello-ionic page in his app and here is the structure of his files

app/
------ pages/
------ ------ hello-ionic/
------ ------ ------ hello-ionic.html
------ ------ ------ hello-ionic.scss
------ ------ ------ another-hello-ionic.scss
------ ------ ------ hello-ionic.ts

and here's need to be added into hello-ionic.ts

import {Component} from '@angular/core';

@Component({
// developer doesn't need to config templateUrl and styleUrls here
})
export class HelloIonicPage {
  constructor() { }
}

[jgw96]

From @mirkonasato on July 20, 2016 7:45

Following. Currently, code generated by ionic start has e.g.

@Component({
  templateUrl: 'build/pages/home/home.html'
})

and it's not immediately clear 1. where that build folder comes from; and 2. why it only references home.html and not home.scss. Too much magic going on there.

[jgw96]

From @441N143G on July 20, 2016 13:49

yeap, we realy need normal angular2-style with relative paths 4 this.

[royipressburger]

+1

[mburger81]

What's about this issue?

I can not use scss file inside html file and I have to set templateUrl.

pages/widget/widget.html
pages/widget/widget.scss
pages/widget/widget.ts

in the .ts file I have to set up templateUrl, there is no magic finding of html file and there is no way to load scss files for html.

Some ideas?

[441N143G]

u can import scss to theme/app.core.scss, like this: @import "../+start/start.component"; why not angular way?) because BECAUSE)))

[mburger81]

I found the solution for this, I have to configure the file in core .scss file, uhhh that's ... :0

https://forum.ionicframework.com/t/ionic2-default-starter-ignores-all-sass-files/59005

[wethinkagile]

Why was Webpack dropped in favor of Gulp? Maybe this is an interim option, but I dont like that it does so much with your source files: https://www.npmjs.com/package/gulp-angular-embed-templates. Anyway I am all in in auto-relative-hyper loading. We dont need to verbose the crap out of our files. Redundancy sucks.

[gregvis]

+1 for using moduleid to solve relative paths:
@Component({ moduleId: module.id })

[DrewLandgrave]

Any updates on this. Should we be seeing a resolution in beta12?

[mirkonasato]

Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0

The generated project now has

@Component({
  templateUrl: 'home.html'
})

so the template path is relative which is great.

There's still a home.scss file in the same folder that is somehow magically associated with the component without being referenced in home.ts.

[S-K-Lieren]

@mirkonasato Is it being imported in app.core.scss?

[mirkonasato]

@BenjaminDieter there is no app.core.scss. It doesn't seem to be imported anywhere in the project, grep -R 'home\.scss' * returns no results.

[aaronbroad]

It looks like SCSS is being brought in as part of the build process (now Rollup-based), watching for SCSS changes in the project and compiling to a main.css file.

I'd like to see the relative path used for styles as well, primarily to allow use of Angular's view encapsulation. As is, view encapsulation can be done in Ionic by inlining CSS (using 'styles' prop on Component), but the inline approach has enough drawbacks to keep me from using it.

[DrewLandgrave]

@aaronbroad Agreed. The encapsulation is one of the reasons I like Angular2 so much. Not sure why the ionic team decided against it. @jgw96 any updates on the styleUrls?

[mirkonasato]

Seems like the SCSS rules must match the Component selector. That means you need to declare a selector on each page component, just for this purpose. You wouldn't need a selector otherwise since the components are inserted into the <ion-nav> by the NavController.

Hence this change in ionic2-starter-tabs I guess.

[graphicsxp]

I've run into that same issue today. Any update on this ? Can't I use angular2 styleUrls ?
Do I have to import all scss file manually into the app.scss file instead ? (that would be a pain)

[allaanz]

Any update on this? I really would like to use the styleUrls the right way!

[SamVerschueren]

I agree. Instead of grabbing all the (S)CSS files and generating one big file, why not use the features Angular 2 has? It works great and it's also clear for everyone switching over from vanilla Angular 2 to Ionic 2. At first I was like "What!? Why can't I use the styleUrls property" and "What!? I didn't reference the stylesheet but the styles are still applied".

I haven't tested this, but what happens if I happen to have 2 components with the same selector but in different feature modules? Let's assume the selector is foo-bar. In both SCSS files I use the foo-bar selector. You will probably end up with a collision where the one is overwriting the other. That's the beauty of view encapsulation, which you get with the styleUrls property.

So yes, I hope this issue gets a little more attention.

[nikhildhar123]

@component({
selector: 'page-register',
templateUrl: 'list.html','page.html'
})

In above if I have 3 html files so one will go as selector in above but how do I write other two files in templateUrl

[mburger81]

Why do won't to do this?

I think it is better to have one Component so one selector per template.

Which are your use case you wan't to have more templates per component? I never used this and I'm also not sure if this is possible, I don't think so!

[SamVerschueren]

@nikhildhar123 That doesn't work. You can only set one template url per component. If you want multiple templates, use one component per template. This has nothing to do with this feature request.

[imhoffd]

This issue has been automatically closed because it had the v2 label. Please install the new CLI v3 (npm install -g ionic@latest). See CHANGELOG.md#Upgrading from CLI v2 for details.

If this issue is still a problem in CLI v3, please create a new issue. Thank you!

[MaciejCaputa]

Does it solve the problem?