Angular 6共享模块失效求助：路由至Login页面组件报错

首先，这个错误'app-primery-header' is not a known element的核心原因是Login模块无法正确访问到头部组件，哪怕你引入了共享模块，也大概率是共享模块的配置或导入环节出了问题，咱们一步步来排查：

1. 确保共享模块正确导出头部组件 #

你的PrimeryHeaderModule必须同时完成组件的声明和导出，这样其他模块引入它之后才能使用组件。检查你的共享模块代码，应该是这样的：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PrimeryHeaderComponent } from './primery-header.component'; // 替换成你的组件实际路径

@NgModule({
  declarations: [
    PrimeryHeaderComponent // 必须在这里声明组件
  ],
  imports: [
    CommonModule
  ],
  exports: [
    PrimeryHeaderComponent // 关键！必须导出组件，外部模块才能调用
  ]
})
export class PrimeryHeaderModule { }

如果共享模块没有exports这个部分，哪怕你在Login模块里引入了共享模块，组件也不会被暴露给Login模块使用。

2. 检查Login模块的共享模块导入路径 #

你在Login模块里写的是import { PrimeryHeaderModule } from '../share';，这个路径是否正确？

• 如果你的PrimeryHeaderModule在share文件夹下的子目录（比如share/primery-header），那你需要写完整路径，比如../share/primery-header/primery-header.module
• 如果share文件夹下有index.ts文件，并且里面导出了PrimeryHeaderModule，那这个路径没问题；如果没有index.ts，必须直接导入模块文件。

举个例子，如果你的目录结构是：

src/
├── app/
│   ├── login/
│   ├── share/
│   │   ├── primery-header/
│   │   │   ├── primery-header.component.ts
│   │   │   └── primery-header.module.ts

那Login模块里的导入应该是：

import { PrimeryHeaderModule } from '../share/primery-header/primery-header.module';

3. 确认组件选择器的拼写一致性 #

错误里的组件是app-primery-header，请检查你的PrimeryHeaderComponent的selector属性是不是完全一致：

@Component({
  selector: 'app-primery-header', // 必须和模板里的标签名完全匹配
  templateUrl: './primery-header.component.html'
})
export class PrimeryHeaderComponent { }

注意这里的primery是不是拼写错误（通常是primary），如果模板里写的是app-primary-header但组件selector是app-primery-header，也会触发这个错误，要保持拼写完全一致。

最后验证 #

做完上面的检查后，重启Angular开发服务器（有时候缓存会导致修改不生效），然后访问Login页面，应该就能正常渲染头部组件了。

内容的提问来源于stack exchange，提问作者Md. Abu Sayed