Olá professor. Primeiramente quero agradecer pelo curso.
Estou desenvolvendo um projeto em angular 2 na empresa que trabalho.
Esta aula me deu uma idéia de agrupar elementos html muito usados no projeto dentro de componentes.
Porém surge um problema, se eu criar muitos componentes, o meu código dentro do app.module vai ficar gigante de tantas importações.
Eu sei que tem um jeito de eu criar um módulo para agrupar vários componentes dentro dele.
Fiz da seguinte forma. Criei um componente chamado bootstrap.component dentro de uma pasta bootstrap. Dentro da pasta bootstrap criei um outro componente chamado btn-add.
Nesta mesma pasta criei um arquivo bootstrap.module.ts
Dentro deste arquivo importei o componente principal e o componente do botão.
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { BtnAddComponent } from './btn-add/btn-add.component'; import { BootstrapComponent } from './bootstrap.component'
@NgModule({ imports: [ CommonModule ], declarations: [ BtnAddComponent, BootstrapComponent ] }) export class BootstrapModule { }
no arquivo app.module fiz a importação do bootstrap.module e coloquei o módulo dentro dos imports.
Agora estou tentendo utilizar o compomente BtnAddComponent dentro de um outro componente pela tag . por meio desta tag passo alguns parametros que são link e classe.
no arquivo btn-add-component.html tenho o código: <a class="btn-add {{classe}} [routerLink]="link">
Quando tento usar esse component importantdo diretamente no app.module ele funciona direitinho.
Porém quando tento importar pelo arquivo bootstrap.module eu tenho um erro no console
Unhandled Promise rejection: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. ("][routerLink]="link">
Im