我用angular-cli创建了一个angular2项目(版本1.0.0-beta.8,angular版本是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 等...)
当我在应用程序(主要的)组件中导入我的组件组件并将其放入 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!';
}
应用程序组件.html:
<h1>
{{title}}
</h1>
<app-my-component></app-my-component>
一切正常。
如果我创建一个文件夹(在这种情况下名为“project”)并将我的组件文件夹移动到那里(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
在我看来像是一个错误。
最佳答案
检查新文件夹(项目)中是否有组件 typescript 编译文件(*.js 和 *js.map)
另请参阅组件模板和样式文件的组件相关 URL 代码:
The Angular 2 CLI uses these technologies and defaults to the component-relative path approach described here. CLI users can skip this chapter or read on to understand how it works.
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/中):
我的组件.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>
对我来说这很好用
关于javascript - Angular 2 仅从 root/app 文件夹加载组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38041493/