Question

我有一个非常简单的问题。

我使用cli创建了一个新的角度项目。然后我创建了一个名为home-page的模块和组件。在主页中，我创建了一个名为banner的组件。

我的主应用程序可以很好地导入组件。但主页似乎无法导入。

这是我的项目结构：

├── app.component.html
├── app.component.sass
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
├── home-page
│   ├── banner
│   │   ├── banner.component.html
│   │   ├── banner.component.sass
│   │   ├── banner.component.spec.ts
│   │   └── banner.component.ts
│   ├── home-page.component.html
│   ├── home-page.component.sass
│   ├── home-page.component.spec.ts
│   ├── home-page.component.ts
│   └── home-page.module.ts
└── simple-grid.scss

这里是home-page.component.ts：

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

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

  constructor() { }

  ngOnInit() {
  }

}

这是主页-module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BannerComponent } from './banner/banner.component';
import { HomePageComponent } from './home-page.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    BannerComponent,
    HomePageComponent
  ]
})
export class HomePageModule { }

家庭page.component.html：

<div>
  <banner></banner>

</div>

banner.component.ts：

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

@Component({
  selector: 'banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.sass']
})
export class BannerComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

banner.component.html：

<div id="app" class="container">
  <div class="row">
    <div class="col-4 center"><p>1</p></div>
    <div class="col-4 center"><p>2</p></div>
    <div class="col-4 center"><p>3</p></div>
  </div>
</div>

我知道之前已经问过这类问题，但他们看起来好像在询问陌生人的进口情况。我认为我应该更基本，所以我想知道我错过了哪一步，或者我有错字或其他什么。

由于

Answer 1

您在export

中缺少HomePageModule声明

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BannerComponent } from './banner/banner.component';
import { HomePageComponent } from './home-page.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    BannerComponent,
    HomePageComponent
  ],
/////////////// added  below    ////////////////////////////////////
exports: [
    BannerComponent,
    HomePageComponent
  ]
})
export class HomePageModule { }

Answer 2

我找到了解决方案！

基本上，

我将home-page.component导入app.module，无法加载banner.component，因为home-page.component没有导出它。

将home-page.module导入app.module允许我导出其子组件并且没有问题。

为了清晰起见，重新发布文件结构：

├── app.component.html
├── app.component.sass
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
├── home-page
│   ├── banner
│   │   ├── banner.component.html
│   │   ├── banner.component.sass
│   │   ├── banner.component.spec.ts
│   │   └── banner.component.ts
│   ├── home-page.component.html
│   ├── home-page.component.sass
│   ├── home-page.component.spec.ts
│   ├── home-page.component.ts
│   └── home-page.module.ts
└── simple-grid.scss

TLDR;我缺乏这个框架的经验，我希望这有助于某人。

Answer 3

有时候，问题是如此琐碎，以至于我们不在乎对此进行研究。

检查文件夹名称是否正确。 module.ts中提供的用于导入该组件的路径是否正确。

例如import { SomeComponent } from './Some-Folder/'; 但是，SomeComponent出现在“ some-folder”而不是“ Some-Folder”中，因此它可能会出现此问题。字符大小写必须相同。

在Windows中，它可能会成功编译，但是在Linux环境中，它肯定会失败。

为那些花了数小时解决此问题并在看到标题中提到的问题后来到这里的人们提供了答案。

希望这对某人有帮助。

P.S。只要确保仅使用cli命令创建组件即可。这将节省其他人的宝贵时间。

Angular 4无法找到模块内部创建的组件

3 个答案: