Angular 2未加载测试组件

时间:2016-06-18 02:10:32

标签: angular typescript

我让我的app.component在Angular 2中工作,但我似乎无法让测试人员工作。它没有通过我的HTML中的“正在加载...”消息。有人可以查看我的代码,看看我哪里出错了吗?我以为我按照了我正在观看的路线,但似乎没有出现。

app.component.ts:

import {Component} from '@angular/core';
import {MyComponent} from './my-component.component';

@Component({
  selector: 'my-app',
  template: `

    <h1>My First Angular 2 App</h1><my-component>
    </my-component>`,

directives: [MyComponent]
})
export class AppComponent { }

MY-component.ts:

import {Component} from '@angular/core';

@Component ({
selector: 'my-component',
template: `<h2>Hello World</h2>`

})

export class MyComponent {
}

的index.html:

<html>
 <head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ console.error(err); });
 </script>
  </head>

  <body>
<my-app>Loading...</my-app>

1 个答案:

答案 0 :(得分:1)

//代码看起来没问题但是从我现在的观点来看它似乎是一个问题

//如果my-component.ts的名称是文件名

//然后在app组件中你应该导入它

    import {MyComponent} from './my-component';

//你已经完成了

    import {MyComponent} from './my-component**.component**';
导入角度使用注释

处理时,

// .compomnent不需要

//有关导入Click Here

的详情