Angular Material Official Getting Started构建成功，但添加新模块失败 [英] Angular Material Official Getting Started build succeeds, but adding a new module fails

问题描述

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

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

我的目标:遵循官方的角度指南 https://material.angular.io/指南/入门(成功)，我想添加另一个模块，并在新创建的模块中使用材料组件.

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

我的模块和组件代码:

HomeModule:

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:

home.component.html:

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

home.component.ts:

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构建工作

expected result: Running ng build works

实际结果:运行ng build失败并显示erorr:

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.

通常，此代码是由于未在声明组件的模块中导入材料模块而引起的. 但是在这种情况下，我确实导入了MatSliderModule.

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.

添加了应用模块代码

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

推荐答案

从 命令，它:

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

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

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

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

声明NgModule.

The declaring NgModule.

别名:-m

或者，如果您使用的是 Angular Router的延迟加载功能模块功能，除非您使用--route标志指定要用于延迟加载的模块的路由路径，否则Angular CLI也不将模块包含在应用程序的根路由模块中:

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

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

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:您可以指定用于延迟加载的模块的路由路径.)}

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

Otherwise, as for now, you should just either:

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

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

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

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)

希望这会有所帮助！

这篇关于Angular Material Official Getting Started构建成功，但添加新模块失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！