Using relative path for templateUrl in Component with SystemJS

Question

I'm trying to use relative path when defining templateUrl in angular2 component, as described here: http://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/

@Component({
    selector: 'login-app',
    moduleId: module.id,
    templateUrl: './app.html'
})

although I keep getting:

ERROR: module is not defined

I am using --m commonjs in TypeScripy compile settings.

How to make it work?

Answer 1

This simply doesn't seem to work for me. I can see in the Github repo for Angular 2 that the feature was supposedly added in early December, but it doesn't function at all best I can tell.

The docs have not been updated to reflect it, and it's still missing proper tests from what I can tell.

Update:

Here's part of what's going on. This requires a CommonJS specific feature to work, so you have to have that module system in use in your tsconfig.json file.

On top of that, there's an issue when using SystemJS because of the way it bundles everything into the root.

Basically there seem to be a lot of restrictions on being able to use this new feature.

Answer 2

You can try some steps as follow:

Step 1. Declares the ‘commonjs’ format module object that identifies the “module id” for the current module.

"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    ...
}

Step 2: Adding typings.d.ts into wwwroot folder for identifies “module id”.

/// <reference path="../typings/globals/core-js/index.d.ts" />
 declare var module: { id: string };

Step 3: Set a component’s moduleId metadata property to module.id for module-relative urls (please note the convention).

@Component({
    selector: 'login-app',
    moduleId: module.id,
    templateUrl: 'app.component.html'
})

Hope this help.

Answer 3

A workaround : use require with template instead of templateUrl

@Component({
    selector: 'login-app',
    template: require('./app.html')
})

Answer 4

I had the same problem:

error TS2304: Cannot find name 'module'.

for some reasons even with "module": "commonjs" in compilerOptions in tsconfig.json file TypeScript rise this error. So I solved the problem by adding declaration for it:

declare var module: {
    id: string;
};

Answer 5

Just set the "moduleId" property of the Component with module.id value.

Please refer to the example here: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html#!#set-the-moduleid-

Sample code:

@Component({
    moduleId: module.id,
    selector: 'login',
    templateUrl: "login.component.html"
})

Answer 6

With systemjs, first declare the string __moduleName (two underscores) and then use it instead of module.id as follows:

declare var __moduleName: string;

@Component({
    selector: 'login-app',
    moduleId: __moduleName,
    templateUrl: './app.html'
})

Answer 7

module is actually defined inside index.d.ts in node typing.

Add node in your typings.json as shown below and run 'npm run typings install'.

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

This should resolve your issue.

Answer 8

Use absolute path of html file when using temlplateUrl. for example: If your application hierarchy is MyApp->app->yourComponent.ts and at the app level your app.html is there then address the Component decorator of yourComponent.ts as follows, it should work.

@Component({ selector: 'login-app', templateUrl: 'app/app.html' })

relative path never worked for me, even after setting moduleID to module.id or any other work around. If it does work for anyone please do share.