MoSheikh MoSheikh - 5 months ago 24
AngularJS Question

Angular 2 not loading test component

I got my app.component working in Angular 2 but I can't seem to get a test one working. It doesn't get past the "Loading..." message in my html. Could someone please review my code and see where I went wrong? I thought I followed the course I was watching perfectly but nothing seems to appear.

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>




Answer

// The code Look to be fine But its seems to be one issue from my point of View at now

// If name of my-component.ts: is name of file

// Then in app component you should import it

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

// You have done it

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

// .compomnent is not needed while import angular handle it with annotations

// For more about import Click Here

Comments