Angular Material Official Getting Started build succeeds, but adding a new module fails

问题

I have been using Angular and Material for more than a year, and i never met this problem, but here we are.

My goal: after following the official angular guide https://material.angular.io/guide/getting-started (succesfully) i would like to add another module and use material components in my newly created module.

My steps (after following the official angular material getting started guide, with no problems):

cd myProjectFolder

ng g m home

cd home

ng g c home

my module and component code:

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 {
  }

}

expected result: Running ng build works

Actual result: running ng build fails with 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.

Usually this code is caused by not importing material modules in the module that declares the component. But in this case i did import MatSliderModule.

Also keep in mind that the official guide that i linked works and builds successfully, the problem arises when i make a new module and try to add material components there.

edit:

added app.module code

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 { }

Another edit: here's my app routing code:

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 { }

回答1:

From the documentation for the ng g module command, it:

Creates a new generic NgModule definition in the given or default project.

Hence, by default, the Angular CLI will not automatically include the necessary import in your app's root module (or any other module) unless you specify the module with the --module flag:

--module=module

The declaring NgModule.

Aliases: -m

Alternatively, if you're using the Angular Router's lazy-loading feature modules feature, the Angular CLI also does not include your module in your app's root routing module unless you specify the route path to be used for the lazy-loaded module with the --route flag:

--route=route

The route path for a lazy-loaded module. When supplied, creates a component in the new module, and adds the route to that component in the Routes array declared in the module provided in the --module option.

^{(TIL: You can specify the route path to use for a lazy-loaded module.)}

Otherwise, as for now, you should just either:

Manually declare HomeModule in your app's root module:

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

Or replace your existing route definition for the home component with a lazy-loaded route:

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

Hope this helps!

来源：https://stackoverflow.com/questions/61081507/angular-material-official-getting-started-build-succeeds-but-adding-a-new-modul

标签

angular

angular-material