Other Files/Folders in MyFirstAngularApp

Bytneustaedter

The src folder is where the code lives, so that’s our primary focus, however the other parts of the project also have relevance, so here’s a description of what they are.

Angular applications consist of a number of different files in the root folder as shown in the screenshot below. Aside from the “src” folder which is covered elsewhere, all of the files and folders below are out of scope for the fundamentals course, but feel free to read and learn as much or as little about most of the other files and folders as you want.

  • the .angular and .vscode folders are used by Angular CLI and VSCode, and thus we will not be touching these folders in this fundamentals course
  • the node_modules folder is where 3rd party libraries are downloaded and the various items within them are included when we build the application. More on this in a bit.
  • .editorconfig is a rather interesting file. Although it’s part of the project, it’s really meant to allow different developers working on the same project to keep their own coding styles (indentation, line endings, stuff like that), so for now we’ll just ignore this file and possibly look at it in a more advanced Angular course.
  • .gitignore, now this is an interesting file. If you’ve never heard of it before, GIT is probably the most used distributed version control system available today, so once we get to talking about version control, we’ll definitely be coming back to talk about this file. For now, all you need to know is that this file tells the GIT version control system what folders and/or files to include/exclude when checking your code into GIT. We won’t be doing this in the fundamentals course, but rest assured it’s a critical part of the development process and will be covered in a later course.
  • angular.json is the workspace and project configuration file for MyFirstAngularApp. It describes how the app is put together, where the code lives (src folder by default), etc. Again this is a rather advanced file, and for our purposes, likely will not need to be touched.
  • The package.json and package-lock.json files, now these are files we will look at from time to time, well the package.json file anyway. Remember the node_modules folder? Well the package.json file governs what shows up in this folder, while the package-lock.json file ensures the right versions and dependencies are locked down so as not to mess up the build of our application.
  • README.md is just what it says it is, it’s a readme file that describes the project and gives a tour of the application, possibly how to build and/or run it, etc. We’re just building sample applications right now, so we won’t be updating this file, but know that it’s a great way to learn more about a project in the real world, what it does, how it’s laid out, and how it operates.
  • tsconfig.json and tsconfig.spec.json are typescript configuration and specification files, that provide typescript and angular compilation information used by the tsc application (typescript compiler).
package.json: A Closer Look

So package.json is used by the Node Package Manager (npm) which comes with NodeJS. NPM downloads and manages 3rd party packages such as the Angular compiler, Angular Forms, rxjs, etc.

It also downloads and manages development dependencies, like a local copy of Angular CLI which doesn’t actually get built into our application.

This local copy of Angular CLI needs to be there in case the global version of Angular CLI we installed in Windows gets updated (changes versions). Since our application is designed to work with a specific version of Angular CLI, we wouldn’t want a newer version of Angular CLI to come along and mess up our application.

Thus NPM keeps a local copy who’s version matches the version the project we’re working on expects, even if the global version changes. There’s some magic in there so that the right version always gets used. No need to worry about it, but it’s good to understand that this is what NPM does for us.

By clicking on “package.json” in the folder tree, we can take a closer look at what exactly is in there.

  • name is the name of our application without any whitespace (no need to touch this)
  • version is the version of our application (no need to touch this)
  • scripts let’s us setup short cuts for stuff we commonly do and run them using the command “npm <script>“. We don’t really need to use this but notice that the “start” script runs “ng serve“? Guess what that means? You can type “npm start” in the terminal window and it will run “ng serve” for you. Not really useful to us, but definitely handy for developers when they have more complex things going on
  • private is set to true by default to prevent accidentally publishing our application to NPM’s public repository. What is this? Well, NPM permits publishing applications to it’s public repository for others to see and use, so to prevent us from accidentally doing so, by default applications are generated with private set to true, enough said here
  • dependencies is where the packages live that NPM manages for us, and the version numbers of those packages. Don’t worry too much about the version numbers for now, just know that any 3rd party (NPM published) package you want to use in an Angular application must be added here and NPM will grab it and put it in the node_modules folder so we can include it in our application and use it
  • devDependencies works the same way as dependencies, except things in this section are NOT included as part of the compiled applicaiton, they are simply tools used during development (thus the dev prefix), and if you noticed, this is where our local reference to @angular/cli specific to our application lives