templateUrl in Angular2 Component not loading URL

Question

this is my Component

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

@Component({
    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 asp.net 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 }
];

app.module.ts

@NgModule({
    declarations: [AppComponent],
    imports     : [

        // Angular modules
        BrowserModule,
        HttpModule,

        // Views
        MainViewModule,
        MinorViewModule,

        // Modules
        NavigationModule,
        FooterModule,
        TopnavbarModule,

        RouterModule.forRoot(Approutes.ROUTES)
    ],
    providers   : [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap   : [AppComponent]
})

export class AppModule {}

EDIT : Some more info :

packages.json

{
    "name": "inspinia_angular2_starter",
    "version": "1.0.0",
    "description": "Inspinia Admin Theme",
    "repository": "https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S",
    "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"
    }
}

tsconfig.json

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

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

App is built using webpack

main.browser.ts

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

/*
 * Bootstrap Angular app with a top level NgModule
 */

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));

you can try (not sure) templateUrl: '~/home/home.html'. please also show your directory structure. — micronyks
– micronyks, Commented Oct 21, 2016 at 15:06
Hi, thank you for your suggestion, it did not work however. The error is still the same: Uncaught Error: Cannot find module "./~/home/home" . Directory structure should not be a concern, since this should not be a PATH to template, but rather URL to Action that will serve it — PeterSVK
– PeterSVK, Commented Oct 21, 2016 at 15:14

PeterSVK · Accepted Answer · 2016-10-23 15:00:26Z

1

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 - https://github.com/angular/angular-cli/issues/1605

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

BEFORE

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

AFTER

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

answered Oct 23, 2016 at 15:00

PeterSVK

2531 gold badge2 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aherrick Over a year ago

Thanks for this. Is there a good way to first check for static HTML, if not hit URL?

Collectives™ on Stack Overflow

templateUrl in Angular2 Component not loading URL

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related