Angular Материал Официальное начало работы Сборка завершена успешно, но добавление нового модуля завершается неудачно

Question

Я использую Angular и Материал более года, и я никогда не сталкивался с этой проблемой, но вот мы здесь.

Моя цель: после официального руководства angular https://material.angular.io/guide/getting-started (успешно) Я хотел бы добавить еще один модуль и использовать компоненты материала в моем только что созданном модуле.

Мои шаги (после официального руководства по началу работы с материалом angular, без проблем) ):

cd myProjectFolder

ng g m home

cd home

ng g c home

мой модуль и код компонента:

HomeModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import { MatSliderModule } from '@angular/material/slider';

@NgModule({
  declarations: [HomeComponent],
  imports: [
    MatSliderModule,
    CommonModule
  ]
})
export class HomeModule { }

home.component. html:

<mat-slider min="1" max="100" step="1" value="1"></mat-slider>

home.component.ts:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

ожидаемый результат: запуск сборок ng работает

Фактический результат: запуск сборки ng завершается с ошибкой erorr:

ERROR in src/app/home/home/home.component.html:1:1 - error NG8001: 'mat-slider' is not a known element:
1. If 'mat-slider' is an Angular component, then verify that it is part of this module.
2. If 'mat-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <mat-slider min="1" max="100" step="1" value="1"></mat-slider>
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

Обычно это Код вызван тем, что не импортируются материальные модули в модуль, который объявляет компонент. Но в этом случае я импортировал MatSliderModule.

Также имейте в виду, что официальное руководство, которое я связал, работает и строится успешно, проблема возникает, когда я создаю новый модуль и пытаюсь добавить туда компоненты материала.

edit:

добавлен код app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatSliderModule } from '@angular/material/slider';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,

    MatSliderModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Другое редактирование: вот код маршрутизации моего приложения:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home/home.component';


const routes: Routes = [{ path: '**', component: HomeComponent }];

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

Answer 1

Из документации для команды ng g module это:

Создает новое определение generi c NgModule в заданном проекте или проекте по умолчанию.

Следовательно, по умолчанию CLI Angular не будет автоматически включать необходимый импорт в модуль root вашего приложения (или любой другой модуль), если вы не укажете модуль с флагом --module:

--module=module

Декларирующий NgModule.

Псевдонимы: -m

В качестве альтернативы, если вы используете Angular Функциональные модули для отложенной загрузки маршрутизатора Функция CLI Angular также не включает ваш модуль в модуль маршрутизации root вашего приложения, если вы не укажете путь маршрута, который будет использоваться для загружаемого с отложенной нагрузкой модуля с помощью --route флаг:

--route=route

Путь маршрута для модуля с отложенной загрузкой. При наличии создает компонент в новом модуле и добавляет маршрут к этому компоненту в массиве Routes, объявленном в модуле, указанном в опции --module.

^{(TIL : Вы можете указать путь к маршруту для лениво загруженного модуля.)}

В противном случае, как и сейчас, вы должны просто:

• Вручную объявите HomeModule в модуле root вашего приложения:

  @NgModule({
    // ...
    imports: [
      // ...
      HomeModule
    ]
  })
  export class AppModule {}
  

• Или замените существующее определение маршрута для домашнего компонента на лениво загруженный маршрут:

  const routes: Routes = [
    {
      path: '**',
      loadChildren: () => import('./home/home/home.module').then(m => m.HomeModule)
  

Надеюсь, это поможет!