Using relative path for templateUrl in Angular2+Webpack

Question

import {Component} from 'angular2/core';

@Component({
  selector: 'app',
  styleUrls: ['./app.component.less'],
  templateUrl: './app.component.html'
})
export class AppComponent {
  name:string = 'Demo'
}

When using the relative path for templateUrl and styleUrls, I get: error 404, file not found:

zone.js: 101 GET http://localhost/app.component.html 404 (Not Found)

code: https://github.com/Dreampie/angular2-demo

I think this is not good design,because under different circumstances may build directory is not the same, can I change it to relative current path?

raw-loader can resolve this,but html-loader,less-loader not work for template,styles,it only work in string,so why not suport them?

import {Component} from 'angular2/core';

@Component({
  selector: 'app',
  styles: [require('./app.component.less')],
  template: require('./app.component.html')
})
export class AppComponent {
  name:string = 'Demo'
}

get other error:

browser_adapter.js:77 EXCEPTION: Error during instantiation of Token Promise<ComponentRef>!.BrowserDomAdapter.logError
browser_adapter.js:77 ORIGINAL EXCEPTION: Expected 'styles' to be an array of strings.

score 3 · Accepted Answer · answered Apr 23 '16 at 20:44

Let me add some more information.

Why can't Angular calculate the HTML and CSS URLs from the component file's location?

Unfortunately, that location is not readily known. Angular apps can be loaded in many ways: from individual files, from SystemJS bundles, or from CommonJS bundles, to name a few. With this diversity of load strategies, it's not easy to tell at runtime where these files actually reside.

The only location Angular can be sure of is the URL of the index.html home page. So by default it resolves template and style paths relative to the URL of index.html. That's why we previously wrote our CSS file URLs with an app/ base path prefix.

Official Angular Docu

I think read from root path is not good design,because under different circumstances may build directory is not the same, can I change it to relative current path? — Dreampie, Apr 24 '16 at 04:17

score 1 · Answer 2 · answered Apr 23 '16 at 18:12

1

The ./ (single dot) notation works for ts paths only, it doesn't work with html or css paths.

These paths are relative to index.html, so according to your file structure, this should work

@Component({
  selector: 'app',
  styleUrls: ['app.component.less'],
  templateUrl: 'app.component.html'
})

answered Apr 23 '16 at 18:12

Ankit Singh

24,525
11
66
89

no, still can not run, because the file is read starting from the root directory – Dreampie Apr 24 '16 at 04:19
then pull your `index.html` out of `src` to the root and change the paths to `src/app.component.html`, I think that is how it should be in the first place, why would you put `index.html` in some child directory ? – Ankit Singh Apr 24 '16 at 07:19
if i have some other module,i want put template in itself module directoty,so I must write from root, thank you for you help, and now i use `raw-loader` to resolve it – Dreampie Apr 24 '16 at 09:47

Eugene Fedotov · Answer 3 · 2016-08-05T12:04:38.437

0

You need to try

@Component({
  selector: 'app',
  template: require('./app.component.html'),
  styles: [
    require('./app.component.less').toString()
      or
    String(require('./app.component.less'))
      or
    add css-to-string in your webpack conf ({test: /\.css$/, loaders: ['css-to-string', 'style', 'css']})
})

edited Aug 05 '16 at 12:04

answered Aug 05 '16 at 11:42

Eugene Fedotov

36
4

score 0 · Answer 4 · answered Sep 29 '16 at 21:10

0

Set the moduleId property to module.id for module-relative loading, so that urls are relative to the component.

@Component({
  moduleId: module.id,
  selector: 'app',
  styleUrls: ['app.component.less'],
  templateUrl: 'app.component.html'
})

answered Sep 29 '16 at 21:10

Tim

119
3

score 0 · Answer 5 · edited May 23 '17 at 12:09

0

If you are using SystemJS for example, see my answer here: https://stackoverflow.com/a/40694657/986160

You can use model.id and convert it from your build path (that with the js) to the one with ts,css and html. That way you can use relative paths for your templates and styles in Angular 2 no problem

@Component({
   moduleId: module.id.replace("/dist/", "/"),
...
});

edited May 23 '17 at 12:09

Community

1
1

answered Nov 19 '16 at 15:55

Michail Michailidis

11,792
6
63
106

score 0 · Answer 6 · answered Nov 30 '16 at 09:26

I have noticed the same error in my case. The reason of

Expected 'styles' to be an array of strings

in my case was css-loader which was used for loading CSS files and piped to angular2-template-loader.

What I understood from debugging that css-loader has some "smart" detection of changes in CSS files and if nothing were changed CSS file just wasn't exported as a string by webpack module.

As it was just hello word app my solution was very simple: replace css-loader by raw-loader. It is my version of loaders:

loaders: [
    {
        include: [srcPath],
        test: /\.js$/,
        loader: 'babel',
        query: {
            presets: ['es2015']
        }
    },
    {
        include: [srcPath],
        test: /\.js$/,
        loader: 'angular2-template-loader',
        query: {
            keepUrl: true
        }
    },
    {
        include: [srcPath],
        test: /\.(html|css)$/,
        loader: 'raw',
        query: {
            minimize: true
        }
    }
]

score -1 · Answer 7 · answered Jun 12 '17 at 13:39

-1

WebPack2 do not require this moduleId anymore

answered Jun 12 '17 at 13:39

Leo Lanese

476
4
5

Using relative path for templateUrl in Angular2+Webpack

7 Answers7