NG Lightning is a UI component library for Angular based on Salesforce’s Lightning Design System. It provides a wide range of pre-built components to make front-end development easier and faster. However, like any technology, it has its own nuances and potential pitfalls that can cause problems for developers who aren’t familiar with it. In this article, we’ll go over what not to do when you start with NG Lightning to avoid common mistakes.
- Not following the recommended folder structure
NG Lightning recommends a specific folder structure for organizing your Angular application. This structure helps to keep your code organized and easy to maintain. Failing to follow the recommended structure can lead to confusion and disorganization, making it harder to find and modify your code later.
To avoid this mistake, make sure to follow the recommended folder structure and organize your code into the correct folders.
- Not importing required modules
Like other UI component libraries, NG Lightning is a modular library, meaning that not all components are loaded by default. If you want to use a specific component, you need to import the corresponding module. Failing to import the required module can lead to errors like “Cannot find module ‘lightning/button'”.
To avoid this mistake, always check the documentation for the required modules and make sure to import them in your module file.
- Not following the correct component structure
Each NG Lightning component has its own structure and set of required properties, and deviating from this structure can cause issues. For example, the lightning-button component requires a specific set of attributes, including label and variant. If you don’t follow the correct structure or omit required attributes, you might see errors like “Required attribute ‘label’ is missing”.
To avoid this mistake, make sure to carefully read the documentation for each component you use, and always follow the correct structure and set of required attributes.
- Not using the correct CSS classes
NG Lightning provides a set of CSS classes to style your components correctly. However, using the wrong classes or not using them at all can lead to components that don’t look or behave as expected. For example, failing to use the correct slds-m-around class can result in components that are not properly spaced.
To avoid this mistake, make sure to use the correct CSS classes provided by NG Lightning, and test your components thoroughly to ensure they look and behave as expected.
- Not testing components thoroughly
Finally, one of the most common mistakes is not testing NG Lightning components thoroughly. This can result in bugs and unexpected behavior in production, leading to frustration for both developers and users. It’s crucial to test your components in different scenarios and environments to ensure they work as intended.
To avoid this mistake, use automated testing frameworks like Jest or Cypress, and create test cases that cover different scenarios and edge cases. Also, make sure to test your components on different browsers and devices to ensure they work well across all platforms.
In conclusion, NG Lightning is a powerful tool that can make front-end development easier and faster, but it requires attention to detail and a solid understanding of its features and nuances. By avoiding these common mistakes and following best practices, you can make the most of NG Lightning and deliver high-quality, reliable applications.
