0

How to load a component template/styles using absolute paths (i.e. from another module) ?

@Component({
  selector: 'a-component',
  templateUrl: 'shared-module/components/another-shared-component/component.html',
  styleUrls: ['shared-module/components/another-shared-component/component.scss']
})

I have tries using /, ~/ and just starting with the module name but none worked.

Ayman
  • 1,387
  • 4
  • 20
  • 35

3 Answers3

1

It cannot be done. There was an issue, but:

won't implement since absolute absolute paths have different meaning for AoT vs JIT. source

lisp
  • 4,138
  • 2
  • 26
  • 43
1

Have you tried start from /src/...? This works for me:

styleUrls: ['/src/shared-module/components/another-shared-component/component.scss']
Lubo
  • 47
  • 5
0

Have you tried using the relative path operators ./ and ../? If the component.html was two levels (folders) above it would be:

templateUrl: '../../shared-module/components/another-shared-component/component.html'

If in current directory but different subfolder:

templateUrl: './shared-module/components/another-shared-component/component.html'

Milo
  • 3,365
  • 9
  • 30
  • 44
  • The `../` will work but it will be a long path to get to the component folder, that's why I was looking for an absolute approach. – Ayman Oct 30 '17 at 17:45
  • Maybe [this so question](https://stackoverflow.com/questions/34925992/how-to-avoid-imports-with-very-long-relative-paths-in-angular-2) will help – Milo Oct 30 '17 at 17:49
  • This is for TypeScript module system; It seems Angular does not take that into account (though it would make sense if they did). – Ayman Oct 30 '17 at 17:51