PeterSVK PeterSVK - 1 year ago 248
TypeScript Question

templateUrl in Angular2 Component not loading URL

this is my Component

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

selector: 'homeView',
templateUrl: '/home/home'
export class HomeViewComponent implements OnInit {
ngOnInit(): void {}

I am using AngularJS 2 with TypeScript 1.8.5 and trying to create component that will load template from Controller Action.

I am getting this error

main.bundle.js:667 Uncaught Error: Cannot find module ".//home/home"

I also tried it with home/home, the error is almost the same

main.bundle.js:667 Uncaught Error: Cannot find module "./home/home"

  • Error is not compile time error however - it pops up in browser console when page and the component is being loaded

So as you can see i dont want to load static template like home.template.html - that is working correctly. I want to load an HTML template from MVC Controller Action. I am not even hitting the debug point in the HomeController Home action.

Is there any way to make this work ? Seems like Angular keeps inserting this './' sign. Is there a way to configure this ? I ve read several tutorials on angular2 + mvc and it seems that this should be possible, but for some reason its not working for me.

My app.routes.ts

import {Routes} from "@angular/router";
import {MainViewComponent} from "../views/main-view/main-view.component";
import {MinorViewComponent} from "../views/minor-view/minor-view.component";
import {HomeViewComponent} from "../views/home-view/home-view.component";

export const ROUTES:Routes = [
// Main redirect
{ path: '', redirectTo: 'mainView', pathMatch: 'full'},

// App views
{path: 'mainView', component: MainViewComponent},
{path: 'minorView', component: MinorViewComponent},
{path: 'homeView', component: HomeViewComponent}

// Handle all other routes
//{path: '**', component: MainViewComponent }


declarations: [AppComponent],
imports : [

// Angular modules

// Views

// Modules

providers : [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap : [AppComponent]

export class AppModule {}

EDIT : Some more info :


"name": "inspinia_angular2_starter",
"version": "1.0.0",
"description": "Inspinia Admin Theme",
"repository": "",
"scripts": {
"typings-install": "typings install",
"postinstall": "npm run typings-install",
"build": "webpack --inline --colors --progress --display-error-details --display-cached",
"server": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000 --content-base src",
"start": "npm run server"
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"angular2-in-memory-web-api": "0.0.20",
"animate.css": "3.1.1",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.6.1",
"ie-shim": "^0.1.0",
"jquery": "^3.1.0",
"metismenu": "^2.5.0",
"pace": "0.0.4",
"pace-progress": "^1.0.2",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"typings": "^1.3.2",
"zone.js": "^0.6.23"
"devDependencies": {
"angular2-template-loader": "^0.4.0",
"awesome-typescript-loader": "^1.1.1",
"bootstrap-webpack": "0.0.5",
"css-loader": "^0.23.1",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"imports-loader": "^0.6.5",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.1",
"to-string-loader": "^1.1.4",
"typescript": "~1.8.5",
"url-loader": "^0.5.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0",
"webpack-merge": "^0.8.4"


"compilerOptions": {
"module": "commonjs",
"target": "es6",

"outDir": "dist",
"rootDir": ".",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node"
"exclude": [
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true
"compileOnSave": false,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": false

App is built using webpack


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

* Bootstrap Angular app with a top level NgModule

.catch(err => console.error(err));

Answer Source

So, after what seemed like an eternity I finally got the the bottom of this.

The problem was in webpack using angular2-template-loader. This module is responsible for inlining html template. In other words, it will do a require (using your templateUrl) behind the scenes on the template tag of your component. This, of course, breaks the functionality if you are using actual URLs as templateUrl and not PATHs, therefore the template is not there.

Based on what i read, it seems like the authors wont support this in the future. (If template is not found -> try to load it from URL)

More info here -

So, basically I just removed this component from config file : webpack.config.js


module: {
    loaders: [
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            test: /\.css$/,


module: {
    loaders: [
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader']
            test: /\.css$/,
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download