Angular 22 වර්ෂනය සහ Bootstrap 5.3 එකට එකතු කරගැනීම, නවීන වෙබ් ඇප්ලිකේෂන් තැනීමට අවශ්ය දැනුමක්. මේ මාර්ගෝපදේශය ඔබට පළමු වරටම පියවරෙන් පියවර සකස් කරන ආකාරය පැහැදිලි කරයි.
ආරම්භය – පළමුව ng new my-dashboard --standalone --routing --style=scss යන කමන්ඩ් එකෙන් නව Angular ව්යාපෘතියක් සාදන්න. --standalone ඕනෑම NgModule එකක් නොමැතිව, Angular 22 නිර්දේශිත ආකාරයට කොම්පොනන්ට් පදනම් කරයි. --style=scss මගින් SCSS භාවිතා කරයි, එය Bootstrap හි variable සහ mixin ගණනාවට අවශ්යයි. සෑම වතාවකම strict mode සක්රිය කරගන්න – එය compile‑time දෝෂ ගලවයි.
Bootstrap ස්ථාපනය – npm install [email protected] යන කමන්ඩ් එකෙන් Bootstrap 5.3 එක ඇතුළත් කරගන්න. Angular‑native Bootstrap කොම්පොනන්ට් (modal, dropdown, datepicker) අවශ්ය නම් පසුව @ng-bootstrap/ng-bootstrap ස්ථාපනය කරන්න; රූපලාවන්ය පමණක් අවශ්ය නම් CSS පමණක් ප්රමාණවත්.
angular.json සකස් කිරීම – styles ඇරේ තුළ src/styles.scss එක එක්ක, scripts තුළ node_modules/bootstrap/dist/js/bootstrap.bundle.min.js එක ඇතුළත් කරන්න. Bootstrap CSS එක angular.json තුළ සෘජු ලෙස යොදා නොදෙන්න; SCSS හරහා import කිරීමෙන් variable, mixin භාවිතා කළ හැක.
SCSS ව්යුහය – ව්යාපෘතියේ src/styles ෆෝල්ඩරය තුළ පහත ගොනු සකස් කරන්න:
_variables.scss– Bootstrap variable overrides + ඔබගේ custom variable._mixins.scss– ඔබගේ mixin._components.scss– custom component style._utilities.scss– custom utility class.styles.scss– ඉහත සියල්ල නිවැරදි අනුක්රමයෙන් import කිරීම.
Import අනුක්රමය වැදගත්: fonts → variable overrides → Bootstrap SCSS → custom styles. අනුක්රමය වැරදුනොත් variable overrides ක්රියා නොකරයි.
ශ්රී ලංකාවට ඇති වැදගත්කම
ලංකාවේ තාක්ෂණික පාඨමාලා, startup සහ freelance developer කණ්ඩායම් සඳහා Angular 22 + Bootstrap 5.3 සංයෝජනය ඉතා ප්රයෝජනවත්. SCSS architecture එක හරහා UI එකේ consistency රැක ගැනීමේ හැකියාව, අඩු maintenance cost, සහ ත්රිකාලීන performance වැඩි කරයි. නව සමාගම් වලට rapid prototyping, responsive design, සහ SEO‑friendly markup ලබා දී, ග්රාහක අත්දැකීම් ඉහළට නංවයි. තවත් වාසියක් නම්, Angular strict mode මඟින් code quality වැඩිවීම නිසා දෝෂ අඩුවීම, එය සමාගම්ගේ development timeline කෙටි කරයි.
ඉදිරියේදී Angular 22 සහ Bootstrap 5.3 එකට හුරු වීම, ලංකාවේ තාක්ෂණික පුහුණුවල අඩවියට නව මට්ටමක් ගෙන එයි. ඔබත් මේ පියවර අනුගමනය කර, ඔබේ ව්යාපෘතියේ UI/UX අතින් අගය වැඩි කරගන්න.
අවසන් වශයෙන්, Angular 22 සමඟ Bootstrap 5.3 සකස් කිරීමේ මූලික කරුණු ඉගෙන ගෙන, ඔබේ කේත පදනම ශක්තිමත් කරගන්න. වැඩිදුර තොරතුරු සඳහා අපගේ සම්පූර්ණ මාර්ගෝපදේශය බලන්න.
