Home Metronic Hire Us Buy Now
The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

To use most of the Metronic build tools, Node.js LTS version is required. Some of the plugins and framework in Metronic does not yet support the latest Node.js version.

## Angular

### Overview

Angular is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser.

The `html` version theme has static CSS only components. Those components are by default available in the `angular` version as well. You can copy and paste the html and use it in angular components.

### Angular with Full Demo Pages

Angular source code can be found in `[metronic]/theme/angular/` and available in separate app in various demos.

Path | Description
--- | ---
theme | The Metronic theme pacakge.
angular | The Angular's demo
demo1 | Full Metronic's Angular application with sample pages. See Angular files structure below. Demo URL See demo
demo2 | Full Metronic's Angular application with sample pages. See Angular files structure below. Demo URL See demo
demo3 | Full Metronic's Angular application with sample pages. See Angular files structure below. Demo URL See demo

### Angular Files Structure

Angular source code can be found in `[metronic]/theme/angular_new/[demo]/`.
Below is the list of demo file structure in Angular app.

Path | Description
--- | ---
dist | The build output of Angular. This folder does not included in the package. Run command `ng build` to build it.
e2e | End-to-end tests using Protractor. Visit link https://angular.io/cli/e2e for more info.
node_modules | The `package.json` file in the app root defines what libraries will be installed into `node_modules/` when you run `npm install`.
src | Your app lives in the src folder. All Angular components, templates, styles, images, and anything else your app needs go here. Any files outside of this folder are meant to support building your app.
app | Main app folder
_helpers | Addinional application helpers
fake | Fake database for Authorization mocking.
_metronic | Metronic core logic
configs | Layout configs
core | Metronic custom Services/Pipes
partials | Shared components
modules | Separated modules
auth | Authorization module
e-commerce | E-Commmerce module
errors | Error pages examples
i18n | Internationalization module
material | Google Material examples
ngBootstrap | NGBootstrap library compoments examples
user-management | User Moanagement modules (*not implemented in new version. ETA [v8.x.x])
pages | Layout view and pages
_layout | Base Layouts
builder | Layout builder page
Dashboard | Dashboard page
layout.module.ts | Layout module
pages-routing.module.ts | Routing for all private pages (based on Layout)
app.component.html | Main app template.
app.component.ts | Main app typescript.
app.module.ts | Main app module. The place where to import and declare required components.
app-routing.module.ts | Base routing for the app. Disable unused demo layout in this file to exclude the module.
assets | This folder will contain all the Metronic core assets needed for the Angular application.
environments | This folder contains one file for each of destination environments, each exporting simple configuration variables to use in application
environment.prod.ts | Production environment config
environment.ts | Development environment config
index.html | The `index.html` lives at the root of front-end structure. The `index.html` file will primarily handle loading in all the libraries and Angular elements.
main.ts | The main entry point for your app.
polyfills.ts | Angular is built on the latest standards of the web platform. A particular browser may require at least one polyfill to run any Angular application. You may need additional polyfills for specific features. IE9, IE10 and IE11 requires to enable polyfills. Read more angular.io/guide/browser-support
style.angular.scss | Global styles go here which styles that affect all of your app need to be in a central place.
test.ts | Visit link https://angular.io/guide/testing for more info.
tsconfig.app.json | Visit link https://www.typescriptlang.org/docs/handbook/tsconfig-json.html for more info.
tsconfig.spec.json | Visit link https://www.typescriptlang.org/docs/handbook/tsconfig-json.html for more info.
tslint.json | When using the CLI or many third-party tools, a file named tslint.json or tslint.yaml is used to configure which rules get run and each of their options. Visit link https://palantir.github.io/tslint/usage/configuration/ for more info.
typings.d.ts | Use TypeScript type definition files—d.ts files—to tell the compiler about the libraries you load. Visit link https://angular.io/guide/typescript-configuration#typescript-typings for more info.
.editorconfig | Editor configuration, see http://editorconfig.org
.gitignore | Git uses it to determine which files and directories to ignore, before you make a commit.
angular.json | Configuration for Angular CLI. In this file you can set several defaults and also configure what files are included when your project is built. Check out the official documentation if you want to know more.
package.json | A package.json file contains meta data about app or module. Most importantly, it includes the list of dependencies to install from npm when running npm install.
package-lock.json | package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json
tsconfig.json | `tsconfig.json` file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.
tslint.json | Linting configuration for TSLint together with Codelyzer, used when running `ng lint`. Linting helps keep your code style consistent.
webpack-rtl.config.js | RTL webpack configuration.
ngcc.config.js | IVY renderer compatibility settings file.