FAQs Angular Maximilian Schwarzmuller

Summary

This video answers common Angular questions around versioning, project setup, debugging techniques, component communication, state management with Redux, deployment, and more. It provides an overview of the Angular framework evolution from AngularJS to modern Angular, recommending using the Angular CLI for project scaffolding. It stresses the importance of reading error messages and using browser developer tools for debugging. For passing data between components, it discusses property binding and RxJS subjects. It also covers persisting state with local storage vs databases and hosting considerations.

Takeaways

• 😊 Angular 2+ is a complete rewrite of AngularJS 1.x with a different architecture focused on components.
• 👍 Use the Angular CLI to set up projects - it provides a flexible workflow and optimizations.
• 💡 Read error messages carefully - they often provide useful hints on fixes.
• 🔎 Use source maps and tools like Augury to debug Angular apps.
• 🚀 You can use Angular with any backend language like PHP, Node.js etc. through REST APIs.
• 🔀 Use services like RxJS Subjects to communicate between components.
• 📥 Persist state across page reloads with local storage or a server database.
• ☁️ Angular apps can be hosted on static hosts like AWS S3 or Firebase.
• ⚙️ Configure your server to return index.html for 404s so client-side routing works.
• 🌐 Anyone can view client-side JS code, so don't put sensitive data there.

Q & A

What was the major reason the Angular team decided to do a complete rewrite and release Angular 2?

One of the major reasons was performance issues that could happen in bigger AngularJS apps. Angular 2 focused more on creating single page applications and is highly component driven to address these performance challenges.

Why do we have version numbers higher than Angular 2 like Angular 4, 5, etc.?

The Angular team adopted semantic versioning which has major releases, minor releases and patch releases. So the version number indicates if there are major new features introduced or just bug fixes.

Is it possible to use Angular without the Angular CLI?

While theoretically you could do the compilation and bundling in the browser, it is not recommended for performance reasons. The Angular CLI gives a really good and flexible workflow so it is highly recommended to use it.

How can data be passed between non-parent/child components in Angular?

Services like ones using RxJS Subjects are commonly used to pass data between non-parent/child components. The data can be emitted through the Subject in one component and subscribed to in another component.

How can state be persisted across page reloads in Angular apps?

Local storage and server-side databases are two main ways. Local storage stores data in the browser across page reloads. A database persists data on a server that the client can access.

Can Angular be used with server-side languages like PHP and Node.js?

Yes, Angular can be used with any server-side language or framework. Angular runs in the browser and the server provides a REST API that Angular sends requests to and receives responses from.

Why do my routes break when deploying an Angular app?

The server needs to always return the index.html file for routes to work on refresh and navigate. So the index.html needs to be configured as the 404 document on the server.

Can my Angular app code be protected from being visible to users?

Unfortunately no. Since the JavaScript code runs in the browser, anyone can view the sources. Information that should not be visible should not be included in the code.

How are third-party CSS and JavaScript libraries used in Angular apps?

They can be imported via index.html links/scripts or installed via NPM and imported into TypeScript. For JS libraries without types, declare var or declare module can allow use.

Why was Angular 2 a complete rewrite and not an update to Angular 1?

Angular 2 was built with a different focus on building single page applications and a component driven architecture. It inherited some concepts but is almost entirely new compared to Angular 1.

Outlines

00:00

😅 Understanding Angular Versions and Terminology

This paragraph explains the history and evolution of AngularJS to Angular, clarifying that Angular 2+ is a complete rewrite and not backwards compatible. It introduces semantic versioning adopted by Angular and explains the meaning of major, minor and patch releases.

05:01

📝 Setting up an Angular Project

This paragraph emphasizes the need to use the Angular CLI for setting up Angular projects, explaining why options like dropping Angular into HTML won't work. It highlights performance reasons for compile-time vs runtime compilation.

10:02

📋 Recommended VSCode Extensions for Angular

This paragraph recommends the Angular Essentials extension by John Papa for VSCode, which bundles multiple other useful extensions for Angular development in one easy install.

15:03

🔍 Debugging Angular Apps

This paragraph provides Angular debugging tips - carefully reading error messages, using console logs, and leveraging source maps in dev tools for run-time debugging with breakpoints.

20:05

🔗 Communicating Between Components

