Angular 6: совместное использование компонента между функциональными модулями не работает

Я создал 2 функциональных модуля (PagesSharedModule & HomeModule).
Теперь я пытаюсь использовать экспортированный компонент из PagesSharedModule внутри шаблона компонента из HomeModule и получаю эту ошибку:

ERROR Error: Uncaught (in promise): Error: Template parse errors: 'app-main-menu' is not a known element:
1. If 'app-main-menu' is an Angular component, then verify that it is part of this module.
2. If 'app-main-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR
->]<app-main-menu></app-main-menu>"): ng:///HomeModule/HomeComponent.html@0:0 Error: Template parse errors: 'app-main-menu' is not a known element:
1. If 'app-main-menu' is an Angular component, then verify that it is part of this module.
2. If 'app-main-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR
->]<app-main-menu></app-main-menu>"): ng:///HomeModule/HomeComponent.html@0:0
    at syntaxError (compiler.js:215)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14687)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22687)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22674)
    at compiler.js:22617
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22617)
    at compiler.js:22527
    at Object.then (compiler.js:206)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22526)
    at syntaxError (compiler.js:215)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14687)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22687)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22674)
    at compiler.js:22617
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22617)
    at compiler.js:22527
    at Object.then (compiler.js:206)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22526)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3751)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

Если это имеет значение, HomeModule - это маршрутизируемый модуль с отложенной загрузкой.

Мой код:

src / app / pages / pages-shared / pages-shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainMenuComponent } from './main-menu/main-menu.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    MainMenuComponent
  ],
  exports: [
    MainMenuComponent
  ]
})

export class PagesSharedModule { }

src / app / pages / pages-shared / main-menu / main-menu.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-main-menu',
  templateUrl: './main-menu.component.html',
  styleUrls: ['./main-menu.component.scss']
})
export class MainMenuComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

src / app / pages / home / home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { HomeRoutingModule } from './home-routing.module';
import { PagesSharedModule } from 'src/app/pages/pages-shared/pages-shared.module';

@NgModule({
  imports: [
    CommonModule,
    HomeRoutingModule,
    PagesSharedModule
  ],
  declarations: [
    HomeComponent
  ]
})

export class HomeModule { }

src / app / pages / home / home.component.html

<app-main-menu></app-main-menu>

src / app / pages / pages-routing.module.ts

...
{
  path: '',
  component: PagesComponent,
  children: [
    {
      path: '',
      pathMatch: 'full',
      loadChildren: './home/home.module#HomeModule'
    },
    {
      path: 'about',
      pathMatch: 'full',
      loadChildren: './content/content.module#ContentModule'
    },
    { path: '**', component: PageNotFoundComponent }
  ]
},
...

src / app / pages / home / home-routing.module.ts

{
  path: '',
  pathMatch: 'full',
  component: HomeComponent
}


Что я делаю не так?
Спасибо.


person Pini    schedule 22.07.2018    source источник
comment
Я скопировал ваш код в проект stackblitz. Это работает. Проверьте этот URL stackblitz.com/edit/angular-p6enbz   -  person Houssem Romdhani    schedule 22.07.2018
comment
Пожалуйста, включите все сообщение об ошибке, потому что оно говорит о том, что на самом деле не так в вашем коде. И, как уже упоминалось выше, ваш код должен работать, так что я думаю, вы что-то не упомянули   -  person yurzui    schedule 22.07.2018
comment
@Houssem Romdhani, я просмотрел ваш код, и единственное, что кажется отличным от того, что я сделал, это то, что в моем случае функциональные модули лениво загружаются с использованием модуля маршрутизации (не включен выше). У меня до сих пор не работает по неизвестной причине ...   -  person Pini    schedule 22.07.2018
comment
@yurzui, я обновил свой вопрос полным сообщением об ошибке.   -  person Pini    schedule 22.07.2018
comment
@Pini, пожалуйста, предоставьте нам код HomeRoutingModule.   -  person Houssem Romdhani    schedule 22.07.2018
comment
@Houssem Romdhani, я добавил конфигурации маршрутизации.   -  person Pini    schedule 22.07.2018
comment
Импортировать модуль маршрутизации страниц в PagesSharedModule   -  person Houssem Romdhani    schedule 22.07.2018
comment
@Houssem Romdhani, все та же ошибка. Кстати: в настоящее время я импортирую PagesSharedModule в HomeModule, но я также пытался импортировать его на PagesModule и HomeRoutingModule и получил тот же результат.   -  person Pini    schedule 22.07.2018
comment
Пока что единственное, что устраняет ошибку и правильно загружает представление, - это импорт MainMenuComponent непосредственно в HomeModule и добавление в массив объявлений. Но очевидно, что с общими модулями этого быть не должно ...   -  person Pini    schedule 22.07.2018


Ответы (1)


ОБНОВЛЕНИЕ:
Невероятно !!!
Я остановил угловой интерфейс командной строки и снова обслужил, и теперь все работает отлично, без каких-либо изменений в коде.
Оставляю эту заметку здесь на всякий случай кто-то еще сталкивается с той же проблемой ...

person Pini    schedule 22.07.2018