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: 404 error, 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 a very good design, because under different circumstances the catalog assembly may not be the same, can I change it to the relative current path?

raw-loader can resolve this, but html-loader , less-loader does not work for template , styles , it only works in string , so why not support 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 another 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. 

Answer 1

Let me add more info.

Why can't Angular compute HTML and CSS URLs from component file location?

Sorry, this location is unknown. Angular applications can be downloaded in various ways: from individual files, from SystemJS packages, or from CommonJS packages, to name a few. Due to such a variety of download strategies, it’s not easy to say at run time where these files are actually located.

A single Angular location can be specified in the index.html main page URL. Therefore, by default, it resolves the template and style paths relative to the index.html URL. That is why we previously wrote our CSS file URLs with the application / database path prefix.

Official Angular Docu

Answer 2

The ./ notation (single point) only works for ts paths, it does not work with html or css paths.

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

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

Answer 3

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']}) }) 

Answer 4

Set the moduleId property to module.id to relative load the module so that the URLs refer to the component.

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

Answer 5

If you use SystemJS, for example, see my answer here: fooobar.com/questions/71827 / ...

You can use model.id and convert it from your build path (using js) to the ones with ts, css and html. This way you can use relative paths for your templates and styles in Angular 2 without any problems

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

Answer 6

I noticed the same error in my case. Cause

Expected "styles" should be an array of strings

in my case there was css-loader that was used to load CSS files and sent to angular2-template-loader .

What I understood due to debugging is that css-loader has some "smart" detection of changes in CSS files, and if nothing was changed, then the CSS file was simply not exported as a string by the webpack module.

Since it was just a hello word application, my solution was very simple: replace css-loader with raw-loader . This is my version of the bootloaders:

 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 } } ] 

Answer 7

WebPack2 no longer requires this module.