Generated Component wrong?

[rburnham52]

1. OS? Windows 10
2. Versions. Please run ng --version. If there's nothing outputted, please
   angular-cli: 1.0.0-beta.6
   node: 4.2.6
   os: win32 x64
3. I ran ng init to create a new project, then after ran ng g component my-component. The resulting files were created

app/my-component/shared/index.ts
app/my-component/index.ts
app/my-component/my-component.component.css
app/my-component/my-component.component.html
app/my-component/my-component.component.spec.ts
app/my-component/my-component.component.ts

1. The log given by the failure. Normally this include a stack trace and some
   more information.

not applicable

1. Mention any other details that might be useful.
   why is there an index.ts and a shared index.ts? This seems to be the same as the initial app structure. I can see app\shared being useful to shared code between components but whats the point of having a shared folder inside a component? in addition to this isn't the my-component.components.ts the entry point to the component, why is app/my-component/index.ts needed?

[RicardoVaranda]

I believe its useful when importing your component in a route or from another component where you can do something like:

import {VmNavComponent} from "../../components/vm-nav";

Rather than have to use the whole path:

import {VmNavComponent} from "../../components/vm-nav/vm-nav.component";

[kujtimiihoxha]

@Nitro52 It is on the style guide see https://angular.io/docs/ts/latest/guide/style-guide.html#!#04-07

[hacknaked]

According to https://angular.io/docs/ts/latest/quickstart.html#!#prereq
Angular 2 requires at least node v5.x.x and npm 3.x.x. So I'd recommend to upgrade your Node to v6.x (the next LTS version) in first place.

[filipesilva]

@kujtimiihoxha is right, the CLI implements it because it is a style guide recommendation. On style and structure issues, the CLI mostly follows the style guide.

[rburnham52]

@filipesilva I'm fine with it being in the style guide, i can seem some larger components would have a use for it. But the defaults in angular-cli at the moment feel very bloated when you just want the bare bones to get you going. I would rather see this as an opt in feature

eg ng g component my-compoenent --shared

or something like that. Not every component is going to be heavy enough to need it. Particularly if you just want quick way to test out some angular code, theirs a lot that distracts at the moment

[bastienJS]

@filipesilva @Nitro52 I had the same problem initially started with ng2 cli. Why the shared folder with index.ts inside a component. For an app with 10 views total overkill or bloated as nitro52 said.

I see this as opt in feature too but not as default.

[filipesilva]

We want to encourage the structure suggested by the style guide, hence defaulting to this structure. You can simplify it via the --flat flag on generation though.

[bastienJS]

@filipesilva Thanks the --flat is the right thing! Keep it simple and stupid! This seems like a backdoor workaround/option beside the "structure suggested by the style guide". So it seems you offer 2 styles to the end user. As an suggestion I would make this philosophy more obvious. So people can more easily decide which way to go or wether they want to use cli at all.

For example when I use --flat parameter the consequence seem to be that the component html/css/ts stuff is not added to the app specific barrels array.

What consequences will that have?

[rburnham52]

@filipesilva @bastienJS thats handy to know. however i would still prefer my components grouped in some way rather than stuffing them in the app folder. I feel like this could be a project level configuration though. I think once you pick a format for a project you will probably stick to it. I think it also relates to another feature request i logged. #1143

It would be nice to be walked through some of these options during project setup so you can be informed of the options and tailor the project to your needs.

Personally though i think everyone has their own structure they like working with and that will vary based on the project you are working on. If i'm new to angular and just learning the ropes i'm going to want a minimal project structure, If i'm setup up a serious production project then yes i'm going to want to stick to the style guide. If its just a small once off project then it might be somewhere in between.

I think the best way to be flexible and cover everyone's needs would be to have the folder structure described through the configuration but provide some defaults that match the style guides. For example in angular-cli you might have a section like this

  "generator": {
    "appPath": "/app",
    "component": {
      "files": "scripts,styles,shared,tests",
      "paths": {
        "scripts": "{appPath}/components/",
        "templates": "{componentPath}/{componentName}/",
        "styles": "{componentPath}/{componentName}/",
        "tests": "/tests/{componentName}/"
      },
      "service" : {
        "files": "scripts,tests",
        "paths": {
          "scripts": "{appPath}/services/",
          "tests": "/tests/{serviceName}/"
        }
      }
    }
  },

It would need some more thought put into the structure but you get the idea. These sections would allow you to override the defaults and provide any structure you require. The idea being you could target each generated part separately and override various settings that relate to that generator.

[rburnham52]

I would just like to add to this as an example of a middle ground project. I'm currently working on a website to for a family member, its a really basic site and will mostly be just static pages. So i set them up as a component to allow routing and any additional behavior. Its not something that will be changed often so i have no need for the tests or the shared folder of each component. Even though i manually removed the test dependencies from package.json the generator still creates a spec file. So each component i create at the moment needs me to delete the spec and the shared folder. I leave the index as this seems to be the entry point into the component and the way to combine the scripts into a single component. but at the moment i have not had the need to create more than one .ts file

[CalvinDale]

My preference is for the CLI to provide a --noshared flag for use when generating simple components which are unlikely to rely on shared files. The --flat flag also omits index.ts in addition to the /shared folder. But generating index.ts is useful since (as mentioned by @RicardoVaranda) its presence facilitates simpler import statements.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}