Angular 2 Tutorial #4 - Core Files Overview

Hey ninjas, in this Angular 2 tutorial for beginners, I'll give you a whirlwind tour of the core file setup of our new basic project we created with the Angular CLI.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== PSD to WordPress Playlist ==========

============== The Net Ninja =====================

================== Social Links ==================

[michca]

Agular 10 with SASS please :)
Btw love your Vue Firebase Course. Really helped me out there

[imtiazuddin]

Typing the command "ng build" builds the dist folder. And as for the rest of the folders/files


Read this:
"Yes, the book is outdated.
There have been some special config files merely for the use of
SystemJS. Since the CLI now uses Webpack, those were gone, and so went
the config folder. The few remaining configuration files live in the root (angular-cli.json, karma.conf.js, protractor.conf.js).
The public folder is now an assets property in angular-cli.json. It's an array of strings. Each string can match files that will copied to the output folder (dist by default) as-is (for example *.config files get copied to dist/{filename}.config). If the string matches a folder name (assets for example), the folder itself will be copied with the same name (for example to dist/assets).
The typings folder was for a tool that has the same name
that loads TypeScript definition files for JavaScript libraries (the
files that provide autocomplete for non-TypeScript libraries). Now in
TypeScript 2, there's a new way to load those definitions, which is
loading them as NPM packages under the name @types (similar to how Angular 2 packages are under @angular), which TypeScript understands and loads by itself without other tools.
The green output ending with no errors means it's working fine
(warnings are OK, you might see them in production build output, another



FYI, those who are wondering. This tutorial just got outdated :|

[romaniaplus]

As usual very good and concise! Thank you!

[ignitesofthelp]

Can you please share your versions: angular-cli, angularjs, ts, node,
npm etc, because my code (for example in index.html) is showing
different.

[prashantsathambakkam]

So I installed node.js (version 7.7.4)

and the "app" only contains:

> e2e
> node_modules
> src

and other miscellaneous files

- .editorconfig
- .gitignore
- angular-cli.json
- karma.conf.js
- package.json
- protractor.conf.js
- README.md
- tslint.json

what do you suggest I do when you refer to folders that don't exist here?
is it even necessary anymore?

[SansPur]

Awesome vidz Ninja-san, but my directory is missing many of the folders that I can see in yours. I only have three folders ::
>e2e
>node_modules
>src
then some js, json a few other files reside in the root of the ninja-directory folder.

Can new folders be added without causing issues with the dependencies, or is there a fancy way of doing this with the cli and/or Node?

[thigrand]

Hey man, do you have some plans to make tutorial to webpack or/and react?:)

[mrgitau]

challenging since alot has changed since this tutorial was made but il press on and let you know if it worked fellow ninjas...

[joeburns]

Very difficult to see the files on the left. Fonts real small.

[jonasvirsila]

I have downloaded the npm but when i created a new folder with a file the dist isn't in it, why?

[sushispicelatte]

Do you have a Angular 4 series available?

[adityagautam]

there are two angular courses . which one to follow??

[namahshrestha]

My code looks a lot different. Looks like they changed the layout quite a lot.

[rujor]

What is the name of the package that shows those nice icons in the Tree View? :)

[returnZeroo]

I can't follow this series, because angular file structure has been changed and I'm completely begainer