Angular 2 rc6 Components arent loading

Question

After upgrading my APP to rc6 some of my components aren't loading/rendering. In my APP I am differing between routing_components and util_components. I noticed all my routing_components are working fine and only the util_components are making trouble.

I am getting no compiling errors nor errors on the browser console. Simply got this:

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.

Here is how I am using my component:

<cl-largetext [options]="textTwo">Loading Text...</cl-largetext>

And all I see on the website is:

Loading Text...

I've crated 1 module for every component and have 4 wrapper modules importing the so to say component modules:

routing_module: importing all modules holding routing components

util_module: importing all modules holding util components

pipes_module: exporting all my custom pipes

services_module: providing all my services my

AppModule imports all my wrapper modules.

Now I'll show you the hierachy for 1 util_component which is not rendering:

The Component:

import { Component, Input } from '@angular/core';
import { LargetextI } from    './../../../interfaces/largetext/largetext.interface.ts';
import '../../../../../public/css/styles.css';
@Component({
  selector: 'cl-largetext',
  templateUrl: './largetext.component.html',
  styleUrls: ['./largetext.component.css']
})
export class LargetextComponent {
    constructor(){}
    @Input() options: LargetextI;
 }

The Module for the Component:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA }      from '@angular/core';
import { CommonModule }      from '@angular/common';
import { LargetextComponent }  from './../../../components/util_components/largetext/largetext.component.ts';

@NgModule({
    declarations: [ LargetextComponent ],
    bootstrap:    [ LargetextComponent ],
    imports: [ CommonModule ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class LargetextModule { }

The Util Module:

import { NgModule }      from '@angular/core';
import {LargetextModule} from "./largetext/largetext.module";
// ... more modules
@NgModule({
    declarations: [ ],
    bootstrap:    [ ],
    imports: [ LargetextModule, ... more modules ],
    schemas: [ ]
})
export class UtilModule { }

My AppModule:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent }  from './app.component';
import { ROUTES } from './app.routes';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { UtilModule} from "./modules/util_modules/util.module";
import { RoutingModule } from "./modules/routing_modules/routing.module";
import { ServicesModule } from "./modules/services_module/service.module";
import {PipesModule} from "./modules/util_modules/pipes.module";

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [ HttpModule, BrowserModule, UtilModule, RoutingModule, ServicesModule, PipesModule, RouterModule.forRoot(ROUTES, { useHash: false })],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
    providers: [ ]
})
export class AppModule { }

My main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';

if (process.env.ENV === 'production') {
  enableProdMode();
}

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Thanks for your help :)

Cheers!

Answer 1

I fixed this by using only 1 module (the AppModule). It bootstraps the AppComponent, declares all Components and Pipes, imports all Angular Modules (forms, browser, etc), exports the pipes, provides the services and uses the CUSTOM_ELEMENTS_SCHEMA.

Although this works I have to say I don't understand the purpose of modules the way they work here. Maybe someone can explain?

To answer mrgoos: NgModule has the attribute schmeas: https://angular.io/docs/ts/latest/api/core/index/NgModuleMetadataType-interface.html