Once you sent up and install all necessary files to start Angular Development and making use of our app, these are the common mistake that SharePoint developers do.

1. Running the Application in the current directory: –

You have created a new Angular Project running NG Server in the same Directory and this error occurs: “The serve command requires to be run in an Angular project, but a project definition could not be found.” Error. This means that you need to change the current folder to the Application Folder and then run NG Serve to resolve this issue.

2. Directly Manipulating the DOM: –

This is a rookie mistake the most common mistake that all the developers so to manipulate DOM directly, for example, to change the class name, title text or hide and show some icon like that. Cases like above DevOps chose a simple approach of manipulating the DOM directly.

Angular is not Angular JS anymore it’s a complete Framework and you can make use of the most of its feature to do more effectively.

3. Static Injection Error: –

When you wanted to create a model for the application, you create a model.ts file and import it in our component and usually, you forgot to add in in the Provider that causes the Static Injection Error.

4. Using of Promise vs Observable: –

Before you jump into using which one to use let’s see the difference between these two while calling an HTTP service via REST API

When the developer wanted to use the Service API separately it’s recommended that you can use Observables so that you can make most out of it by calling n number of times.

If you are using to call a function inside of a component directly you can go with Promise, and its complete developer choice to use which one to go with.

5. Template parse errors: –

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

It’s so common that you keep forgetting to add the import statement in module.ts file when you are using the angular features. NGModel directive is available in angular Forms Model so you need to add an import state and add Forms Module in imports.

6. Unable to load Bootstrap css: –

Once you install Bootstrap in the application by making use of npm command, it will not reflect the Bootstrap CSS classes this because you need to add the CSS files in the anular.json file.

Navigate to Angualr.json File à add “”./node_modules/bootstrap/dist/css/bootstrap.min.css””

In styles.

7. The app is not working in IE10,11: –

Usually, developers use Chrome at the time of developing the application, once you are done with our development, if you open the app in IE 10,11 nothing will be shown on the home page don’t panic it’s because of Polyfills.

Just navigate to Polyfills.ts file and uncomment

import ‘classlist.js’;

import ‘youb-animations-js’; statements and run below npm commands.

Run `npm install –save classlist.js`.

Run `npm install –save youb-animations-js`.

Once these commands are installed try to open it in IE and app works as expected.

For Further Reading:

Client-Side People Picker with Angular CLI

Angular- What is it?