Exploring Angular2 CLI and Meteor has been an interesting journey for me. One thing I've noticed is that when I create a component using Angular2 CLI, integrating it into another module is as simple as including it in the declarations array of that module.
menu.component.ts
import { Component, OnInit } from '@angular/core';
import { MenuItem } from './menu-item';
import { MENUITEMS } from './mocks';
@Component({
selector: 'menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
menuItems: MenuItem[];
constructor() { }
ngOnInit() {
this.menuItems= MENUITEMS;
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { HomeComponent } from './home/home.component';
import { TrendsComponent } from './trends/trends.component';
import { ControllerComponent } from './controller/controller.component';
import { WaterPlantComponent } from './water-plant/water-plant.component';
import { DocsComponent } from './docs/docs.component';
@NgModule({
declarations: [
AppComponent,
MenuComponent,
HomeComponent,
TrendsComponent,
ControllerComponent,
WaterPlantComponent,
DocsComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([
{ path: 'home', redirectTo: '', pathMatch: 'full' },
{ path: '', component: HomeComponent },
{ path: 'trends', component: TrendsComponent },
{ path: 'controller', component: ControllerComponent },
{ path: 'waterplant', component: WaterPlantComponent },
{ path: 'docs', component: DocsComponent }
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
In my experience with Meteor, making it work required adding an index.ts file to the menu.component folder:
index.ts
import { MenuComponent } from './menu.component';
export * from './menu.component';
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { PARTIES_DECLARATIONS } from './parties';
import { MenuComponent } from './menu/menu.component';
@NgModule({
imports: [
BrowserModule
],
declarations: [
AppComponent,
...PARTIES_DECLARATIONS,
MenuComponent
],
bootstrap: [
AppComponent
]
})
export class AppModule {}
Could the difference in compiler "module" settings (ES6 for CLI and jscommon for Meteor) be causing this issue?
Any insights or suggestions would be greatly appreciated!