CODEWITHSUNDEEP
angularangular2-components
Raphael Hippe
Raphael Hippe

Reputation: 4915

Angular 2 rc6 Components arent loading

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!

Upvotes: 1

Views: 206

Answers (2)

Raphael Hippe
Raphael Hippe

Reputation: 4915

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

Upvotes: 0

mrgoos
mrgoos

Reputation: 1316

You need bootstrap only for the app.module so let's start with this. In addition, make sure that all your other modules import CommonModule. Also, schemas is not part of NgModule according to the docs.

Make sure that all your modules have their components declared. For example, the util module has no declarations.

If it still doesn't work, please try to share it in plnkr.

Upvotes: 1

Related Questions