Неожиданный модуль 'PublicModule' объявлен модулем 'AppModule'.Angular4 Компонентная структура

Question

Я пытаюсь создать простую структуру,

app
--_layout
  --public-footer
  ----public-footer.html/ts/css files
  --public-header
  ----public-header.html/ts/css files
  --public-layout
  ----public-layout.html/ts/css files

Внутри public-layout.html:

<public-header></public-header>
<router-outlet></router-outlet>
<public-footer></public-footer>

Внутри public-layout.ts:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-public-layout',
  templateUrl: './public-layout.component.html',
  styleUrls: ['./public-layout.component.css']
})
export class PublicLayoutComponent implements OnInit {
  constructor() { }
  ngOnInit() {}
}

Теперь этот публичный макет будет использоваться для других компонентов, таких как Home, About и т. Д.

О вещах, которые не достигли меня, пробовал разные комбинации, но ни одна из них не работала для меня.

Я ожидаю, что не должен объявлять / импортировать верхний и нижний колонтитулы в app.module.

Можете ли вы, ребята, помочь мне?

Answer 1

Здравствуйте, здесь есть два решения для вашего случая:

Первое - вместо этого использовать стратегию с <router-outlet></router-outlet> в макете, которую вы можете использовать, и в каждом представлении, где вы хотите, чтобы ваша розетка, вы оборачиваете компонент.

<app-app-layout>
  <h1>
  Html of some component that will be inside viewed inside the layout.
  </h1>
</app-app-layout>

С помощью этой стратегии вы можете иметь столько макетов, сколько вам нужно.

Второе решение - использовать для маршрутизации древовидную структуру для каждогомакет например из модуля приложения у вас будет две ветви.Один частный с желаемой розеткой и внутри него вы можете поместить <router-outlet></router-outlet>, сделав так, что у всех его детей будет розетка.Вторая ветвь маршрутизации будет называться общедоступной (например), и эта будет подключаться ко всем компонентам / представлениям, которые не должны иметь затрат.

Я рекомендую первую стратегию, вот демонстрация первого решения на основена вашем стеке стек