Javascript Angular2，尝试添加新模块时出错

我正在尝试创建一个名为“我的清单”的组件，但在运行它时遇到了问题

我已经在app.ts中声明并导入了新模块，但它似乎找不到我的html文件

我得到的错误是：

zone.js:661 Unhandled Promise rejection: Failed to load checklist.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load checklist.component.html undefined

zone.js:661未处理承诺拒绝：加载checklist.component.html失败；区域：；任务：承诺；值：未能加载checklist.component.html未定义

---

尝试加载

checklist.component.html

时，URL是相对于

index.html

的，这就是它失败的原因。把它改成

@Component({
  selector: 'my-checklist',
  templateUrl: 'src/checklist.component.html'
})

这将使它起作用。但是，我建议您找到一种在变量中转换模板的方法，并避免相对路径问题。我不知道

typescript

，但我知道

Babel

去做，也许这会管用

import template from './checklist.component.html';

@Component({
  template: template,
  selector: 'my-checklist'
})

例如，如果使用

Babel

，在

transpiled

之后，

import

将如下所示

var template = '<p>Test</p>';

var模板='测试
'；

太棒了，嗯

勾选其他问题，可能会有所帮助

---

尝试加载

checklist.component.html

时，URL是相对于

index.html

的，这就是它失败的原因。把它改成

@Component({
  selector: 'my-checklist',
  templateUrl: 'src/checklist.component.html'
})

这将使它起作用。但是，我建议您找到一种在变量中转换模板的方法，并避免相对路径问题。我不知道

typescript

，但我知道

Babel

去做，也许这会管用

import template from './checklist.component.html';

@Component({
  template: template,
  selector: 'my-checklist'
})

例如，如果使用

Babel

，在

transpiled

之后，

import

将如下所示

var template = '<p>Test</p>';

var模板='测试
'；

太棒了，嗯

勾选其他问题，可能会有所帮助

---

问题出在你的app.ts中

您试图打开组件，但您链接到应用程序。您的模块找不到html，因为您将其链接到app.ts而不是component.ts

在你的应用程序中，你说什么

bootstrap:[App]

应该是

bootstrap:[MyCheckList]

尝试并遵循如果没有得到它有一个演示你可以结帐

---

有一段时间制作了一个plunker：还要注意，plunker出于某种原因需要src/*.html。正常使用。/用于此。

问题在于你的app.ts

您试图打开组件，但您链接到应用程序。您的模块找不到html，因为您将其链接到app.ts而不是component.ts

在你的应用程序中，你说什么

bootstrap:[App]

应该是

bootstrap:[MyCheckList]

尝试并遵循如果没有得到它有一个演示你可以结帐

---

有一段时间制作了一个plunker：还要注意，plunker出于某种原因需要src/*.html。你可以正常使用。

Hmm，我把src/放在你提到的地方，我没有任何错误，但是为什么我的模板没有显示在页面上？查看页面后，我看到我的组件在那里，但不是其中的模板。在您共享的同一个plunker中进行了测试。嗯……有趣的是，您能给我发送一份您的plunkr副本吗？我仍然得到同样的东西是的，我仍然没有看到我的模板出现。当我包含我的组件时，我的测试不应该出现吗？是的，应该出现。我错过了那个细节，只是检查了模板是否成功加载。嗯，我把src/放在了你提到的地方，我没有任何错误，但是为什么我的模板没有显示在页面上？查看页面后，我看到我的组件在那里，但不是其中的模板。在您共享的同一个plunker中进行了测试。嗯……有趣的是，您能给我发送一份您的plunkr副本吗？我仍然得到同样的东西是的，我仍然没有看到我的模板出现。当我包含我的组件时，我的测试不应该出现吗？是的，应该出现。我错过了那个细节，只是检查了模板是否成功加载。