Skip to content
    Select Category

    Welcome to Teams Tuesday

    A podcast about mastering the best of what other people have already figured out with M365.

    Teams Tuesday focuses on insights and lessons that never expire. You’ll walk away from every episode with actionable insights that help you get better results and be more productive.

    Back to Home

    7 rookie mistakes a SharePoint developer makes when starting Angular development

    4 min read

    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.

    New call-to-action

    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

    Observable Promise
    Emits multiple values over a period of time

    Is not called until you subscribe to the Observable

    Can be canceled by using the unsubscribe () method

    Provides the map, for each, filter, reduce, retry, and retry When operators
    Emits only a single value at a time

    Calls the services without .then and .catch

    Cannot be canceled

    Does not provide any operators

    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?

    Comments are closed.