Angular的beta版本(从版本2-alpha.51开始)支持组件的相对资产，比如@Component装饰器中的templateUrl和styleUrls。

模块。id在使用CommonJS时有效。你不需要担心它是如何工作的。

记住:设置moduleId: module。@Component装饰器中的id是 关键在这里。如果你没有，那么Angular 2会帮你找 用于根级别的文件。

来源来自Justin Schwartzenberger的帖子，感谢@Pradeep Jain

2016年9月16日更新:

如果你正在使用webpack进行捆绑，那么你不需要 模块。Id在decorator中。Webpack插件自动句柄(添加它) 模块。Id在final bundle中

除了echonax和Nishchit Dhanani的精彩解释之外，我还想补充一点，我真的很讨厌用module.id填充组件。特别是，如果你支持(提前)aot编译，并且对于一个现实的项目，这是你应该追求的目标，就没有像module这样的东西了。组件元数据中的Id。

来自文档:

使用SystemJS加载器和组件相对url的jit编译应用程序必须设置@Component。moduleId属性设置为module.id。当aot编译的应用程序运行时，模块对象未定义。除非你像这样在index.html中指定一个全局模块值，否则应用程序会失败，导致一个空引用错误:

<script>window.module = 'aot';</script>

我认为在index.html文件的生产版本中使用这一行是绝对不可接受的!

因此，我们的目标是使用以下组件元数据定义(不含moduleId: module)为开发提供(即时)jit编译，为生产提供AoT支持。id线)

@Component({      
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

与此同时，我想放置样式，如my.component.css和模板文件，如my.component.html，相对于组件my.component.ts文件路径。

为了实现这一切，我使用的解决方案是在开发阶段从多个目录源托管web服务器(lite-server或browser-sync) !

bs-config.json:

{
  "port": 8000,
  "server": ["app", "."]
}

请仔细看一下这个答案。

依赖于这种方法的angular 2快速启动示例项目就托管在这里。

如果你得到typescript错误，只需在文件中声明变量。

// app.component.ts
declare var module: {
   id: string;
}
//
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

更新- 2016年12月8日

关键字module在node上可用。因此，如果你在你的项目中安装了@types/node，你将在typescript文件中自动获得module关键字，而不需要声明它。

install -D @types/node

根据您的配置，您可能必须在您的tsconfig中包含这个。Json文件获取工具:

//tsconfig.json
{
   ...
   "compilerOptions": {
       "types" : ["node"]
   }
   ...
}

// some-component.ts
// now, no need to declare module
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

祝你好运

这个moduleId值被Angular的反射进程和metadata_resolver组件用来在组件被构造之前计算完全限定的组件路径。

看起来如果你在tsconfig中使用"module": "es6"。Json，你不必使用这个:)

Angular的beta版本(从版本2-alpha.51开始)支持组件的相对资产，比如@Component装饰器中的templateUrl和styleUrls。

模块。id在使用CommonJS时有效。你不需要担心它是如何工作的。

记住:设置moduleId: module。@Component装饰器中的id是 关键在这里。如果你没有，那么Angular 2会帮你找 用于根级别的文件。

来源来自Justin Schwartzenberger的帖子，感谢@Pradeep Jain

2016年9月16日更新:

如果你正在使用webpack进行捆绑，那么你不需要 模块。Id在decorator中。Webpack插件自动句柄(添加它) 模块。Id在final bundle中