lundi 27 juin 2016

Angular 2 load components only from root/app folder

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 srcappapp.component.css
  create srcappapp.component.html
  create srcappapp.component.spec.ts
  create srcappapp.component.ts
  create srcappenvironment.ts
  create srcappindex.ts
  create srcappsharedindex.ts
  create srcfavicon.ico
  create srcindex.html
  create srcmain.ts
  create srcsystem-config.ts
  create srctsconfig.json
  create srctypings.d.ts
  create angular-cli-build.js
  create angular-cli.json
  create configenvironment.dev.ts
  create configenvironment.js
  create configenvironment.prod.ts
  create configkarma-test-shim.js
  create configkarma.conf.js
  create configprotractor.conf.js
  create e2eapp.e2e-spec.ts
  create e2eapp.po.ts
  create e2etsconfig.json
  create e2etypings.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 srcapp 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 (srcappprojectmy-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.

Aucun commentaire:

Enregistrer un commentaire