Angular 未知元素-带角2材质的角2

在这一点上我的头撞在墙上。我在使用SystemJS和angular material运行angular 2应用程序时出错，我不知道为什么。我正在使用angular种子项目：。我通过以下指南添加了材料：

错误：

未处理的承诺拒绝：模板分析错误：
“md工具栏”不是已知元素：

home.component.html

测试

SystemJS配置

this.NPM_依赖项=[
…此.NPM_依赖项，
{src:'@angular/material/core/theming/prebuild/indigo pink.css'，inject:true}
//{src:'jquery/dist/jquery.min.js'，inject:'libs'}，
//{src:'lodash/lodash.min.js'，inject:'libs'}，
];
这是addPackageBundles({
名称：“@angular/material”，
路径：'node_modules/@angular/material/bundles/material.umd.js'，
包装梅塔：{
main:'index.js'，
defaultExtension:'js'
}
});

请注意，在使用开发工具检查源时，文件似乎正在浏览器中加载

应用程序模块

package.json

主组件

Q-如何解决此未知元素问题？谢谢
 选项1：

确保使用以下命令将材料安装到应用程序中

npm install --save @angular/material


转到节点_模块并检查这些文件是否存在

node_modules/@angular/material/bundles/material.umd.js
@angular/material/core/theming/prebuilt/indigo-pink.css


如果存在上述两个文件


删除“材质”文件夹
请重新安装
安装前，请检查package.json文件中是否存在依赖项
现在检查是否存在上述文件

在“开发人员工具”的“网络”选项卡中，检查您是否具有以下功能


备选案文2：

如果上述解决方案不起作用，请尝试使用此解决方案

在index.html中包含以下文件

在config.js文件中，删除
@angular/material
行，并使用下面的cdn参考

“@角度/材料”：”

以显示cdn参考有效

更新1：plunker现在工作正常，你可以看看它

对选项2的解释是使用cdn参考，它不关心是否安装了node_模块，在大多数情况下它肯定会工作。如果此cdn链接修复了您的问题。更新我我们将尝试修复您案例中的选项1。
@karns，您提到HomeComponent中存在问题，我注意到在您的导入列表中，有一个HomeModule

HomeComponent是否属于该HomeModule

如果是，您是否将MaterialModule导入HomeModule

您需要将MaterialModule（或导出MaterialModule的模块）导入到每个可能在其模板中使用角度材质组件的模块中。
如上一版本所述）您必须在加载
home.component的模块中导入
MdToolbarModule

如果模块是
home.module
，只需在那里加载
MdToolbarModule
，如下所示：

import { MdToolbarModule } from '@angular/material';

@NgModule({
    imports: [
        ...
        MdToolbarModule, // HERE YOU IMPORT THE TOOLBAR MODULE. IF YOU WANT ONLY THIS MODULE IN YOUR BUILD
        ...
],
...

这是需要的，因为AOT和延迟负载。这是删除不必要代码的唯一方法。如果您没有在每个需要它的模块中加载该模块，编译器将永远不知道谁使用它，并且需要在所有组件中附加它，即使它不是惰性组件

您不需要在其他组件中加载
MaterialModule
，而是在
app.module
中加载的原因是
app.module
是您的入口点，无论您加载的是哪一个惰性模块，它都会被加载。我们可以说，
app.module
是每个模块的父亲，不管它们是否懒惰

因此，如果您使用
forRoot（）
在
app.module
中加载模块，则意味着您创建了模块
服务的全局实例，并且所有子组件都可以访问thaqt服务。这就是您不需要再次在
home.module
中加载
material.module
的原因，因为
MaterialModule
用于加载material用于连接物料组件的服务。这就是MaterialModule所做的一切

如果已在父组件中加载
MaterialModule
，则每个材质组件都是即插即用的

对于未使用
forRoot（）
加载的模块，您将没有单例服务，因此需要在每个组件中加载它。所有这些都是必要的，以便在构建中只包含所需内容的地方实现更好的树抖动。
检查内部
package.json
材质版本。仅导入
MaterialModule
而不是
MaterialModule.forRoot（）
并检查。@Kinduser-为您添加了package.json。@micronyks-这不会修复或更改错误，谢谢。HomeComponent是在HomeModule内部声明的吗？很遗憾，选项1不起作用。文件在那里，但仍然存在错误。请详细说明选项2子弹2，好吗？我想你指的是SystemJS配置。你能提供代码更改的上下文吗？@karns会看一看并在某个时候向你更新谢谢Aravind的帮助-非常感谢你的帮助，你提出了一些有用的建议，最终缩小了问题的范围，但没有解决它。但是，其他人的回答是正确的。谢谢你的回答，Snork。这是正确的，但是我将接受Vinagreti的回答，因为他有一些示例代码。向上投票。啊！当然，这是显而易见的。感谢你关注这件事。这确实是因为我使用的种子项目有那些独立的模块。。。你能清楚地说明为什么他们决定将每个组件放入自己的模块中吗？对我来说，各个模块是一个内部实现细节
npm install --save @angular/material

node_modules/@angular/material/bundles/material.umd.js
@angular/material/core/theming/prebuilt/indigo-pink.css

import { MdToolbarModule } from '@angular/material';

@NgModule({
    imports: [
        ...
        MdToolbarModule, // HERE YOU IMPORT THE TOOLBAR MODULE. IF YOU WANT ONLY THIS MODULE IN YOUR BUILD
        ...
],
...