Using relative path for templateUrl in Component w

问题:

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?

回答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.

回答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.

回答3:

A workaround : use require with template instead of templateUrl

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

回答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;
};

回答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"
})

回答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'
})

回答7:

As this question receives a lot of attention - I'll post a link to a good article in the OFFICIAL ANGULAR COOKBOOK: Component-relative Paths

It explains why absolute paths are used by default and how to use the relative paths depending on the packaging and module load strategies.

回答8:

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.

回答9:

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.