پکیج های لازم برای استفاده در یک پروژه انگولار Angular

npm i --save bootstrap jquery jquery-ui-dist popper.js chart.js flat-icons aos animate.css ngx-toastr @laylazi/bootstrap-rtl @angular/flex-layout jquery.countdown icomoon sticky-js jquery.stellar @angular/cdk @swimlane/ngx-charts hammerjs ngx-typed-js ngx-owl-carousel-o fancyBox ngx-page-scroll
 ngx-typed-js 

ng add @angular/material 


npm i -S @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

npm i -S @ngx-share/core @ngx-share/button @ngx-share/buttons @angular/cdk

ng add @nguniversal/express-engine

بعد از اینکه این پکیج ها رو نصب کردین لازم است برای نصب فایل angular.json  در روت پروژه انگولار رو باز کرده و در قسمت styles: , scripts این فایلها رو جای گذاری کنید

  "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/jquery-ui-dist/jquery-ui.min.css",
              "node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
              "node_modules/owl.carousel/dist/assets/owl.theme.default.min.css",
              "node_modules/fancybox/dist/css/jquery.fancybox.css",
              "node_modules/flat-icons/fonts/ecommerce.css",
              "node_modules/flat-icons/fonts/interface.css",
              "node_modules/flat-icons/fonts/technology.css",
              "node_modules/flat-icons/fonts/creative.css",
              "node_modules/aos/dist/aos.css",
              "node_modules/icomoon/style.css",
              "node_modules/@laylazi/bootstrap-rtl/dist/css/bootstrap-rtl.css",
              "node_modules/chart.js/dist/Chart.min.css",
              "node_modules/animate.css/animate.min.css",
              "node_modules/ngx-toastr/toastr.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/jquery-ui-dist/jquery-ui.min.js",
              "node_modules/owl.carousel/dist/owl.carousel.min.js",
              "node_modules/jquery.stellar/jquery.stellar.js",
              "node_modules/jquery.countdown/jquery.countdown.js",
              "node_modules/sticky-js/dist/sticky.min.js",
              "node_modules/aos/dist/aos.js",
              "node_modules/fancybox/dist/js/jquery.fancybox.js",
              "node_modules/typed.js/typed.js"
            ]

خط اول امکان استفاده از تم پیشفرض انگولار متریال را فراهم میکند که در زمان اضافه کردن انگولار متریال به صورت اتوماتیک در این قسمت اضافه خواهد شد (توضیح بیشتر در این پست)

این پکیج ها را به روز خواهم کرد و برای تک تک آنها توضیح خواهم نوشت

دو پکیج ngx-share برای یک دکمه اشتراک در صفحه بود که از سایت https://murhafsousli.github.io/ میتوانید مستندات آن راببینید

پکیج 

ng add @nguniversal/express-engine

برای رندر کردن برنامه انگولار در سمت سرور هست و اینکه چرا از این تکنولوژی استفاده کنیم را در این لینک بخوانید

آپدیت 99/3/4

اضافه کردن hammer.js به پروژه

اگر مایل بودید angular material  رو به پروژه خود اضافه کنید برای اینکه بتوانید از 

mat-side-toggle, mat-slider, matTooltip

به صورت کامل استفاده کنید و یا از این امکانات در گوشی همراه به عنوان responsive  استفاده کنید لازم است تا با دستور زیر hammer  را نصب کنید، (hammer)  به صورت local  نصب میشود و به صورت global  نصب نمیشود

npm install --save hammer.js

البته این پکیج در ابتدای همین مقاله به لیست پکیجها اضافه شده است اگر پکیج کامل را نصب کردید دیگر لازم نیست ای دستور را اجرا کنید.

jquery.stellar 

jquery.countdown

sticky-js میتوانید sticky ساده و یا  همان کاغذ یاداشت کوچک د رکنار وب سایت خود داشته باشید

ngx-typed-js

برای زسم نمودار ngx-chart منسوخ شده  وبهتر است از @swimlane/ngx-charts استفاده شود

ngx-page-scroll