Angulaire 2 composantes de la charge seulement à partir de la racine/dossier app
J'ai créé un angular2 projet avec angulaires-cli(version 1.0.0-bêta.8, angulaire version 2.0.0-rc.3)
L'exécution de ng new
ou ng init
crée cette structure de répertoire:
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
Quand je créer un composant (ng g composant de mon composant a) il ajoute un dossier mon-element de la src\app dossier avec les fichiers de composant(ts, css, html, etc...)
Lorsque j'importe mon-composant composant dans l'application(le principal) de composants et de le mettre dans le code 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>
tout fonctionne.
Si je crée un dossier (nommé "projet" dans ce cas) et de déplacer mon-composante dossier, il y (src\app\project\my-component
) et importer le composant à partir de là:
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!';
}
L'application est compilée, mais dans le navigateur j'obtiens:
zone.js:101 GET http://localhost:4200/app/project/my-component.js 404 (Not Found)
Est-ce un bug ou je suis absent quelque chose?
Edit:
Tous les composants sont correctement compilés indépendamment du dossier.
La chose étrange est que l'application veut charger my-component.js
alors que le fichier généré est my-component.component.js
(cela fonctionne aussi avec d'autres noms. "composant" dans le nom n'est pas un problème)
Lorsque le composant le dossier est dans le dossier app l'application correcte des charges my-component.component.js
Ressemble à un bug pour moi.
- Semble quelque chose de l'émission de votre ma-composant.fichier ts. Probablement le modèle le chemin du fichier.
Vous devez vous connecter pour publier un commentaire.
Vérifier si dans le nouveau dossier (projet) vous avez le composant tapuscrit compilé les fichiers (*.js et *js.carte)
Voir également vous code pour le Composant d'Url Relatives aux modèles de composants et les fichiers de style:
https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html
UPDATE1
1) créer un nouveau dossier "projet" à l'intérieur de la src/app
2) lancer dans un terminal:
(voir: https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services )
cela va générer votre composant et toutes les dépendances par rapport à ce nouveau dossier (projet)
3) changement de votre application.composante.ts et html pour afficher les composants.
Ci-dessous l'exemple de code pour les 2 composants (1 dans src/app et 1 dans src/app/projet/) :
mon composant.composante.ts
mon-component2.composante.ts
app.composante.ts
app.component.html
Pour moi cela fonctionne bien
Probaly votre erreur est au moment de la compilation (à partir .ts .js)
Je veux dire quand vous créer un composant qui fonctionne bien, mais quand vous passez votre composant à un autre dossier nommé
project
(quoi que) angulaire essaie de trouver le fichier à partir deapp/project/my-component.js
mais votre emplacement du fichier estapp/my-component.js
(voir dans votre dossier dist). donc, juste arrêter le Projet et essayez d'utiliser utilisez votre projet en le faisant tous les fichiers genrate avec emplacement exact et votre projet travaux