Add custom selector on angular2 router-outlet

Question

Add custom selector on angular2 router-outlet

Navigation

#1 by (1 votes)

0

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

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

I understand that from angular rc5 and higher, you have to declare the 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 myUnityComponent, 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 were not declared, which only happens when I want to put the components under a rout-outlet, try to put it under myUnit.module, but I get the same error, this is my routing module for whatever it is.

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

typescript angularjs-2.0 router

asked by Kevin AB 19.02.2017 в 14:37

source

1 answer

Use nodemcu to send data from pulse sensor Syntax error when putting a number as mysql table name

score 1 · Accepted Answer

As I understood, what you do is declare all the components and modules that you use in app.module.ts . You are right in that you have to declare all the components but not the place 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 one 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 miUnidad component, which is declared in MiUnidadModule , makes use of NavPanelLat , the offset 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 that you review the official documentation on NgModules