splitting components in folders

[teone]

I was trying to split this component tutorial in folder as the app folder is starting to be a bit crowded, my aim to arrive to situation like:

app/
├── README.md
├── app.component.css
├── app.component.ts
├── dashboard
│   ├── dashboard.component.css
│   ├── dashboard.component.html
│   └── dashboard.component.ts
├── hero-detail
│   ├── hero-detail.component.css
│   ├── hero-detail.component.html
│   └── hero-detail.component.ts
├── dashboard
│   ├── heroes.component.css
│   ├── heroes.component.html
│   └── heroes.component.ts
├── interfaces
│   └── hero.ts
├── main.ts
├── mock-heroes.ts
└── services
    └── hero.service.ts

That looks much like a real application structure but I'm having issues with SystemJs and the import path translation.

As I move a component inside a folder I start getting errors like:

Failed to load http://localhost:3000/node_modules/angular2/core.d

It looks like the .ts is removed somewhere. Any hint on how to fix this error?

If needed my current attempt is tracked here: https://github.com/teone/angular2-sample/tree/develop

Thanks

[kat-liger]

Similar ssue here. For instance, as soon as I move dashboard.component.css, dashboard.component.html and dashboard.component.ts files to a separate "dashboard" folder, I start getting the following errors in the console:

GET http://localhost:3000/app/dashboard/dashboard.component.ts.js 404 (Not Found) system.src.js:2476 GET 
Error: Unable to load script http://localhost:3000/app/dashboard/dashboard.component.ts.js(…)  @ angular2-polyfills.js:138

I also noticed that the imports in the beginning of the dashboard.component.ts file changed automatically after the move to:

import { Component, OnInit } from '../../node_modules/angular2/core.d';
import { Router } from '../../node_modules/angular2/router.d';

It didn't cause any issues for me, but I wonder whether it should stay the same:

import { Component, OnInit } from 'angular2/core';
import { Router } from 'angular2/router';

[johnpapa]

hmmm ... may be the editor doing it. What are you using?

The import statements for angular should not change as they are not relative to your location.

[kat-liger]

WebStorm did it, and judging by the errors, it's what happened to @teone as well. But I changed it all back and still get the errors, not sure how simply moving files into a different folder could break System.js settings. Is there a safe way of doing it? Sorry, I'm just starting with Angular, so will be grateful for any advice.

[johnpapa]

When you move file the ones you move have to change how they import your other custom files. So when your file is in the root and you had import {HeroService} from './services/hero.service, then move your file to a folder like dashboard it would need to be import {HeroService} from '../services/hero.service

custom files are relative.

[kat-liger]

Sure, I made these changes, and also double-checked that the app.component.ts now looks for dashboard component in the corresponding folder:

import { DashboardComponent } from './dashboard/dashboard.component';

But I am still getting errors:

Uncaught (in promise) TypeError: object is not a constructor(…)
http://localhost:3000/app/hero.service.ts.js Failed to load resource: the server responded with a status of 404 (Not Found)
angular2-polyfills.js:138 Error: Unable to load script http://localhost:3000/app/hero.service.ts.js(…)

[teone]

@kat-liger yes these are the same exact issues I've experienced. Still looking for a solution but didn't find time this week.

Thanks to your comment I found that some:

import {Injectable} from 'angular2/core';

where changed to:

import {Injectable} from '../../node_modules/angular2/core.d';

Fixing them make the application working again (it's in the repo) but I still have the error:

Uncaught (in promise) TypeError: object is not a constructor(…)

in the console.

I'll try to move all the components in separate folder and I'll be back with some news

[kat-liger]

@teone, I have also figured out the correct way to move a component into a separate folder:

1) Move the files for the component into a separate folder. If you are using WebStorm, like me, uncheck "Search for references" option. It will ensure that the import statements for angular do not change. 2) Go to .ts file that you just moved and modify all import paths, for instance import { Hero } from './interfaces/hero'; becomes import { Hero } from './../interfaces/hero'; etc. 3) Modify paths for styleUrls and templateUrl 4) In all components that import the moved component, change the import path as well. WebStorm did it incorrectly for me, keeping .ts extension, so it should be done manually.

After that it works without any issues (well, apart from an error "Uncaught (in promise) TypeError: object is not a constructor" which I started getting only today and which doesn't prevent the project from working properly).

Here is my fork for your reference: https://github.com/kat-liger/angular2-tour-of-heroes

[kat-liger]

@teone, Update "es6-shim": "^0.35.0" will fix this last remaining error, as per #https://github.com/blacksonic/angular2-es6-starter/issues/1

[teone]

I guess this is resolved, so I'll close this

[anubhav100]

can anybody let me know how to import a component from a different package i use import { appcomponent } from './components';but it gives me error

[teone]

@anubhav100 what is your folder structure? where are you trying to import your component? If I have to guess, you'll probably need to: import { appcomponent } from './components/appcomponent';

or more generally import { componentName } from './components/componentFile';

where componentName is what you export and componentFile is the file in which you export the component

[mahalo1984]

I had 404 resource issues when dividing the application into sub-folders (using Angular 2.0.0) on the Tour of Heroes Tutorial also, particularly for styles.css and systemjs.config.js. On reload, the route would become things like dashboard/dashboard or dashboard/heroes or heroes/dashboard. My issue was occurring while trying to refresh the browser or enter a url in directly. I was able to resolve it by going into the file index.html and changing the line:

<script>document.write('<base href="' + document.location + '" />');</script>

to this line instead:

<script>document.write('<base href="/" />');</script>

Hope this helps some of you!

[lowdev]

l will add something to your comment : ""

should be at the begenning of tag:

......

Thank you @mahalo1984