0

vuelvo a angular2 luego de tiempo y veo que hay varios cambios,empezando que directive ya no se encuentra en Component entre otros,trato de hacer lo siguiente agregar el tag dentro de un

<list-directory [folders]='folders'></list-directory>

Tengo entendido que a partir de angular rc5 y superior , se tienen que declarar los componentes en app.module , este es mi app.module

  app.module.ts

import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { HomeModule } from './+home/home.module';
import { AboutModule } from './+about/about.module';
import { TodoModule } from './+todo/todo.module';
import {MiUnidadModule } from './miUnidad/miUnidad.module';
import { SharedModule } from './shared/shared.module';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent, XLargeDirective } from './app.component';
import { NavPanelLat} from './navPanelLat/navPanelLat.component';
import { NavPanelSup } from './navPanelSup/navPanelSup.component';
import { ListDirectoryComponent } from './listDirectory/listDirectory.component';

import { MaterialModule } from '@angular/material';




@NgModule({
  declarations: [ AppComponent, XLargeDirective,NavPanelSup,NavPanelLat,ListDirectoryComponent],
  imports: [
    SharedModule,
    HomeModule,
    AboutModule,
    TodoModule,
    AppRoutingModule,
    MaterialModule,
    MiUnidadModule,
  ],
})
export class AppModule {
}

export { AppComponent } from './app.component';

Siendo NavPanelLat,NavPanelSup y ListDirectoryComponent, componentes que quiero agregar, cuando lo agrego a mi app.component.html , no tengo problemas.

app.component.html

<div class="row">
 <div class="col-xs-12">
      <nav-panel-sup></nav-panel-sup>

 </div>
 <div class="col-xs-3">
     <nav-panel-lat></nav-panel-lat>

 </div>
  <div class="col-xs-7">
      <router-outlet></router-outlet>  

  </div>
  <div class="col-xs-2">
    Ota cosa
  </div>
</div>

Pero cuando quiero agregar a miUnidadComponent, el cual esta bajo router-outlet ,me sale el problema de

miUnidad.component.html

  <nav-panel-lat></nav-panel-lat>


Unhandled Promise rejection: Template parse errors:
'nav-panel-lat' is not a known element:
1. If 'nav-panel-lat' is an Angular component, then verify that it is part of th
is module.
2. If 'nav-panel-lat' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to th
e '@NgModule.schemas' of this component to suppress this message. ("  [ERROR ->]
<nav-panel-lat></nav-panel-lat>"): MiUnidadComponent@0:2 ; Zone: <root> ; Task:
Promise.then ; Value: Error: Template parse errors:
'nav-panel-lat' is not a known element:
1. If 'nav-panel-lat' is an Angular component, then verify that it is part of th
is module.
2. If 'nav-panel-lat' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to th
e '@NgModule.schemas' of this component to suppress this message. ("  [ERROR ->]

Como si no estuviera declarado , el cual solo pasa cuando quiero meter los componentes bajo un rout-outlet,intente ponerlo bajo miUnidad.module, pero me sale el mismo error ,este es mi routing module por seacaso.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

export function getLazyModule() {
  return System.import('./+lazy/lazy.module' + (process.env.AOT ? '.ngfactory' : ''))
    .then(mod => mod[(process.env.AOT ? 'LazyModuleNgFactory' : 'LazyModule')]);
}

@NgModule({
  imports: [
    RouterModule.forChild([
      { path: '', redirectTo: '/miUnidad', pathMatch: 'full' },
      { path: 'lazy', loadChildren: getLazyModule }
    ])
  ],
})
export class AppRoutingModule { }
1

1 respuesta 1

1

Según he entendido, lo que haces es declarar todos los componentes y módulos que utilizas en app.module.ts. Tienes razón en lo de que tienes que declarar todos los componentes pero no el lugar en el que los declaras. Me explico.

tal y como tienes modularizada la app, tienes los siguientes módulos: SharedModule, HomeModule, AboutModule, TodoModule, AppRoutingModule, MaterialModule y MiUnidadModule. Cada uno de estos módulos debe declarar por si solo los componentes que utiliza y exportar únicamente los que se vayan a utilizar en los módulos que lo importen.

Es decir, como el componente miUnidad, que está declarado en MiUnidadModule, hace uso de NavPanelLat, la decalaración de este componente debe ir en MiUnidadModule.

mi-unidad.module.ts:

 import { NavPanelLat } from './navPanelLat/navPanelLat.component';

 @NgModule({
   declarations: [ NavPanelLat ],
   exports: [ NavPanelLat ]        // Solo si NavPanelLat se utiliza fuera de este modulo
  })
 export class MiUnidadModule {}

Te recomiendo que revises la documentación oficial sobre NgModules

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.