This paragraph explains different ways for components to communicate and pass data in Angular - property binding, services with RxJS subjects, and centralized state management with ngrx/redux.

25:06

🌐 Connecting Angular Frontends to Server backends

This explains Angular only handles the frontend SPA, so any backend language/framework can be used as long as it provides a REST API for Angular to interface with.

30:08

💾 Persisting State Across Page Reloads

This paragraph discusses options like local storage or a server database to persist state instead of sessions, since refreshing Angular app resets state.

📦 Hosting and Deploying Angular Apps

This paragraph clarifies compiled Angular apps are static files that can be hosted on simple static file hosts, not requiring Node, PHP etc. It also covers configuring routes.

Keywords

💡Angular versions

The video discusses the different Angular versions, from AngularJS (Angular 1) released in 2010 to the complete rewrite Angular 2 in 2016 and newer semantic versioning releases up to Angular 6. It explains the backwards compatibility of newer Angular versions and long-term support for older versions like Angular 4.

💡Angular CLI

The Angular Command Line Interface is a tool for generating and building Angular projects. The video recommends using the CLI for its active development, optimization capabilities, and flexibility through ejecting. It sets up workflows like compiling, bundling, and minification.

💡Debugging

Debugging Angular applications can be challenging. The video advises reading error messages carefully, using console logging, source maps in dev tools to bridge to source code, and Angular-aware tools like Augury for analyzing running apps.

💡Component communication

Passing data between Angular components is discussed. Property binding only works parent to child, so services and subjects are better for distant components. NGRX Redux implementation centralizes data flow.

💡Server-side code

Angular runs client-side only. Any backend logic on servers to handle security, performance, databases, etc can use any server-side language like PHP, Node, Ruby. It just needs to expose a REST API for Angular.

💡State persistance

Angular doesn't maintain server sessions. State must be stored client-side in local storage or server database across page reloads. Local storage is simple key-value storage in the browser.

💡Hosting

Built Angular applications produce static files that can be hosted on any simple static file server, not requiring executing server-side code. So specialized static web hosts are sufficient over heavyweight servers.

💡Routing issues

Client-side routing with the Angular router instead of server routes can cause issues on refresh. This is fixed by configuring servers to return index.html on 404s so routing can take over.

💡Security

The video acknowledges JavaScript code is visible in browsers, so sensitive logic should be kept server-side. Code can be obfuscated but not hidden. Information exposed client-side should not matter if visible.

💡Third-party libraries

CSS libraries can be used via CDN imports or CLI config. JavaScript libraries work via script tags, CLI config, or TypeScript imports. The last may require declaring types if definitions are missing.

Highlights

Angular 2 was a complete rewrite of AngularJS 1.x, with a different focus on building single page applications using a component architecture.

Angular adopted semantic versioning, with major, minor and patch releases indicating new features, enhancements or bug fixes.

The Angular CLI provides a flexible workflow for building Angular apps, with capabilities like bundling, minification and optimization.

Use the Angular Essentials extension in VS Code for better autocompletion, syntax highlighting and more when developing Angular apps.

Carefully read Angular error messages for clues on debugging issues, and use console logging and source maps to further inspect application state.

Use services like subjects to communicate between components not in a direct parent-child relationship.

Persist state across page reloads with local storage or a server database, not sessions.

Angular runs client-side only, so use any server-side language like Node or PHP by exposing a REST API.

Add third-party CSS/JS with CDN links, CLI config imports, or script tags in index.html.

Configure servers to return index.html on 404s so Angular router can handle routes.

Angular output is visible in browser, so avoid putting sensitive info in client JS.

Use declare var to add typing info for untyped third-party JS libraries.

Host compiled Angular artifacts on any static file server like S3 or Firebase.

SPA routes don't match servers, so configure 404 fallback to index.html.

Can't hide source code, so ensure publicly exposed JS doesn't reveal secrets.

Transcripts

[Music]

welcome to this video where i want to

dive into some common angular questions

now to be honest these are just the

questions that came into my mind when i

thought about which

questions i see a lot if you got other

questions

please share them in the comments of the

video i

probably won't be able to answer them

all there but i will note them and i

might do

another video of this kind in the future

and with that let's just get started and

see which questions i got

