angular-cn/aio/content/guide/setup-systemjs-anatomy.md

@title
Setup Anatomy

@intro
Inside the local development environment for SystemJS.

@description

The documentation [setup](guide/setup) procedures install a _lot_ of files.
Most of them can be safely ignored.

Application files _inside the_ **`src/`** and **`e2e/`** folders matter most to developers.

Files _outside_ those folders condition the development environment.
They rarely change and you may never view or modify them.
If you do, this page can help you understand their purpose.

<style>
  td, th {vertical-align: top}
</style>


<table width="100%">

  <col width="10%">

  </col>


  <col width="90%">

  </col>


  <tr>

    <th>
      File
    </th>


    <th>
      Purpose
    </th>


  </tr>


  <tr>

    <td>
      <code>src/app/</code>
    </td>


    <td>
      Angular application files go here.      
                  
            Ships with the "Hello Angular" sample's      
            `AppComponent`, `AppModule`, a component unit test (`app.component.spec.ts`), and      
            the bootstrap file, `main.ts`.      
                  
            Try the <live-example name="setup">sample application</live-example>      
            and the <live-example name="setup" plnkr="quickstart-specs">unit test</live-example>      
            as _live examples_.
    </td>


  </tr>


  <tr>

    <td>
      <code>e2e/</code>
    </td>


    <td>
      _End-to-end_ (e2e) tests of the application,      
            written in Jasmine and run by the      
            <a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>      
            e2e test runner.      
                  
            Initialized with an e2e test for the "Hello Angular" sample.
    </td>


  </tr>


  <tr>

    <td>
      <code>node_modules/</code>
    </td>


    <td>
      The _npm_ packages installed with the `npm install` command.
    </td>


  </tr>


  <tr>

    <td>
      <code>      .editorconfig<br>      
            .git/<br>      
            .gitignore<br>      
            .travis.yml      </code>
    </td>


    <td>
      Tooling configuration files and folders.      
            Ignore them until you have a compelling reason to do otherwise.
    </td>


  </tr>


  <tr>

    <td>
      <code>CHANGELOG.md</code>
    </td>


    <td>
      The history of changes to the _QuickStart_ repository.      
            Delete or ignore.
    </td>


  </tr>


  <tr>

    <td>
      <code>favicon.ico</code>
    </td>


    <td>
      The application icon that appears in the browser tab.
    </td>


  </tr>


  <tr>

    <td>
      <code>index.html</code>
    </td>


    <td>
      The application host page.      
            It loads a few essential scripts in a prescribed order.      
            Then it boots the application, placing the root `AppComponent`      
            in the custom `<my-app>` body tag.      
                  
            The same `index.html` satisfies all documentation application samples.
    </td>


  </tr>


  <tr>

    <td>
      <code>karma.conf.js</code>
    </td>


    <td>
      Configuration for the <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>      
            test runner described in the [Testing](guide/testing) guide.
    </td>


  </tr>


  <tr>

    <td>
      <code>karma-test-shim.js</code>
    </td>


    <td>
      Script to run <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>      
            with SystemJS as described in the [Testing](guide/testing) guide.
    </td>


  </tr>


  <tr>

    <td>
      <code>non-essential-files.txt</code>
    </td>


    <td>
      A list of files that you can delete if you want to purge your setup of the      
            original QuickStart Seed testing and git maintainence artifacts.      
            See instructions in the optional      
            [_Deleting non-essential files_](guide/setup) section.      
            *Do this only in the beginning to avoid accidentally deleting your own tests and git setup!*
    </td>


  </tr>


  <tr>

    <td>
      <code>LICENSE</code>
    </td>


    <td>
      The open source MIT license to use this setup code in your application.
    </td>


  </tr>


  <tr>

    <td>
      <code>package.json</code>
    </td>


    <td>
      Identifies `npm `package dependencies for the project.      
                  
            Contains command scripts for running the application,      
            running tests, and more. Enter `npm run` for a listing.      
            <a href="https://github.com/angular/quickstart/blob/master/README.md#npm-scripts"      
               target="_blank" title="npm scripts for Angular documentation samples">Read more</a> about them.
    </td>


  </tr>


  <tr>

    <td>
      <code>protractor.config.js</code>
    </td>


    <td>
      Configuration for the      
            <a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>      
            _end-to-end_ (e2e) test runner.
    </td>


  </tr>


  <tr>

    <td>
      <code>README.md</code>
    </td>


    <td>
      Instruction for using this git repository in your project.      
            Worth reading before deleting.
    </td>


  </tr>


  <tr>

    <td>
      <code>styles.css</code>
    </td>


    <td>
      Global styles for the application. Initialized with an `<h1>` style for the QuickStart demo.      
            
    </td>


  </tr>


  <tr>

    <td>
      <code>systemjs<br>.config.js</code>
    </td>


    <td>
      Tells the **SystemJS** module loader where to find modules      
            referenced in JavaScript `import` statements. For example:
      <code-example language="ts">
        import { Component } from '@angular/core;
      </code-example>

      Don't touch this file unless you are fully versed in SystemJS configuration.
    </td>


  </tr>


  <tr>

    <td>
      <code>systemjs<br>.config.extras.js</code>
    </td>


    <td>
      Optional extra SystemJS configuration.      
            A way to add SystemJS mappings, such as for appliation _barrels_,      
            without changing the original `system.config.js`.
    </td>


  </tr>


  <tr>

    <td>
      <code>tsconfig.json</code>
    </td>


    <td>
      Tells the TypeScript compiler how to transpile TypeScript source files      
            into JavaScript files that run in all modern browsers.
    </td>


  </tr>


  <tr>

    <td>
      <code>tslint.json</code>
    </td>


    <td>
      The `npm` installed TypeScript linter inspects your TypeScript code      
            and complains when you violate one of its rules.      
                  
            This file defines linting rules favored by the      
            [Angular style guide](guide/style-guide) and by the authors of the documentation.
    </td>


  </tr>


</table>