UPDATE: It seems that the issue lies in how I am structuring and serving the project rather than a coding problem. If I find a solution, I'll be sure to update this post.
Thank you for your assistance.
I'm currently developing an AngularJS 2 application, but I'm experiencing difficulty replacing the child component. The main component, "my-app," is functioning correctly, but the "test-view" child component is not being substituted. I have not encountered any errors during TypeScript compilation or in the browser console log.
Main.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
console.log('bootstrapping...');
platformBrowserDynamic().bootstrapModule(AppModule);
App.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './component';
import { TestView } from './testcomponent';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, TestView ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Component.ts:
import { Component } from '@angular/core';
import { TestView } from './TestComponent'; // EDIT
@Component({
directives: [TestView], // EDIT
selector: 'my-app',
template: '<p>Hello World...again</p><test-view></test-view>'
})
export class AppComponent {
my_string: string = 'Hello World';
}
Testcomponent.ts:
import { Component, Input } from '@angular/core';
@Component({
selector: 'test-view',
template: `
<p>My input: {{myInput}}</p>
`
})
export class TestView {
myInput: string = 'My Test Input';
}
Any assistance would be greatly appreciated. Thank you.
Here is the current DOM: https://i.stack.imgur.com/4Cdm2.png