/e2e
/node_modules
npm install
command./src
.editorconfig
.gitignore
.huskyrc.json
angular.json
browserslist
commitlint.config.js
@commitlint/cli
and @commitlint/config-angular
npm packages and this config file that sets the linting rules (in our case Angular Commit Convention rules).karma.conf.js
ng test
command builds the app in watch mode, and launches the Karma test runner.package-lock.json
node_modules
by the npm client.package.json
server.ts
tsconfig.app.json
tsconfig.*.json
files in any standard Angular project. They follow the same base + customization pattern.tsconfig.json
provides the base options that different config files derive from, and each specific tsconfig file provides specific options. This allows you to further customize the options from tsconfig.json
.app
folder. This configuration file is referenced in the angular.json
file.tsconfig.json
tsc
compiler, which requires some configuration.
This TypeScript configuration file guides the compiler as it generates JavaScript files for the project. This file contains options and flags that are essential for Angular applications.
Keep in mind that this file needs to be in the root path as it’s where the TypeScript compiler will look for it.tsconfig.server.json
angular.json
file.tsconfig.spec.json
angular.json
file.tslint.json
tslint
is a package that parses your Typescript code looking for points that don't follow best practice rules.
This configuration file defines the set of rules for best practices in Typescript in general. In particular, all standard Angular projects created with the Angular CLI extend tslint rules from the codelyzer
npm package.
Every time you run ng lint
these rules are enforced.webpack.server.config.js
/src
folder./src
/src
directory we find our raw, uncompiled code. This is where most of the work for your Angular app will take place./app
/assets
/environments
/theme
favicon.ico
index.html
index.html
by the Angular compiler.main.server.ts
main.ts
main.ts
that loads the /app/app.module.ts
and boots our Angular app in a browser environment.platformBrowserDynamic().bootstrapModule(AppModule)
And the main.server.ts
that loads the /app/app.server.module.ts
and boots our Angular app in a server environment.polyfills.ts
ng new
command, a src/polyfills.ts
configuration file is created as part of your project folder. This file incorporates the mandatory and many of the optional polyfills as JavaScript import
statements.test.ts
../karma.conf.js
and loads recursively all the .spec
files with tests and framework files.tslint.json
../tslint.json
.src/app
/app
folder is the largest folder because it contains all the code of our Angular app. It has all the components, modules, pages, services and styles you will use to build your project./core
and /shared
folders include auxiliar modules that provide structure and organization to our source code and follow Angular best practices.
The other folders you will find inside /app
are feature modules that include the different pages of the app./authentication
/signin
, /signup
, and /forgot-password
pages./charts
charts.js
, e-charts
, and ngx-charts
)./components
cards
, lists
, tabsets
, carousels
, etc.CoreModule
. Unlike the SharedModule
, this module gather all single-use classes and components./dashboards
/forms
SharedModule
that lives in this folder exists to hold the common components, directives, and pipes and share them with the modules that need them./shell
/tables
tables
, filters
, pagination
, sorting
examples./utilities
alerts
, autocomplete
, file-uploader
, and modals
pages with lots of examples.app-color-palettes.ts
app-layouts.ts
app-routing.module.ts
RouterModule
in the AppModule
.app.component.html
<router-outlet>
to render the routes and their content. It can also be wrapped with content that you want to be in every page (for example a footer).app.component.ts
app.module.ts
app.server.module.ts
AppModule
with stuff you only want in the server side rendered version of your app.universal-interceptor.ts
src/app/core
src/app/shared
src/assets
src/theme