Question

我已经使用Angular和Material一年多了，我从未遇到过这个问题，但是我们来了。

我的目标：成功遵循官方的角度指南https://material.angular.io/guide/getting-started之后，我想添加另一个模块，并在新创建的模块中使用材料部件。

我的步骤（遵循正式的棱角材料入门指南，没有问题）

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 build失败并显示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。

还请记住，我链接的官方指南可以成功工作和构建，当我制作一个新模块并尝试在其中添加材料组件时，就会出现问题。

编辑：

添加了应用模块代码

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命令的文档中，它：

在给定的或默认项目中创建一个新的通用NgModule定义。

因此，默认情况下，除非使用--module标志指定模块，否则Angular CLI不会自动在应用程序的根模块（或任何其他模块）中包括必要的导入：

--module=module

声明NgModule。

别名：-m

或者，如果您使用的是Angular Router's lazy-loading feature modules功能，则Angular CLI也不会在应用程序的根路由模块中包含您的模块，除非您使用以下命令指定用于延迟加载的模块的路由路径： --route标志：

--route=route

延迟加载模块的路由路径。提供后，在新模块中创建一个组件，并将路由添加到Routes选项中提供的模块中声明的--module数组中的该组件。

^{（TIL：您可以指定用于延迟加载的模块的路由路径。）}

否则，就目前而言，您应该只选择其中一个：

在应用的根模块中手动声明HomeModule：

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

或用延迟加载的路由替换home组件的现有路由定义：

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

希望这会有所帮助！

Angular Material Official Getting Started构建成功，但添加新模块失败

1 个答案: