javascript - Angular 2 load components only from rootapp folder - Stack Overflow

admin管理员组

文章数量:1414621

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\appponent.css
  create src\app\appponent.html
  create src\app\appponent.spec.ts
  create src\app\appponent.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 ponent (ng g ponent my-ponent) it adds a folder my-ponent in the src\app folder with the ponent files(ts, css, html, etc...)

When I import my-ponent ponent in the app(the main one) ponent and put it in the html:

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-ponent';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'appponent.html',
  styleUrls: ['appponent.css'],
  directives: [MyComponentComponent]
})
export class AppComponent {
  title = 'app works!';
}

appponent.html:

<h1>
  {{title}}
</h1>
<app-my-ponent></app-my-ponent>

everything works.

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

import { Component } from '@angular/core';
import { MyComponentComponent } from './project/my-ponent'; //chnaged "./my-ponent" to "./project/my-ponent"

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'appponent.html',
  styleUrls: ['appponent.css'],
  directives: [MyComponentComponent]
})
export class AppComponent {
  title = 'app works!';
}

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

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

Is it a bug or I'm missing something?

Edit:

All the ponents are correctly piled irrespective of the folder.

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

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

Looks like a bug to me.

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.ponent.css
  create src\app\app.ponent.html
  create src\app\app.ponent.spec.ts
  create src\app\app.ponent.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 ponent (ng g ponent my-ponent) it adds a folder my-ponent in the src\app folder with the ponent files(ts, css, html, etc...)

When I import my-ponent ponent in the app(the main one) ponent and put it in the html:

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-ponent';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.ponent.html',
  styleUrls: ['app.ponent.css'],
  directives: [MyComponentComponent]
})
export class AppComponent {
  title = 'app works!';
}

app.ponent.html:

<h1>
  {{title}}
</h1>
<app-my-ponent></app-my-ponent>

everything works.

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

import { Component } from '@angular/core';
import { MyComponentComponent } from './project/my-ponent'; //chnaged "./my-ponent" to "./project/my-ponent"

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.ponent.html',
  styleUrls: ['app.ponent.css'],
  directives: [MyComponentComponent]
})
export class AppComponent {
  title = 'app works!';
}

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

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

Is it a bug or I'm missing something?

Edit:

All the ponents are correctly piled irrespective of the folder.

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

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

Looks like a bug to me.

• javascript
• angular

Share Improve this question Follow edited Jun 26, 2016 at 19:10 Evgeni Dimitrov asked Jun 26, 2016 at 17:59 Evgeni DimitrovEvgeni Dimitrov 22.5k3333 gold badges123123 silver badges148148 bronze badges 1

• Seems something issue your my-ponent.ts file. Most probably template file path. – Parwej Commented Jun 26, 2016 at 18:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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

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

The Angular 2 CLI uses these technologies and defaults to the ponent-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/ponent-relative-paths.html

UPDATE1

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

2) run in terminal:

ng generate ponent project/my-ponent2

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

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

3) change your app.ponent.ts and html to view the ponents.

Below is the example-code for 2 ponents (1 in src/app and 1 in src/app/project/) :

my-ponent.ponent.ts

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-my-ponent',
  templateUrl: 'my-ponent.ponent.html',
  styleUrls: ['my-ponent.ponent.css']
})
export class MyComponentComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

my-ponent2.ponent.ts

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-my-ponent2',
  templateUrl: 'my-ponent2.ponent.html',
  styleUrls: ['my-ponent2.ponent.css']
})
export class MyComponent2Component implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

app.ponent.ts

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-ponent/my-ponent.ponent';
import { MyComponent2Component } from './project/my-ponent2/my-ponent2.ponent';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.ponent.html',
  styleUrls: ['app.ponent.css'],
  directives: [
    MyComponentComponent,
    MyComponent2Component
  ]
})
export class AppComponent {
  title = 'app works!';
}

app.ponent.html

<h1>
  {{title}}
</h1>
<app-my-ponent></app-my-ponent>
<app-my-ponent2></app-my-ponent2>

For me this works fine

Probaly your mistake is at the time of pilation (from .ts to .js)

I mean when you create ponent it works fine, but when you switch your ponent to another folder named project (whatever) angular tries to find out file from app/project/my-ponent.js but your existing file location is app/my-ponent.js (see in your dist folder). so just stop the Project and try using Re Running your project by doing so all files will genrate with exact location and your project works

本文标签： javascriptAngular 2 load components only from rootapp folderStack Overflow