let's start with one thing that

sometimes leads to a lot of confusion

the angular version jungle we got

angular 2

4 5 6 soon at least

so what are all these versions about

well let's have a look

in the past we had angular 1.

it was released in 2010 and it was not

the first

javascript framework manipulating the

dom

but it still started a little bit of a

revolution you could say

it suddenly allowed people to create

single page applications

it made controlling the dom and

dynamically rendering content there

so much easier and it still also had

issues performance could become an issue

in bigger apps

and this was one of the major reasons

why the team decided to do a complete

rewrite of angular and release angular 2

in 2016. now the road to angular 2 was

pretty long

a lot of versions were released in

between a lot of beta versions

but in the end we had a brand new

framework that still allows us to create

engaging

user experiences in the browser but with

a different focus

angular 2 and all the versions

thereafter focus on creating

single page applications and they are

highly component driven

so like in react and so on you build

components

so the key takeaway here is that angular

2 has nothing in common with

angular 1. it's a complete rewrite

and it inherits some concepts but the

majority of things you use in angular 2

is brand new

or works totally different than it did

in angular 1.

now what about the other versions now

due to

that difference in the capabilities

we nowadays typically refer to angular 1

as

angularjs that's the name of the

framework nowadays

and angular 2 and all versions

thereafter

are simply referred to as angular just

angular speaking of that why

do we have more version than just

angular 2 because the

angular team adopted semantic versioning

which means

there are major releases minor releases

and patch releases

so maybe they're just fixing some bugs

maybe they're introducing

some major new features and the version

number indicates that

the important thing is angular 3 and 4

and so on

are not complete rewrites of angular 2.

speaking of that we never had an angular

3 due to

internal version differences with the

router and so on

so angular 4 was the next release and

thereafter we had 5

6 and so on now at the point of time

recording this

angular 6 isn't out yet but new versions

will come out

every few months due to that semantic

versioning

and you can actually see a schedule of

past

and future angular versions on the

official angular github repository

a link to that schedule can be found in

the video description

there you see the more recent versions

that were released in the past

and when we will see angular 6 and 7

approximately now again if you look at

these versions it looks like

everything you learn will be well stuff

you don't need once the new version is

out

and that is not the case the version

upgrades

are backward compatible and thus far

until angular 5. we had no upgrade that

introduced

any major braking changes at all and

there is a long-term version support

so version which will receive security

patches and so on

even if it's a bit older currently

that's angular 4.

so you can find more information on that

page the key takeaway is

angular 5 6 7 and so on is the new

normality

because it's not a new framework every

time it's just an update

just as we have react 16 17 15 and so on

now that we understood the different

versions of angular let's have a look at

how we create

angular projects now chances are you

already know this

and i'm not going to show you the exact

steps here you might know that there is

the angular cli you can use

the question is do i need dcli do you

need to cli

i get this question a lot people

especially people coming from

jquery or angular 1 are used to dropping

the angular import into their

html files and starting to use angular

unfortunately that does not work with

angular 2 plus

one of the major reasons is that we use

typescript instead of vanilla javascript

so the language in which we write our

code doesn't run natively in the browser

obviously we need a compilation step in

between and

whilst theoretically you could do that

compilation

in the browser it's not really

recommended it's a big performance hit

we also have components and templates

that use the angular

template language this also needs to be

compiled

by angular so from javascript to

javascript but

to a different javascript which has a

meaning to angular

and this could also happen in the

browser but again for performance

reasons

it's recommended to do this on the

client so in your on your development

machine actually

and we also probably want to employ some

optimizations like

minifying our code and so on this also

should be done

during development or at the end of it

right before shipping the app to

production

so whilst we do have all these options

of running the

typescript compilation in the browser or

running the angular template compilation

in the browser

this does not work so we want to do it

in the development setup in the

development

workflow and the same is true for

bundling minifying implementing lazy

loading and stuff like that

now for that we use tools like webpack

or

typescript of course also minification

optimization tools

and babel possibly to also transpile

um some features though here we use

typescript so probably not

there are more tools still included in

all of that for all the optimizations

and all these

steps and you can set up such a workflow

on your own what you can't do is

just drop it into the browser and use it

without taking a huge performance hit at

least

but the easiest way really to get around

