Comment on page
Changelog
Fully - Angular Admin Template changelog.
- Update project to Angular 12 🎉
- Update all dependencies to latest versions.
ng update @angular/core@11 @angular/cli@11 --create-commits
ng update @angular/material@11 --create-commits
ng update @nguniversal/builders@11 --create-commits
ng update @nguniversal/express-engine@11 --create-commits
Before updating Angular to v12, we need to update some peer dependencies
npm install --save @ng-bootstrap/ng-bootstrap@10
Try to follow this order for proper peer dependencies update
ng update @nguniversal/builders@12 --create-commits
ng update @angular/core@12 @angular/cli@12 --create-commits
ng update @angular/material@12 --create-commits
ng update @nguniversal/express-engine@12 --create-commits
Diagnostic
npm outdated -g --depth=0
Execute
npm install -g @angular/cli
Diagnostic
npm outdated --depth=0 --long
Execute
npm install --save @swimlane/ngx-charts@19
npm install --save @commitlint/cli@13
npm install --save @commitlint/config-angular@13
npm install --save @fortawesome/fontawesome-free
npm install --save google-libphonenumber
npm install --save [email protected]
npm install --save [email protected]
npm install --save mobile-detect
npm install --save echarts@5
npm install --save ngx-echarts@7
npm install --save @juggle/resize-observer
npm install --save chart.js@3
npm install --save ng2-charts@next
ng2-charts breaking changes references:
Dev dependencies
npm install --save-dev @types/echarts
npm install --save-dev @types/[email protected]
npm install --save-dev @types/[email protected]
npm install --save-dev @types/[email protected]
npm install --save-dev @types/[email protected]
npm install husky@latest --save-dev \
&& npx husky-init \
&& npm exec -- github:typicode/husky-4-to-7 --remove-v4-config
Linting is the process of analyzing your code for bugs, warnings, style and consistency changes, and more. In early 2019, TSLint was officially deprecated, and the community centered around ESLint as its replacement. Since then, there’s been a lot of development in ESLint in order to support TypeScript as well as Angular. Now, we finally have TypeScript-ESLint and Angular-ESLint.
In order to migrate our existing project we run the following commands:
ng add @angular-eslint/schematics
ng g @angular-eslint/schematics:convert-tslint-to-eslint
npm audit
npm audit fix
- Update project to Angular 10 🎉
- Update all dependencies to latest versions.
To update your existing project please follow these steps.
If you re-download the files from your Angular Template account you don't need to do this because the template is already updated.
Remove any
es5BrowserSupport
flags in your angular.json
and set your target to es2015
in your tsconfig.json
. Angular now uses your browserslist
to determine if an ES5 build is needed. ng update
will migrate you automatically.ng update @angular/core@8 @angular/cli@8 --create-commits
ng update @angular/core@9 @angular/cli@9 --create-commits
Before updating Angular Material, we need to update peer dependency
@swimlane/ngx-charts
npm install --save @swimlane/ngx-charts@14
ng update @angular/material@9 --create-commits
ng update @nguniversal/express-engine --force --create-commits
entryComponents
are no longer required. They can be removed from your code.ng update @angular/core @angular/cli --create-commits
Before updating Angular Material, we need to update peer dependency
@swimlane/ngx-charts
npm install --save @swimlane/ngx-charts@16
ng update @angular/material --create-commits
ng update rxjs --create-commits
Run
npm outdated
and update all your libraries. In our project we had to update the following:npm install --save @commitlint/cli@11
npm install --save @commitlint/config-angular@11
npm install --save [email protected]
npm install --save @fortawesome/fontawesome-free
npm install --save google-libphonenumber
npm install --save echarts@latest
npm install --save [email protected]
npm install --save chart.js@latest
npm install --save [email protected]
npm install --save-dev codelyzer@latest
Update ng-bootstrap
npm install --save bootstrap
npm install --save @ng-bootstrap/ng-bootstrap@7
ng add @angular/localize
- Move Material Icons and text font family from
index.html
tomain.scss
andthird-party/material.scss
- Rename
override-material-variables.scss
tomaterial.scss
- Update buttons mixin
- Add color palette primary color to radio buttons from settings menu
- Rename
app/layouts
forapp/components
- Add
Components/Lists
- New lists examples!
- Add
Components/Cards
- New cards examples!
- Add
truncate-text
mixin.- This mixin is useful when you want to limit your text to a certain amount of lines
- Fix sign in modal image path.
- Fix CRM dashboard task lists checkbox icon and default color.
- Add border-radius to autocomplete images in
utilities/autocomplete
. - Fix button link color in forgot password page
- Fix typo in CRM dashboard: "be proactive about your goals"
- Fix table with filters image height.
- Fix
md
andsm
visual issue inLayout A
with side-nav push mode.
- Re-write dynamic layout mechanism. We got rid of our previous mechanism that worked by resetting the router settings with the selected layout. Now we are using Angular Material CDK Portals to dynamically render the different layouts. This fixed several issues.
- Removed
app.routes.ts
file because with the new dynamic layout approach this abstraction is no longer needed. You should now find all the routes in theapp-routing.module.ts
- Update
server.ts
to identify requests from mobile devices and adjust the layout according to that. Addedmobile-detect
library. - Include Angular TransferState mechanism to read server side response header and act accordingly depending if we are on mobile device or not.
- Rename
LayoutBreakpointService
toResponsiveBreakpointsService
. - Improved the responsive transition by setting the
'menu-open'
class to the layout when the side-menu starts opening.
Happy thanks giving!
🎉
Hope you enjoy this early version of Fully. We are working hard on polishing the template. Feel free to send us your early feedback to [email protected]
Stay tune for imminent updates and new features.
Last modified 2yr ago