Angular 2 - Webpack 2 - template-loader not workin

Question

I've created a minimal webpack example for my Application and I try to use templateUrl with "./file.name.html" to get compiled. But the only thing my Application shows is the name of the templateUrl "./file.name.html" on my Index page. The applications seems to work, because there are no errors in the console and the

<app>... Loading </app> 

is not shown any more. Before I tried to use webpack I've used systemJs and My App was working very well. So I don't think its a app problem.

my starting file name is boot.ts

/// <reference path="../typings/index.d.ts" />
import 'core-js/es6';
import 'core-js/es7/reflect';
import "zone.js/dist/zone";

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

the app.component definition looks like

.... Imports

@Component({
    selector: 'sxp-app',
    templateUrl: "./app.component.html"
})
export class AppComponent { ... } 

my webpack.config.js

var path = require('path');

module.exports = {
    entry: "./App/boot.ts",
    output: {
        path: path.join(__dirname, './Scripts/dist'),
        filename: "bundle.js"
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        loaders: [
             {
                 test: /\.ts$/,
                 loader: ['awesome-typescript-loader', 'angular2-template-loader']
             },
             {
                test: /\.html$/, 
                loader: 'raw-loader'
             }
        ]
    }
};

the package.json

{
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "@angular/router": "~3.2.0",
    "@angular/upgrade": "~2.2.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.26",
    "ui-router-ng2": "1.0.0-beta.3"
  },
  "devDependencies": {
    "@types/node": "^6.0.51",
    "@types/requirejs": "2.3.1",
    "angular2-router-loader": "^0.3.4",
    "angular2-template-loader": "^0.6.0",
    "css-loader": "0.26.0",
    "file-loader": "0.9.0",
    "html-loader": "0.4.4",
    "html-webpack-plugin": "2.24.1",
    "raw-loader": "0.5.1",
    "rimraf": "~2.5.4",
    "style-loader": "0.13.1",
    "typescript": "^2.0.10",
    "typings": "2.0.0",
    "webpack": "2.1.0-beta.27",
    "webpack-dev-server": "2.1.0-beta.12",
    "webpack-merge": "0.17.0",
    "webpack-notifier": "^1.4.1"
  }
}

and the tsconfig.json

 {
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": false,
     "types": [
       "node" 
     ]
   },
   "awesomeTypescriptLoaderOptions": {
     "useWebpackText": true
   },
  "exclude": [
       "node_modules",
       "dist",
       "typings/main",
       "typings/index.d.ts"
     ],
     "compileOnSave": true
   }

I am using Ui-router and I see that the right url is loaded, but its only showing the template Filenames like "./appHeader.component.html" but no Template.

Answer 1

I've found my Problem!

don't use ES6 quotation marks like

templateUrl: \`./app.component.html`

this will render just "./app.component.html" in your app

Use normal quotation marks like the following:

templateUrl: './app.component.html'
templateUrl: "./app.component.html"

Answer 2

You need to use template: require("./app.component.html") instead of templateUrl:"..." in order to make it work.

Webpack scans your files and searches for e.g. require(...) tags.

Answer 3

Another reason this won't work is if you have already compiled .js files correspoding to your .ts file. Some IDEs will create these by themselves when you save or compile.

This has the effect that when a 'module' is requested it first finds the .js file and doesn't process the .ts file at all - so it won't go through this 'chain'.

Edit your .csproj file and add this as a new property group (search first that it doesn't already exist). This will prevent Visual Studio from auto-generating a .js file on save.

<PropertyGroup>
  <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
</PropertyGroup>

Make sure to delete all generated .js and .js.map files that have a corresponding .ts file under your ClientApp folder (components etc.). Check into source control / backup first just in case.