all of that is to use the cli this cli

gives you a really good

and flexible workflow you can eject from

a cli

project to get access to the underlying

webpack config

so it's not a log in but starting with

it

creating projects with it and using its

capabilities

really is a good approach because the

cli

team which is part of the angular team

kind of is

actively working on the cli and keeps on

improving it

to give you ever better angular

performance

ever better angular apps generated by

the cli

so i can only encourage you to use it

you might not

find another github boilerplate

that is that actively developed now that

we

had a look at the cli let's say we

opened angular in

our editor and let's say that editor is

visual studio code

i often get asked which extensions i can

recommend for it

and i might not be the person with the

most extensions

i am a fan of only using a few and for

angular there really is one major

extension i want to recommend

and that is the angular essentials

extension from john popper

this is a extension that bundles a lot

of other extensions

so if you go to the extensions part of

visual studio code and you open that

extension

you see the other extensions it includes

and these extensions

really make developing angular apps much

more fun you get better

auto completion you get nice syntax

highlighting

all that fun stuff with the installation

of just that single extension so

definitely have a look at that

let's leave the setup world and let's

have a look at

the real development problems we face

when creating an

angular app and debugging angular apps

tends to be one of the hardest things

from my experience

so from the questions i saw

and one thing that really isn't done

correctly a lot of the time

unfortunately is reading the error

messages

angular error messages became a lot

better

and often they give a clear hint about

what is wrong or at least where you

should look for an error

sometimes the error message gives an

incorrect error but

still points at the correct file and you

find another syntax error that

led to the incorrect error message so

read the error messages and try to

incorporate the information you find in

there

let's have a look at a view here are two

error messages

the first one says uncaught error

template parse errors

app product is not a known element

you often get that if you forget to

declare your custom components

so if you didn't add them to the

declarations array in app module

make sure that you check if that's the

case if you did

add them to declarations and you use

multiple angular modules

make sure that they interact correctly

with each other

that you don't use a component in a

module

where this hasn't been added to

declarations that's another common error

source

so read these errors and then dive into

that part or into that file it's

pointing to here in this case to the app

product component which somehow seems to

be unknown

check the selector for typos maybe you

have the wrong selector set up in the

component decorator of the product

component

these are the things you should have a

look at take these messages seriously

and if you can't find a solution google

them you find a lot of

github issue threads a lot of stack

overflow threads

for all kinds of common error messages

besides reading error messages correctly

also use good old console log debugging

it's not the best debugging approach in

the world

and it simply means that you put a bunch

of console logs

into your code and you log different

objects properties

things you want to have a look at you

see them in the javascript console in

the browser

and see the values these properties and

so on hold

at certain points in your app this is

not

the best way to thoroughly debug an app

but to get a quick insight into the

state of something into the state of

your app

at a given point this is a good solution

a better solution of course is to use

the source maps the cli project gives

you automatically

source maps are little files the

chrome or general the browser developer

tools can use

to create a bridge from the compiled and

optimized

javascript code running in the browser

to your original files which are of

course easier to read for you

so use these source maps in conjunction

with the browser dev tools

let me show you how this works here is a

broken angular app and we got an error

now let's have a look at the source code

from within the dev tools

we can simply click on sources here

and there in a cli project which creates

these source maps i was talking

about you should find that webpack

folder

if you access it in the subfolder in

there you should find a folder

which in the end replicates your app

structure so where you find a source app

folder

with your actual typescript files

and now in these files you can even set

breakpoints to stop at certain points of

time

to get an insight at the value of a

certain

property for example so this is really

something i can recommend

having a look at because this is a

powerful tool

that allows you to take an in-depth look

at your app and dynamically debug it

with breakpoints with all the features

the developer tools gives you

in your typescript files even though

these are not the files running in the

browser so this is really powerful

use these tools and you get that for

free in a cli project

you can just dive into your source code

like this

there also is another tool besides the

already implemented browser developer

tools

the browser ship with and that's augury

that's a chrome

extension which you can install from the

chrome extension

store it's free of course and this is a

tool

that gives you detailed insight into

your app

at runtime the difference to the browser

developer tools

is that augury is aware of the angular

architecture and therefore it gives you

a good overview over the different

components in your app

something you don't see easily in the

browser because the rendered dom doesn't

