Javascript Angular 2仅从root/app文件夹加载组件

我已经用angular cli创建了angular2项目（版本1.0.0-beta.8，angular版本2.0.0-rc.3） 运行

ngnew

或

nginit

创建此目录结构：

  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等）

当我在应用程序（主组件）组件中导入我的组件并将其放入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>

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

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

是虫子还是我遗漏了什么

编辑：

无论文件夹是什么，所有组件都已正确编译

奇怪的是，应用程序希望加载

my component.js

，而生成的文件是

my component.component.js

（这与其他名称的作用相同。名称中的“组件”不是问题）

当组件文件夹位于应用程序文件夹中时，应用程序将正确加载

my component.component.js

---

在我看来，这是一个bug。

您的错误可能发生在编译时（从.ts到.js）

---

我的意思是，当您创建组件时，它可以正常工作，但当您将组件切换到另一个名为

project

（无论什么）的文件夹时，angular尝试从

app/project/my component.js

中查找文件，但您现有的文件位置是

app/my component.js

（请参见您的dist文件夹）。因此，只需停止项目并尝试使用“重新运行您的项目”，这样所有文件都将以精确位置生成，并且您的项目将正常运行

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

另请参见为组件模板和样式文件的组件相对URL编写代码：

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

更新1

1） 在src/app内创建一个新文件夹“project”

2） 运行终端：

ng generate component project/my-component2

（见：）

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

3） 更改app.component.ts和html以查看组件

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

我的组件.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() {
  }

}

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

}

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!';
}

my-component 2.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() {
  }

}

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

}

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!';
}

应用程序组件.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() {
  }

}

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

}

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>

{{title}}
您的my-component.ts文件似乎有问题。最有可能是模板文件路径。我认为与我在回答@Gabi中提到的内容相同？我认为我们在同一时间回答了，但您的回答没有提到相关URL。您可以尝试将导入语句替换为：import{MyComponentComponent}from./project/my component.component'@Gabi我得到一个编译错误“找不到模块”正确的导入应该是：从“./project/my component/my component.component”导入{MyComponent}；（还有功能文件夹，请参阅我的更新；我已设法用两个组件修复了此问题：一个在应用程序中，另一个在名为project的文件夹中：(