Question

我已经完成了this article

这是我的代码

@Component({
  moduleId: __moduleName,
  selector: 'header',
  template: require('./header.component.html'),
  styleUrls: ['/header.component.css']
})

该行

moduleId: __moduleName,

给出错误：找不到名称'__moduleName'。

tsconfig.json文件：

{
"compilerOptions": {
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": false,
  "noImplicitAny": false
},
"compileOnSave": false,
"filesGlob": [
  "src/**/*.ts",
  "src/**/*.tsx",
  "!typings/**",
  "!node_modules/**"
]
}

我正在使用SystemJS。请帮助！

Answer 1

您可以使用以下选项之一：

<强> CommonJS的

<强> tsconfig.json ：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs", // this line
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

<强>组件：

@Component({
  moduleId: module.id,
  selector: 'header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css']
})

<强> SystemJS

<强> tsconfig.json ：

{
  "compilerOptions": {
    "target": "es5",
    "module": "system", // this line
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

<强>组件：

declare var __moduleName: any;

@Component({
  moduleId: __moduleName,
  selector: 'header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css']
})

还有一些特殊的加载器可以加载您的html而不指定module选项（https://github.com/angular/angular/issues/6053#issuecomment-222341010）

Webpack用户可以使用require（'./ some-template.html'） - 请参阅   https://angular.io/docs/ts/latest/guide/webpack.html举例说明   如何使用它。

SystemJS能够以类似的方式使用加载器来处理文本    - https://github.com/systemjs/plugin-text

另见

在Angular 2中使用SystemJS无法运行的相对路径

1 个答案: