Home / Questions / 50362
Accepted
Kevin AB
Asked: 2020-02-20 05:37:19 +0800 CST 2020-02-20 05:37:19 +0800 CST

Add custom selector in router-outlet of angular2

  • 772

I return to angular2 after some time and I see that there are several changes, starting that directive is no longer in Component among others, I try to do the following: add the tag inside a

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

My understanding is that starting from angular rc5 and above, you have to declare your components in app.module , this is my 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';

Being NavPanelLat, NavPanelSup and ListDirectoryComponent, components that I want to add, when I add it to my app.component.html , I have no problems.

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>

But when I want to add myUnitComponent, which is under router-outlet , I get the problem of

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 ->]

As if it was not declared, which only happens when I want to put the components under a routing-outlet, I tried to put it under myUnit.module, but I get the same error, this is my routing module just in case.

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 { }
angularjs-2.0

1 Answers

  1. Best Answer

    From what I understand, what you do is declare all the components and modules that you use in app.module.ts. You are correct that you have to declare all the components but not where you declare them. I explain.

    As you have modularized the app, you have the following modules: SharedModule, HomeModule, AboutModule, TodoModule, AppRoutingModule, MaterialModule and MiUnidadModule. Each of these modules must declare by itself the components that it uses and export only those that are going to be used in the modules that import it.

    That is, since the component miUnidad, which is declared in MiUnidadModule, makes use of NavPanelLat, the declaration of this component must go in MiUnidadModule.

    my-unit.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 {}

    I recommend you to check the official documentation about NgModules

    • 1