contain these

it gives you access at the properties of

your components the state of them

it gives you access to injections

happening in your app

so a detailed look at what's happening

at your

in your app at runtime being aware

of the angular concepts like services

like dependency injections on so

definitely have a look at this too

you access it from the developer tools

thereafter and you can simply analyze

your page with it as you do with the

normal developer tools

the ones implemented in the browser so

you do with that

but augury offers some extra features

that are tailored

for angular and if you're using ngrx

you should also have a look at the redux

dev tools which you can connect

to ngrx you can find instructions on

that

on the ngrx documentation and this

allows you to have a look

into your ngrx store so these are the

things i want to bring to your attention

to dive deeper into

these are a lot of great tools that help

you debug

your angular apps okay let's leave the

world of errors

and let's have a look at something else

i get asked a lot how can i pass data

from component a to component b

so here is a concrete setup with the app

component a product component and a

product

component now one easy way to pass data

around

is by property binding with that input

and so on you pass data from

app component to products component and

maybe then data from

products to product component property

binding

is only possible from parent to child

component so only one level at a time

therefore reaching out from app

component to product component

is not possible if you wanted to do that

you would use a service instead a

service in between

possibly or typically to be honest

with the rxjs subject which is like an

observable but one where you can emit

events on your own

with next so where you can emit an event

let's say from the app component

and where you then subscribe in some

other place of your app and

that place could also be a service by

the way or something like that

now here it would be the product

component and all of a sudden we have a

connection from app component to product

component

through the service and the subject and

this also works the other way around

we can emit our custom events to pass

data up

from a child to a parent component but

emitting an event from product component

to app component directly is not

possible

but again we can use a service with a

subject to emit an event

and listen to it in another component so

this is how we can communicate between

components

and pass data around now important if

you're using rxjs subjects

don't forget to unsubscribe in the

components where you do subscribe in

ng on destroy to make sure you're not

running into memory leaks

so you need to store that subscription

you're creating with the subscribe

method in some property

and unsubscribe from that in the ng

ondestroy lifecycle hook

and let me all that there is one other

way of communicating and passing data

around

and that is using ngrx which is

basically a redux

implementation for angular apps you want

to use

angular with a server-side language

because angular runs in the browser

so a lot of the logic you want to

execute can't be executed there because

it needs to run

on a server for security reasons for

performance reasons

or because you can't perform that action

in the browser like accessing files

or because you want to store data in a

server-side database

now i often get asked can i use angular

with php with larawel which is a php

framework

with node with ruby with anything and

the answer is yes you can

angular in the end creates the

client-side app

a single page application running in the

browser

it doesn't care about your server

because it doesn't run there

so you can build your server-side

back-end with any language and framework

you

want angular is only good at creating

spas

so it only creates that it only

runs that and your server-side back-end

now needs to be a restful api so

not a back end where you render views

like with laravel's plate templating

engine you're not doing that

angular is responsible for the front end

your backend is a restful service

sitting there providing api endpoints to

which angular can send requests

through its http client and

where it also of course receives

responses and on the server you can then

implement any logic

including a database if you want that

you want

you communicate to angular through the

restful

api another question i get a lot

is can i use redux and i already kind of

answered this earlier in this video

yes you can with ngrx now

redux solves one problem that we have a

lot of components communicating with

each other and which

with services and we get a lot of

complex interactions that become hard to

maintain especially in bigger apps of

course

redux solves this by offering us a redux

store so one central place in the app

where our data is stored

and where we can connect our different

parts of the app too

so components can then receive data from

the store and dispatch actions to the

store

and we have a clear flow of data and a

central place where everything gets

stored

and that is redux and we can use it in

angular

since redux isn't tied to react you

could implement redux just like that in

angular

or you use a specific implementation of

it called

ngrx now this is not a must as i said

you can implement the normal redux

you're on your own

but you can also use ngrx to get an

approach that nicely fits into the

angular world

and follows many of the concepts angular

already follows

so ngrx is something you want to google

and you want to learn

if you want to implement redux in your

angular apps

speaking of state i also see the

question

my state is lost after i refresh the

page

and with that people mean that unlike on

traditional web apps where you often

have sessions to manage the user state

on the server

and therefore if the user refreshes the

