Angular 2 仅从根/应用文件夹加载组件

Question

我用 angular-cli 创建了一个 angular2 项目（版本 1.0.0-beta.8，角度版本是 2.0.0-rc.3） 运行 ng new 或 ng init 会创建此目录结构：

  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
  create src\app\app.component.spec.ts
  create src\app\app.component.ts
  create src\app\environment.ts
  create src\app\index.ts
  create src\app\shared\index.ts
  create src\favicon.ico
  create src\index.html
  create src\main.ts
  create src\system-config.ts
  create src\tsconfig.json
  create src\typings.d.ts
  create angular-cli-build.js
  create angular-cli.json
  create config\environment.dev.ts
  create config\environment.js
  create config\environment.prod.ts
  create config\karma-test-shim.js
  create config\karma.conf.js
  create config\protractor.conf.js
  create e2e\app.e2e-spec.ts
  create e2e\app.po.ts
  create e2e\tsconfig.json
  create e2e\typings.d.ts
  create .gitignore
  create package.json
  create public\.npmignore
  create tslint.json
  create typings.json

当我生成一个组件（ng g component my-component）时，它会在 src\app 文件夹中添加一个文件夹 my-component，其中包含组件文件（ts、css、html 等...）

当我在app（主要）组件中导入my-component组件并将其放入html中时：

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [MyComponentComponent]
})
export class AppComponent {
  title = 'app works!';
}

app.component.html：

<h1>
  {{title}}
</h1>
<app-my-component></app-my-component>

一切正常。

如果我创建一个文件夹（在这种情况下名为“项目”）并将 my-component 文件夹移动到那里（src\app\project\my-component）并从那里导入组件：

import { Component } from '@angular/core';
import { MyComponentComponent } from './project/my-component'; //chnaged "./my-component" to "./project/my-component"

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [MyComponentComponent]
})
export class AppComponent {
  title = 'app works!';
}

应用程序已编译，但在浏览器中我得到：

zone.js:101 GET http://localhost:4200/app/project/my-component.js 404 (Not Found)

是错误还是我遗漏了什么？

编辑：

无论文件夹如何，所有组件都已正确编译。

奇怪的是应用程序要加载my-component.js，而生成的文件是my-component.component.js（这与其他名称相同。名称中的“组件”不是问题）

当组件文件夹位于 app 文件夹中时，应用程序会正确加载 my-component.component.js

在我看来是个错误。

Answer 1

可能你的错误是在编译时（从 .ts 到 .js）

我的意思是当您创建组件时它工作正常，但是当您将组件切换到另一个名为 project 的文件夹时（无论如何），angular 会尝试从 app/project/my-component.js 中查找文件，但您现有的文件位置是 app/my-component.js（请参阅在您的 dist 文件夹中）。所以只需停止项目并尝试使用重新运行您的项目，这样所有文件都将生成准确的位置并且您的项目可以正常工作

Answer 2

检查新文件夹（项目）中是否有组件 typescript 编译文件（*.js 和 *js.map）

另请参阅组件模板和样式文件的组件相对 URL 的代码：

Angular 2 CLI 使用这些技术并默认使用 组件相对路径方法 描述here。 CLI 用户可以跳过本章或继续阅读 了解它是如何工作的。

https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html

更新1

1) 在 src/app 中新建一个文件夹“project”

2) 在终端中运行：

ng generate component project/my-component2

（见：https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services）

这将生成您的组件以及与此新文件夹（项目）相关的所有依赖项

3) 更改您的 app.component.ts 和 html 以查看组件。

以下是 2 个组件的示例代码（1 个在 src/app 中，1 个在 src/app/project/ 中）：

my-component.component.ts

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

@Component({
  moduleId: module.id,
  selector: 'app-my-component',
  templateUrl: 'my-component.component.html',
  styleUrls: ['my-component.component.css']
})
export class MyComponentComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

my-component2.component.ts

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

@Component({
  moduleId: module.id,
  selector: 'app-my-component2',
  templateUrl: 'my-component2.component.html',
  styleUrls: ['my-component2.component.css']
})
export class MyComponent2Component implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

app.component.ts

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component/my-component.component';
import { MyComponent2Component } from './project/my-component2/my-component2.component';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [
    MyComponentComponent,
    MyComponent2Component
  ]
})
export class AppComponent {
  title = 'app works!';
}

app.component.html

<h1>
  {{title}}
</h1>
<app-my-component></app-my-component>
<app-my-component2></app-my-component2>

对我来说这很好用