Creating a new Angular 6 application is a pretty straightforward process with Angular CLI 6 under your belt. With just one command you have a fully functional Angular 6 boilerplate application ready for you to start writing your business logic. The application created using Angular CLI 6 comes with Units tests setup (with Karma and Jasmine), E2E tests setup (with protractor), highly optimized build process (with webpack) all under the hood.
ng new angular-test --routing --style scss
├── angular.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.e2e.json ├── package.json ├── package-lock.json ├── README.md ├── src │ ├── app │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── app-routing.module.ts │ ├── assets │ ├── browserslist │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── karma.conf.js │ ├── main.ts │ ├── polyfills.ts │ ├── styles.scss │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── tslint.json ├── tsconfig.json └── tslint.json
angular.json : If you’ve used angular 2.x, 4.x or 5.x, you might’ve already noticed that there’s no .angular-cli.json configuration file in this folder structure. That’s because with Angular CLI 6, .angular-cli.json has been replaced with angular.json file. This is done to provide the ability to efficiently share common code between multiple applications/libraries, which was not possible with .angular.cli file. angular.json is basically a workspace configuration file as compared to .angular-cli which did not have any such support. Starting version 6, each CLI workspace has projects, each project has targets, and each target can have configurations.
e2e/ : This folder contains your End-to-End tests for this application. e2e/protractor.conf.js contains protractor configuration – used to run the e2e tests, e2e/src containt the actual test cases and e2e/tsconfig.json contains typescript compilation configuration which extends the configuration specified in tsconfig.json (at the root).
package.json: This file contains details about your application such as name, version, author etc, all your npm dependencies, npm commands and other configurations.
package-lock.json: This file basically locks downs the details of npm dependencies you’ve installed. it stores the exact version numbers of npm packages you’re installing so you won’t have any surprises when you install the dependencies afterward (maybe in a different environment)
src/app/ : This is where you keep all your code. Your modules, components, services, directives – all will be inside this folder.
src/assets/: You can keep any assets, such as fonts, images, documents, external js/css libraries in this folder
src/environments/ : This folder contains environment specific configuration for your application. If there’s any configurations that vary for each environment, for example, the API urls, the API port etc, should be kept in these files. Angular CLI will use one of these environment files while creating a build.
src/karma.conf.js : Contains the karma configurations used for executing your unit tests.
src/main.ts : This is where your application starts booting. This file basically invokes the AppModule – the root module, which in turn will bootstrap other resources needed to load your application.
src/polyfills.ts : polyfills.ts file contains any extra libraries that are needed to load before your angular application is loaded. This includes any browser polyfills and application polyfills.
src/styles.scss : Contains global styles for your angular application.
src/test.ts: Prepares the unit tests for execution. This file is required by karma.conf.js and loads recursively all the .spec and framework files.
tslint.json: Contains the linting configurations used by tslint to lint your code.
Hope this adds to what you already know about Angular. Please leave a comment if I missed anything.