page he's still logged in and so on

and client-side apps this is not the

case if you refresh your angular app

it really resets it doesn't keep the old

state

because no server is involved you might

have that restful api you are sending

data to

but that is a stateless server it

doesn't store

anything any session information from

your client

so you have two ways of storing state

across page reloads then

you can work with local storage which

is a client-side storage storage in the

browser

or with a server side database you're

still not going to be using sessions

then

but you can persist some general user

data there of course

like the orders of a user stuff like

that for

session-like approaches you would have a

look at local storage though

so local storage runs on a client so

it's not fully under your control

with that i mean that if the user clears

the cache manually

uninstalls the browser or something like

that this is of course gone but the same

is true for cookies i guess

since they're also living on a client

it's accessible by javascript only

so there's a good and a bad thing bad

thing is if your page is vulnerable

to cross-site scripting attacks by

default

angular should give you a good

protection against that though

if it is vulnerable then people can

access your local storage

and possibly extract json web tokens

from there

on the other hand it's not vulnerable to

csrf attacks for example so that is the

upside of that

it's a simple key value story that's all

important to keep in mind

that means that well you can't store

complex data in there you can't store

images in there really just simple data

but for

keeping track of a user session for

example of a

json web token and so on this is perfect

now the server side database is better

for

data that needs to be under your control

like

the user itself the user data you store

stuff like that it is accessible from

the server only so the client can't

access it which of course is an extra

security layer

and of course you can use any database

you want and you can store whichever

data and data types you want there for

and this is how you persist state or how

you store

data there is no session you do use

these two things you can also use

cookies i should add

but you don't use sessions that's the

key takeaway there is no session stored

on the server and no session keys stored

in a cookie on the client

can i host my angular app on hiroko and

so on that's another question i see a

lot

let's understand how hosting an angular

application works

if we use the cli or any other build

process

in the end once we're done we're going

to build

our project which means we generate a

bunch of build artifacts

which is the index.html file and a lot

of javascript files typically

the bundled and optimized javascript

files that make up our app so these

are the build artifacts we might of

course also have some style files

these need to be shipped to a server and

these are just static files if you have

a look at that

there's no server set code there's no

php file the javascript files are not

going to contain any node.js code

so there's no need to execute code on a

server

and therefore a static host like aws

s3 or firebase hosting is all you need

a static host is basically a file

storage that also can accept

http requests and return your files but

where you don't run

any server-side code so can you host

your app on hiroko

yes you can but since hiroko essentially

requires you to create a app with some

server side language

you create a node.js app just to serve

the index.html file in the end and the

same might be true for other languages

so that might be overkill google for

static web hosts instead

to find fitting hosts for angular apps

speaking of deployment another question

i see a lot is

my routes don't work after deployment so

here's the setup

we got the user you and the server

you enter a url in the browser and your

angular app loads a page with your

angular uploads i should say

you then navigate to the products page

there by clicking on a link

and that page loads this is done through

the angular router

because there you register the different

pages and since you only have one

real page the index.html file it's not

really loading a new file from the

server

angular just re-renders your page to

give you the illusion of loading a new

page

and it can do that because it

essentially listens to the clicks

on your links when you use the router

link directive

and well triggers the angular router

your server doesn't have any routes

if you refresh the page now you get a

404

error because if you refresh the page

the angular router has no chance of

taking over

because refreshing means you send a new

request to the server

and since you have no routes there

except for the default route which

returns the index.html file

well you get an error the solution is

you need to always load the index.html

file so on your server you need to

define the index.html file

as your 404 error document

this then allows the router of angular

to take over and handle that request

and possibly find the route and then

render the correct page

and if you want to have a 404 error page

for routes you don't handle in the

angular app

either you would need to set it up in

angular still

here's another question i get a lot

everyone can see my code

it's true everyone can see your code if

you go into the browser and

open an angular app and you go to that

sources tab as i showed you earlier in

this video

well you can inspect the code and

everyone can do that you can do that for

other apps and other people can do it

for your app

you can't protect against it javascript

runs in the browser

it's not compiled not pre-compiled so

it's visible to everyone

and you can't do anything about that the

only thing you can do is

be aware of that and don't put sensible

information

in there make sure you only have code

and information in that javascript file

that

