не работает в Angular 9

Question

Я столкнулся с некоторыми проблемами с angular 9, не работает. Мой файл таков:

rout.ts

import { LayoutComponent } from './../layout/layout.component';
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', component: LayoutComponent, children: [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then((m) => m.DashboardModule)},
    { path: 'table', loadChildren: () => import('./table/table.module').then((m) => m.TableModule)},
    { path: 'form', loadChildren: () => import('./form/form.module').then((m) => m.FormModule)}
  ]}
];

app-rout.moudule.ts

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { routes } from './routes';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutesModule {}

app. module.ts

import { LayoutModule } from './layout/layout.module';
import { AppRoutesModule } from './routes/app-routes.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    LayoutModule,
    AppRoutesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

layout.component. html

<p>layout works! works</p>
<router-outlet></router-outlet>

layout.module.ts

import { LayoutComponent } from './layout.component';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [LayoutComponent],
  exports: [LayoutComponent]
})
export class LayoutModule {}

Когда я запускаю ng serve, он всегда указывает:

Цитата

ОШИБКА в src / app / layout / layout.component. html: 2: 1 - ошибка NG8001: «router-outlet» is Неизвестный элемент: 1. Если «router-outlet» является компонентом Angular, убедитесь, что он является частью этого модуля. 2. Если «router-outlet» является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» к «@ NgModule.schemas» этого компонента, чтобы подавить это сообщение.

2 <router-outlet></router-outlet>
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/layout/layout.component.ts:5:16
    5   templateUrl: './layout.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component LayoutComponent.

Blockquote

Кто-нибудь может помочь мне разобраться?

Кроме того, в файле layout.component. html не отображается дочернее содержимое, такое как компонент формы, компонент таблицы или компонент панели мониторинга. .

есть предложения?

Answer 1

Давайте go об этом.

У вас есть следующие модули:

• AppModule
• LayoutModule
• AppsRouteModule (который просто модуль маршрутизации)

В Angular, когда вы создаете модуль, этот модуль имеет доступ только к тем компонентам, директивам и т. д. c, которые вы объявили внутри него.

AppModule

Этот AppModule имеет доступ к любому Компоненту или Директиве, которые вы указали в нем, или к любому другому элементу, который вы экспортируете из одного из Модулей. внутри (как LayoutModule)

import { LayoutModule } from './layout/layout.module';
import { AppRoutesModule } from './routes/app-routes.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    LayoutModule,
    AppRoutesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

LayoutModule

Тогда у нас есть LayoutModule, в котором только LayoutComponent объявлен внутри.

import { LayoutComponent } from './layout.component';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [LayoutComponent],
  exports: [LayoutComponent]
})
export class LayoutModule {}

С этой настройкой все, что вы экспортируете из LayoutModule, будет доступно для использования в AppModule, но LayoutModule не будет иметь доступа к тому, что объявлено в AppModule, это дочерний элемент AppModule, если вы узнаете.

Поскольку модуль маршрутизации объявлен только в AppModule, LayoutModule об этом не знает, Angular просто не обрабатывает такие модули, если вы хотите использовать маршрутизацию в LayoutModule , импортируйте его в этот модуль, если вы хотите использовать модуль маршрутизации в обоих (что я не думаю, что это хорошо), вы должны создать SharedModule, импортировать и экспортировать маршрутизатор там модуль ng, а затем импортируйте SharedModule в модули App и Layout.

Answer 2

Вы должны импортировать RouterModule

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [RouterModule.forChild()]
})
export class LayoutModule {}

лучший подход

layout.component. html

<p>layout works! works</p>
<ng-content></ng-content>

app.component. html

<app-layout>
  <router-outlet></router-outlet>
</app-layout>