This project was generated with Angular CLI version 9.1.1.
No globals use npx
Run npm run start
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run npx ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run npm run build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
To test build version cd to dist/app folder and run npx http-server --proxy "http://localhost:8080?"
Run npm run test
to execute the unit tests via Karma in headless Chrome.
Run npm run test-watch
to execute the unit tests via in watch mode Chrome.
To run single test or test-watch
npm run test -- --include <test-relative-path.spec.ts>
To run directory or bunch of files
npm run test -- --include src/app/components
Run npm run e2e
to execute the end-to-end tests via Protractor.
This project was architected using this article.
- App module
- Core module
- Shared module
- Lazy loaded features
Build steps:
- Create a workspace for ng-stats apps
npx -p @angular/cli ng new ng-stats --create-application false --strict
- Create covid19-stats-app application (set components name prefix to "cvd", use scss and routing)
cd ng-stats
npx ng g application covid19-stats-app --prefix cvd --style scss --routing
** add initial scaffolding for workspace and project **
- Add angular material
npx ng add @angular/material
- Add custom themes
cd projects/covid19-stats-app/src
mkdir themes && cd "$_"
touch default-theme.scss
touch light-theme.scss
touch dark-theme.scss
- Add npx to package json scripts
** add angular material and custom themes **
- Add webpack bundle analyzer
npm i -D webpack-bundle-analyzer
** add webpack bundle analyzer **
- Clean up app.component and add core module
npx ng g m core
** add core module **
- Add core layout
npx ng g c core/layout/main-layout
** add main layout core component **
- Add app tob toolbar and router outlet
** add app tob toolbar and router outlet **
- Add dashboard feature and app routing (lazy feature)
npx ng g m features/dashboard --route dashboard --module app.module.ts
** add dashboard feature and app routing **
- Add about feature (lazy feature)
npx ng g m features/about --route about --module app.module.ts
** add about feature and route **
- Add simple app navigation
** add simple app navigation **
- Add shared module
npx ng g m shared
** add shared module **
- Add flex layout
npm i -s @angular/flex-layout
** add flex layout **