doesn't really matter if other people

can read it you can make it harder for

people to read it

but you can't prevent it i also often

see the question

how you can use third-party css

libraries

like bootstrap and angular apps and

there are two major approaches

the first one is simple you throw a link

ref in your index.html file

either pointing to a local file you

downloaded or to a file hosted on some

cdn

the second possible approach is to

either

download the css file the css library

file you want to use

or use npm install library to install it

and then add an entry to the styles

array

in the angular cli.json file

and that entry simply needs to be the

path

seen from the source folder on so not

from the root folder but from the source

folder of your add-on

to that file you downloaded or you

installed

this is how simple you can add a css

library

and the same for third-party javascript

libraries

you have three possibilities here you

can put a script source

import in index.html

and you can also point to some cdn here

you can use npm install or download the

file and add an entity to scripts array

or you do the same but directly import

it

into your typescript files by adding an

import statement at the top

you can of course import other

typescript files and you do that all the

time in angular apps

well turns out you can also just import

other javascript files

so that is a perfectly fine alternative

then you don't have to add an entry to

scripts

to the scripts array in the angular cli

json file because if you just add an

import statement in one of your

typescript files

in the end this imported javascript file

will be included

in the final bundle so then you got it

in your application too

one important note though since you're

using typescript in angular

there are javascript packages that might

be unknown to typescript

because they don't ship with a so-called

types declaration file

a file that basically translates the

javascript

functionalities to typescript if your

downloaded library doesn't have such a

file

you have to add something to the

sourcetypings.dts file you should find

in your angular projects

or which you can create if you don't

have it and there you add that declare

module

and then your library name line here

and thereafter when importing it in

other javascript files

typescript should understand the

features of that library

you need to add an import statement then

though

with the scripts array approach this

will not work

there you would instead need to add

declare war

and then any object you use from a

library of type any

at the top of the typescript file where

you want

to use it let me show you an example

here is a very simple project i created

and now in there i will install a new

library with the npm install

and i will install lowdash which is a

library providing a couple of utility

functions to javascript

i'll add dash dash save to download and

install it

and also add an entry in the

package.json file

now once this is finished let's go to

node modules

and let's have a look at what we got so

here's lowdash and if we open it

we see a bunch of javascript files in

there because it's

shipped in a way that we can import just

what we need and we don't have to import

all the files

one thing that's missing though or

should be missing at least is such a dts

file

so what can we now do how can we use low

dash

for low dash and for a lot of javascript

libraries to be honest

a good approach would be the following

one let's say we want to use it here

in the constructor of our app component

there i will create a new array

one two three and i want to shuffle that

and low dash has a function for that

so normally i can use the low dash

symbol the underscore

and call shuffle and pass my array

and i could output the result of that

operation

now if i do that and i run ng-surf

we already can see it here in the file

that this underscore isn't recognized

typescript doesn't know and therefore

during building it gives me an error it

shows me that it

can't find that name now we can

import low dash so we can import

low dash like this and this would be the

correct import statement but

still it would fail now what i said is

that you can now declare

a var underscore so the symbol you're

going to use

and of type any so that you're allowed

to call anything

in that typescript file and now the

error is gone because now we're telling

typescript

it's okay i know that this symbol is

available

and you don't need to care about what i

can do with it

and now if we go back to our running

application

and i reload the page we see the

shuffled array so we're using low dash

here

we're importing it like this and we

added declare war

and the alternative i mentioned would be

to go to the typings dts file

and add declare module

low dash like this

with that it should also work if i save

this and here in the app component file

i removed the declare bar low dash thing

and now i can import underscore from low

dash

so this is now an alternative and with

that

it still works well

here it now gives us a shuffled result

and

this is another way of doing this here

basically using that import statement

where i say

i'm importing a specific symbol from

that file so these are

the common approaches you use for using

javascript packages or

files libraries a lot of libraries

already ship with these dts files though

and have

es6 imports and exports so there you

just import something from that library

and you don't need to declare the module

you can basically find it out by

checking out the github repositories

of whichever libraries you're going to

use

and that was basically it i hope you

enjoyed it i hope this was helpful

share any other common questions you see

you know

in the video comments and i will see

what i can do and i hope to see you

again in future videos

on my academic channel so see you then

bye