Question

我在angular2组件中定义templateUrl时尝试使用相对路径，如下所述： http://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/

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

虽然我一直在接受：

错误：模块未定义

我在ts编译设置上使用-m commonjs。

如何让它发挥作用？

Answer 1

这似乎对我不起作用。对于Angular 2 I can see in the Github repo，该功能应该在12月初添加，但它根本无法正常运行。

文档尚未更新以反映它，并且它仍然缺少我能说的正确测试。

<强>更新

这是正在发生的事情的一部分。 This requires a CommonJS specific feature可以使用，因此您必须在tsconfig.json文件中使用该模块系统。

最重要的是，there's an issue when using SystemJS因为它将所有内容捆绑到根目录中。

基本上似乎有很多限制可以使用这个新功能。

Answer 2

您可以尝试以下步骤：

步骤1.声明'commonjs'格式模块对象，该对象标识当前模块的“模块ID”。

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

步骤2：将typings.d.ts添加到wwwroot文件夹中以识别“模块ID”。

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

步骤3：将组件的moduleId元数据属性设置为module.id以获取模块相对URL（请注意约定）。

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

希望得到这个帮助。

Answer 3

解决方法：使用require with template而不是templateUrl

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

Answer 4

我遇到了同样的问题：

错误TS2304：找不到名称'module'。

由于某些原因，即使在<?php $url = 'http://xxxyyy.com/post_processor.php'; $url = 'https://localhost/target.php'; $fields = array( 'lname' => 'smith', 'fname' => 'peter' ); /* prepare the data for transmission as a urlencoded string */ $data=http_build_query( $fields ); $ch = curl_init(); if( parse_url( $url,PHP_URL_SCHEME )=='https' ){ /* my server runs https so I need these lines*/ curl_setopt( $ch, CURLOPT_CAINFO, realpath('c:/wwwroot/cacert.pem') ); curl_setopt( $ch, CURLOPT_SSL_VERIFYHOST, 2 ); curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, false ); } curl_setopt( $ch, CURLOPT_URL, $url ); curl_setopt( $ch, CURLOPT_POST, true ); curl_setopt( $ch, CURLOPT_POSTFIELDS, $data ); curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true ); curl_setopt( $ch, CURLOPT_HTTPHEADER, array( 'Content-Length: '.strlen( $data ) ) ); $result = curl_exec( $ch ); $info = curl_getinfo( $ch ); curl_close( $ch ); print_r( $result ); ?> <?php $data=file_get_contents('php://input'); print_r( $data ); /* what would this show ? Object hopefully I guess */ echo '$wpdb = '.gettype( $wpdb ); ?> outputs: lname=smith&fname=peter文件中的compilerOptions中使用"module": "commonjs"，TypeScript也会出现此错误。所以我通过添加声明解决了这个问题：

tsconfig.json

Answer 5

只需设置＆＃34; moduleId＆＃34;具有module.id值的Component的属性。

请参考此处的示例： https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html#!#set-the-moduleid-

示例代码：

outputFields: {
  linkEdge: {
    type: linkConnection.edgeType,
    resolve: (obj) => ({node: obj, cursor: obj.id})
  },
  store: {
    type: Store,
    resolve: () => store
  },
},

Answer 6

使用systemjs，首先声明字符串__moduleName（两个下划线），然后使用它而不是module.id，如下所示：

declare var __moduleName: string;

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

Answer 7

由于这个问题引起了很多关注 - 我将在官方角落书目中发布一篇好文章的链接：Component-relative Paths

它解释了默认使用绝对路径的原因和如何使用相对路径，具体取决于打包和模块加载策略。

Answer 8

模块实际上是在节点类型的index.d.ts中定义的。

在typings.json中添加节点，如下所示，并运行'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"
  }
}

这可以解决您的问题。

Answer 9

使用temlplateUrl时使用html文件的绝对路径。例如：如果您的应用程序层次结构是MyApp-＆gt; app-＆gt; yourComponent.ts 在应用程序级别，你的app.html然后在那里解决yourComponent.ts的组件装饰器，如下所示，它应该工作。

@Component（{ 选择器：＆＃39; login-app＆＃39;， templateUrl：＆＃39; app / app.html＆＃39; }）

即使在将moduleID设置为module.id或任何其他解决方法之后，

相对路径对我来说也不起作用。如果它适用于任何人，请分享。

使用Angular2组件中的templateUrl与SystemJS的相对路径

9 个答案: