Angular5 Использовать компонент из модуля

Beel спросил: 28 марта 2018 в 02:40 в: angular

Я noob с A5, делаю свой первый "компонент рефакторинга в модули". Я пытаюсь использовать компонент, который определен в одном модуле из другого модуля. Я получаю ошибку, ERROR in src/app/app-routing.module.ts(9,10): error TS2305: Module '"xxx/src/app/admin/admin.module"' has no exported member 'AdminHomeComponent'.

Я просмотрел другие связанные вопросы, и я просто что-то пропустил. Надеюсь, вы сможете помочь.

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import { ArchitectureComponent } from './architecture/architecture.component';
import { DesignComponent } from './design/design.component';
import { HistoryComponent } from './history/history.component';
import { AdminHomeComponent } from './admin/admin.module';const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'architecture', component: ArchitectureComponent },
  { path: 'design', component: DesignComponent },
  { path: 'history', component: HistoryComponent }
];@NgModule({
  exports: [ RouterModule ],
  imports: [ RouterModule.forRoot(routes)]
})export class AppRoutingModule { }

src / app / admin / admin.module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminHomeComponent } from './admin-home/admin-home.component';@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    AdminHomeComponent
  ],
  declarations: [
    AdminHomeComponent  // <-- Tried adding this based on comments, no help
  ]
})
export class AdminModule { }

src / app / admin / admin-home / admin-home.component.ts

import { Component, OnInit } from '@angular/core';@Component({
  selector: 'app-admin-home',
  templateUrl: './admin-home.component.html',
  styleUrls: ['./admin-home.component.scss']
})
export class AdminHomeComponent implements OnInit {  constructor() { }  ngOnInit() {
  }}

И в случае, если это поможет,

src / app / app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { TreeModule } from 'angular-tree-component';import { AppComponent } from './app.component';
...
import { HomeComponent } from './home/home.component';
import { ComponentsModule } from './components/components.module';
import { AdminModule } from './admin/admin.module';@NgModule({
  declarations: [
    AppComponent,
    ...
    HomeComponent,
    AdminModule   // <-- Tried adding this based on comments, but no help
  ],
  imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot(),
    TreeModule,
    AppRoutingModule,
    AdminModule,
    ComponentsModule
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Возможно, ответ прост: просто импортируйте компонент непосредственно из модуля?

Но shouldn ' t Я могу использовать компонент, который экспортируется из модуля, просто импортируя этот компонент из модуля?

Thx для любых советов!


3 ответа

Есть решение
Fateh Mohamed ответил: 28 марта 2018 в 04:46

если вы импортируете его из файла модуля, вы должны экспортировать его таким образом внутри вашего admin.module.ts

  import { AdminHomeComponent } from './admin-home/admin-home.component';
  export {AdminHomeComponent };
Beel ответил: 28 марта 2018 в 05:14
Спасибо, Фатех! Это добилось цели. Но это меня смущает. Можете ли вы предоставить указатель на документ о export? Я не видел этого ни в каких примерах. БЛАГОДАРЮ ВАС!
Fateh Mohamed ответил: 28 марта 2018 в 05:27
внутри вашего admin.module у вас нет экспортируемого класса с именем AdminHomeComponent, поэтому вы должны экспортировать его таким образом, затем вы можете импортировать его и использовать в качестве компонента, но лучший способ - импортировать общий компонент из это ts файл"admin-home.component.ts"
Fateh Mohamed ответил: 28 марта 2018 в 05:29
но я предлагаю вам создать sharedModule и поместить все совместно используемые компоненты (компоненты, сервисы, каналы, директивы ...) и импортировать его в другой модуль, когда вам это нужно, проверьте этот angular-2-training-book.rangle.io / раздаточный / модули / ...
Beel ответил: 28 марта 2018 в 05:37
Спасибо, Фатех! Я ценю примеры, но опять же, они не включают дочерний компонент модуля, в который модуль экспортирует дочерний компонент. Поэтому они НЕ экспортируют {XxxComponent}; Это была моя проблема, как вы указали ... как использовать компонент из общего модуля? И как этот модуль должен экспортировать Компонент?
Fateh Mohamed ответил: 28 марта 2018 в 05:43
это работает, только если вы импортируете компонент из файла модуля, но наверняка лучше всего импортировать его из его файла :)
Lazar Ljubenović ответил: 28 марта 2018 в 02:41

Вы импортируете из неправильного файла.

import { AdminHomeComponent } from './admin/admin.module';

Замените module на component в имени файла.

Beel ответил: 28 марта 2018 в 02:43
Спасибо, Лазарь, но нет admin.component. Это модуль.
Lazar Ljubenović ответил: 29 марта 2018 в 03:34
Это точно проблема, которая у вас была, но все в порядке.
Beel ответил: 29 марта 2018 в 06:51
Спасибо, Лазарь, но ... Я не понимал (и до сих пор не понимаю), как перевести то, что вы сказали, в решение моего вопроса. @ Фатех ответил, что я должен добавить export {}. Это решило мою проблему. Но я все еще не уверен, что это лучший способ сделать это. Можете ли вы уточнить?
John Velasquez ответил: 28 марта 2018 в 04:44

Ну, вы забыли объявить это в модуле

Попробуйте это

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminHomeComponent } from './admin-home/admin-home.component';@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    AdminHomeComponent
  ],
  declarations: [AdminHomeComponent]
})
export class AdminModule { }

А также я обнаружил, что в app-routing.module .ts: у вас есть import { AdminHomeComponent } from './admin/admin.module'; удалите его.

вместо этого в src / app / admin / admin.module сделайте это так /

Beel ответил: 28 марта 2018 в 03:02
Спасибо, Амая, но это не помогло. Разве этого не достаточно, чтобы объявить его экспортным?
John Velasquez ответил: 28 марта 2018 в 03:13
да, это не потому, что каждый компонент должен быть объявлен.
Beel ответил: 28 марта 2018 в 03:20
Thx, Amaya, ... этот компонент, как описано, должен быть объявлен? Это не имеет значения из того, что я пробовал до сих пор.
John Velasquez ответил: 28 марта 2018 в 03:21
Я обновил свой ответ
Beel ответил: 28 марта 2018 в 03:37
Спасибо Амая, но та же ошибка.