NPM scripts are a great way to run common actions in your Angular application. In fact, Angular-CLI sets up your project with some predefined scripts tailored for it. By opening the package.json file in your project, you can find the scripts configuration, which should look very similar to this:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
From here, you can see that ng serve is mapped to the start command in NPM. The start script is a special type of script command that is available by default in NPM, whereas other commands, such as lint, are nonstandard, and, therefore, must be called using the run command in NPM:
npm start
npm run lint
Editing these NPM script commands are a great way to automate passing flags to your application configuration. For example, to make Angular-CLI automatically open your default web browser with your application during the startup, you could try updating your start command, as follows:
“start”: “ng serve --open”,
Now, whenever you run npm start, your Angular application will automatically boot up with your custom options, and a web browser pointing to the correct host and port will open.
Cannot read property 'config' of null
TypeError: Cannot read property 'config' of null
There are many hidden dot-files in a newly created Angular application. If you created a new project and moved its app contents and structure to a new location for reorganization, this error means that you have missed or accidentally deleted the hidden .angular-cli.json file. If you are encountering this error after your project creation, it probably means that the project wasn’t created in exactly the directory you wanted. Instead of moving the project, an easy fix is to provide the --directory flag when you create a new project:
ng new my-angular-project --directory my-angular-project
Now that our application is running, let’s take a look at the project structure of the newly created Angular application. Your project structure should look very similar to the following example:
There are a lot of files in a new Angular application. Many are specific configuration files, which we won’t touch on in this book. Most of the content we will work with in this book will be focused on the /src directory and the content within it. This directory is the default location for virtually all of our Angular project structures, which we will start stubbing out in the next section.
However, before we continue, you may wish to fulfill the age-old tradition of creating a Hello World app. Simply open the /src/app/app.component.ts file to change the title property to 'Hello World!':
export class AppComponent {
title = 'Hello World!';
}
After saving, your application will automatically reload using live-reload to show your changes in your web browser. Live-reload is another feature that comes out of the box with Angular-CLI that makes development much easier to iterate and see changes rapidly in the frontend of your application.