In the deployed version on Heroku, there seems to be an issue where a component fails to render, while it works perfectly fine locally. No error is displayed, it simply doesn't show up on the page.
A template for a navigation bar at the top is utilized in the following way: (Note that Angular Meteor 2.0 is being used, so importing the template like this is acceptable due to special angular-compilers.)
import { Component } from "@angular/core";
import template from "./about-navigation.html";
@Component({
selector: "about-navigation",
template,
})
export class AboutNavigation {
}
The above code is included in the app.module.ts declarations:
...
import { AboutNavigation } from "./templates/about-navigation/about-navigation";
@NgModule({
...
declarations: [ AppComponent,
About,
AboutNavigation,
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Subsequently, here is the actual component:
@Component({
selector: "about",
template,
})
export class About {
constructor(private router: Router) {
});
}
}
and its corresponding template:
<about-navigation></about-navigation>
<div class="container about-content page-transition" [@elementState]="pageTransition" >
<router-outlet></router-outlet>
</div>
After deployment on Heroku, the
<about-navigation></about-navigation>