How to use Angular cli

This article introduces the knowledge of "how to use Angular cli". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. What is Angular cli?

It is a command line interface tool that can be used to initialize, develop, build, and maintain Angular applications. [recommended for related tutorials: "angular tutorial"]

two。 How to install

Download nodejs without npm

Https://nodejs.org/en/download/

Npm install-g @ angular/cli

If you uninstall, you also need to bring-g.

Npm uninstall-g @ angular/cli3. How to use

New | n means n is the abbreviation of new. The effect is the same as below.

3.1Create a project (new | n) ng new my-project

It creates an angular base project and downloads the dependent running project, with a default port of 4200.

Custom content that you may need to use

The usage is like:

Ng new my-project-xxx=x

The following unspecified default values are all false

Parameter meaning`-- force= truefalse``-- routing= truefalse``-- skipInstall= truefalse``-- skipTests= truefalse``-- force= truefalse``-- style= cssscss`-packageManager=npmyarn--prefix=prefix specifies the prefix (component, instruction) of the selector. If-prefix=dep is passed, the selector of the component will become dep-xxx.

Ah, there is no customization at the time of creation, how to fix it? Change it directly in angular.json ~

3.2 create a new file (generate | g)

Create a new base file with default code snippets. For example, ng generate service demo, a new demo.service.ts is created in the current folder.

Command function abbreviated ng generate module xx New Module ng g m xxng generate component xx New component ng g c xxng generate directive xx New Directive ng g d xxng generate service xx New Service ng g s xxng generate pipe xx New Pipeline ng g p xx

There is an easier way to do this:

Download the Angular Files plug-in from vscode and search alexiv.vscode-angular2-files to find it. Where you want to create a point. It's great to use. Later, I will write a plug-in for vscode to develop angular.

Run the project (serve | s) configuration meaning-host=xx sets the host address of the application, according to which others can access the application you started. Xx can be your ip or 0.0.0.0--open=true | falsetrue automatically opens the page after starting the project. Abbreviated: ng server-o--port sets the startup port number to avoid starting multiple projects that occupy the same port and cannot be started-- proxyConfig=xx settings proxy file-- watch=true | whether false automatically rebuilds the refresh page when the code changes. The default is true--aot=true | whether false starts the project in precompiled mode. Default is false.

Disadvantages: the running time of the project increases.

Pros: sometimes there is no problem during development. If there is a problem after the package is launched, you can open it locally to debug the error. 3.4.Pack the project (build | b) configuration meaning-the relative path where baseHref=xxindex.html accesses other static resource files. It can also be configured in index.html or baseHref in .angular.json. -- aot=true | whether false starts the project in precompiled mode. Default is false, which is generally configured in angular.json-- optimization=true | whether false enables optimization of build output. -- configuration=xx specifies the configuration of the packaging environment-- prod=true | shorthand for false--configuration=production. True is packaged in the way of production environment, shaking tree optimization and other operations. -- configuration detailed explanation

When I need to type into different environment packages, I can use the following methods:

The following configuration has been made in angular.json:

{projects: {project-name: {architect: {build: {configurations: {production: {"fileReplacements": [{ "replace": "src/environments/environment.ts" "with": "src/environments/environment.prod.ts"}],...} Qa: {"fileReplacements": [{"replace": "src/environments/environment.ts" "with": "src/environments/environment.qa.ts"}],...} Sit: {"fileReplacements": [{"replace": "src/environments/environment.ts" "with": "src/environments/environment.sit.ts"}],...}} }}}

Different environments can then be packaged:

Qa: ng build-- c=qa

Sit: ng build-- c=sit

Prod: ng build-- c=production

C is the abbreviation of configuration.

3.5 Update Project (update)

Angular updates a large version in half a year, and it is very important to update the version in time. If you lag behind more than 1 version, the subsequent upgrade may be very troublesome (don't ask me how to know, ask me to jump off a building).

Upgrade from one major version to another, it's best to read the official upgrade guide before upgrading.

Ng update @ angular/cli@ ^ @ angular/core@ ^

Check what can be updated first.

Ng update

You can update individually or choose to update all

Ng update-all

If you are prompted to update some dependent packages with inconsistent versions, you can force the update

Package "@ angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires "> = 2.7.2)