Angular 2 load components only from root/app folder

Question

I have created an angular2 project with angular-cli(version 1.0.0-beta.8, angular version is 2.0.0-rc.3) Running ng new or ng init creates this directory structure:

  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

When I generate a component (ng g component my-component) it adds a folder my-component in the src\app folder with the component files(ts, css, html, etc...)

When I import my-component component in the app(the main one) component and put it in the 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>

everything works.

If I create a folder (named "project" in that case) and move my-component folder there (src\app\project\my-component) and import the component from there:

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

The application is compiled, but in the browser I get:

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

Is it a bug or I'm missing something?

Edit:

All the components are correctly compiled irrespective of the folder.

The strange thing is that the application wants to load my-component.js while the generated file is my-component.component.js (this works the same with other names. "component" in the name is not an issue)

When the component folder is in the app folder the application correctly loads my-component.component.js

Looks like a bug to me.

Seems something issue your my-component.ts file. Most probably template file path. — Parwej

Gabi Gabi · Accepted Answer · 2016-06-26T18:53:39

Check if in the new folder (project) you have the component typescript compiled files (*.js and *js.map)

See also you code for the Component-Relative URLs to component templates and style files:

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

UPDATE1

1) create a new folder "project" inside src/app

2) run in terminal:

ng generate component project/my-component2

(see: https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services )

this will generate your component and all dependencies relative to this new folder (project)

3) change your app.component.ts and html to view the components.

Below is the example-code for 2 components (1 in src/app and 1 in 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>

For me this works fine

Angular 2 load components only from root/app folder

2 Answers