How to Use Angular CLI to generate an Angular 5 Project tutorial, angularcli

How to Use Angular CLI to generate an Angular 5 Project tutorial, angularcli

If you are using angular but do not make good use of angular cli, you can refer to this article.

Angular CLI official site: https://github.com/angular/angular-cli

Install angular cli:

npm install -g @angular/cli

First, make sure that you have installed a newer version of nodejs.

Angular CLI is introduced in the following aspects:

• Generate a project
• Parameter Introduction
• Configure and customize the CLI
• Check and fix code
• Generate a new project:

ng new my-app

This command will generate a new project calledmy-appAnd put the project file inmy-appUnder this folder.

Do not forget to enter the my-app directory when the project is generated.

Another option is to use the -- dry-run parameter:

ng new my-app --dry-run

Using this parameter will not generate a project, but will print out which files will be generated if the project is created.

Another common parameter is--skip-install:

ng new my-app --skip-install

This command does not run after the project file is generated.npm installThis action.

However, you still need to manually executenpm install.

You can use the -- help parameter to view the help information:

ng new --help

Next, I want to generate a project without executing npm install:

This is very fast, and then use my favorite IDE VSCode to open it:

code .

Check the entire project structure and package. json:

The following are some predefined project commands in scripts:

Start indicates running the project. You can run npm start or ng serve directly.

Npm build/ng build is to execute build .......

I will not introduce them one by one.

Next, let's take a look at dependencies:

We use angular 5.2.0, And the ^ symbol above indicates that the version number we use is greater than or equal to 5.2.0, but it must be smaller than 6.

The bottom is devDependencies, which is a tool library used during development. You can see that angular cli is in it.

Next Look At The angular-cli.json file:

Angular-cli.json:

It is the configuration file of angular cli for this project.

The prefix is interesting. It is the default prefix of all generated components and Ves ctives.

You can check app. component. ts:

Its prefix is app.

If you want to change the default prefix, you can modify the prefix attribute values in the angular-cli.json file, if you change to sales, then the prefix of the components and directives generated later is sales. however, it does not work for generated components/directives.

So how can you ensure that the prefix of components/directives of the generated project is what you want?

Is another parameter -- prefix:

ng new sales-app --prefix sales

The selector of the component generated in this example is:

Prefix in the angular-cli.json file:

The generated project shows that the spec file is also generated. What if I don't want my project to generate the spec file?

Ng new also has this parameter -- skip-tests:

ng new my-app2 --skip-tests

We can see that no spec file is generated.

Ng new has the following parameters:

I have introduced several others, such:

-- Skip-git: it is not initialized as git repository when a project is generated. It is initialized as git repository by default.

-- Directory: You can set the generated directory, which is the project name by default.

-- Style: You can set the style type. The default type is css. For example, you can change it to scss.

You can also use -- inline-style to set the style to the intra-row style. The default value is false.

Next I will generate a project that uses the scss style:

The styles. scss and app. component. scss files are generated. angular cli not only generates scss files, but also compiles them.

View the angular-cli.json, You can see below the file is the scss style file:

In this way, the default style file of the component generated later is scss.

Finally, I want to introduce this parameter, -- routing:

If you want to manually configure the route for the project, you still need some steps. Therefore, you can use this parameter to directly generate a project with the route configuration.

Take a look at the project route file:

Check the app. module again:

You can see that the import AppRoutingModule.

In summary, ng new parameters can be used together as command parameters when the project is generated, some parameters can also be modified by modifying the angular-cli.json file after the project is generated.

We recommend that you:

Use the -- routing, -- prefix, -- style, and -- dry-run parameters when generating a project. first, use the -- dry-run parameter to check which files are generated correctly. After confirmation, remove the -- dry-run parameter to generate the file.

Next I will generate a project and execute npm install:

After the command is executed, the following project structure is displayed;

There is the node_modules directory, that is, all the packages have been installed. Now I can run the project:

ng serve -o

The-o (-- open) parameter indicates to open the default browser when running the project.

Check the browser http: // localhost: 4200:

The advantage of ng serve is that when the code file changes, it will be automatically re-built and refreshed in the browser. You can try it.

Another method for configuring CLI ng set.

I have introduced how to configure cli by using ng new parameters and modifying the angular-cli.json file. Below I will introduce how to configure cli through ng set <attribute> <value>.

For the current project, the default style file type is scss:

If I run the following command in the project directory:

ng set defaults.styleExt css

The settings of this project will change:

If the-g (-- global) parameter is used, a global configuration is performed, this configuration will be saved in a file (this file does not exist if there is no secure configuration). This file should be in the users/xxx directory, mac should be in the home directory.

It does not affect existing projects, but if the new project does not specify the ng new parameter, the global configuration will be used by default:

Lint:

Use the command ng lint.

First, you can view the help:

ng lint --help

-- Fix: Try to fix lint errors.

-- Format: the output format of lint.

First I executed ng lint for the above my-app6:

No problem.

Then I intentionally wrote several errors/non-standard statements:

Then execute ng lint:

We can see that these errors are listed in detail.

Add the formatted parameters:

Now we can see that the display of lint results is more intuitive.

Run ng lint -- fix below:

After the execution, the lint error is reduced to one. Check the Code:

The above section describes how to use Angular CLI to generate an Angular 5 project. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in time!