Angular 6 CLI: Why You Need It And How To Use It

Hello!

The version of Angular 2.0.0 was released in September 2016. And immediately appeared a large number of approaches to building and building applications on this framework. On the Internet, you can find the Angular seed for every taste.

We also created our own Angular seed: we created a common project-template, ordered all the teams developing the front-end to use one application structure.

And in half a year, in March 2017, the version of Angular cli (cli-command-line interface) 1.0.0 was released. The idea, taken as a basis, is simply excellent: to systematize the approach to developing applications on Angular 2+. Standardize the structure of the application, create entities within the application, and automate the assembly of the application. These tasks and allows you to solve Angular cli, significantly saving your time.

In this article, I will show you how to switch to Angular 6 CLI.

Development with a custom project structure has many advantages:

  • Full control over the application;
  • The ability to customize web pack/gulp/everything else with all the features of your application.

There are also disadvantages:

  • If there are several projects, you need to ensure that their structure is identical;
  • It is necessary to monitor the update of the npm modules and libraries used (Angular and Webpack, for example, are developing very dynamically);
  • You have to integrate npm modules and configure the environment to work with Angular, connect hot module replacement (HMR), use the Ahead-of-Time (AOT) assembly.

Eliminate disadvantages in several ways, one of which is to create a common project-template. Identify the developer, who from time to time would be engaged in its update. Require all front-end teams to use the same application framework, applying the best development practices to your framework. In this example, this framework will be Angular, and the application framework is angular-cli.

At the time of writing, the release of the release of the sixth version with the integration of Webpack 4. Information about the innovations are many, mention only a few improvements:

  • Automatic creation of the component library;
  • The appearance of ng-update, which makes the support of projects on Angular cli even easier;
  • Integration with Webpack 4, and therefore, a smaller size of the final bands, a Significant acceleration of assembly time, etc. A full list of updates can be found here;
  • The ability to flexibly configure the Angular cli with Schematics.

I must also say that in the sixth version of angular cli, there are a lot of bugs. I will tell you about some of them. Some of them are associated with angular cli, some with Webpack 4. For example, some popular loaders (Webpack loaders) today do not support the fourth version of the collector. I am sure that these are temporary difficulties.

It should be noted that the functional angular cli from the box is enough, in my opinion, to solve 95% of the tasks of the standard application. If you are lucky enough to modify the remaining 5%, do not worry — you can configure angular cli for your project. True, in the sixth version of the framework, the possibility of ng eject, which allows you to get Webpack.config, is temporarily disabled, so you’ll have to break your head a little.

Preparing for the transition

  1. Install the version of node.js> = 8.9
  2. Run npm i -g @angular/cli (globally install angular-cli to execute commands in the console using ng).
  3. Now, go to the project directory and execute ng new <title of your project> (the project is: angular-cli-project, an example of the command: ng new angular-cli-project — a folder with the name angular-cli-project appears in the current directory).

The result of the training:

https://github.com/angular/angular-cli/wiki

Next, we make the basic settings for comfortable development.

Setting up CLI

  1. We connect HMR (we apply changes in the code without reloading the page) on the guide. Also, in package.json, add HMR to scripts and the — open flag so that you do not open the original page in the browser:

At the time of writing the article in A6 cli when configuring HMR through the above guide you may encounter the following errors:

a) When connecting the HMR configuration to angular.json


"configurations": {
"hmr": {
"hmr": true,
"fileReplacements": [{
"src": "src/environments/environment.ts",
"replaceWith": "src/environments/environment.hmr.ts"
}]
},

Unfortunately, you will receive an error:
“Schema validation failed with the following errors:
Data path “” should NOT have additional properties (fileReplacements) “.

To fix it, you have to do the following:


"configurations": {
"hmr": {
"hmr": true,
"browserTarget": "angular-cli-project:build:hmr"
},

The difference is that you need to specify “browserTarget”: “angular-cli-project: build: hmr”, where the value of the browserTarget property consists of <project-name>: build: hmr.

In addition, the HMR environment must be replaced in the architect/build:


"architect": {
"build": {

"configurations": {
"hmr": {
"fileReplacements": [
{
"src": "src/environments/environment.ts",
"replaceWith": "src/environments/environment.hmr.ts"
}
]
},

b) The ERROR in src/main.ts: Can not find name ‘module’ correct this: in tsconfig.app.json, delete the line “types”: [].

2. Connect the preprocessor:

In angular.json we add:


"projects": {

"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "less"
}
}

If your styles are in the assets folder and are combined with imports in base.less or scss, and you need a .css file on the output, add “extractCss”: true to angular.json:

Also, at the current time in HMR mode, the update in global fewer files imported through import will not work. To work around this problem, temporarily install less-loader@3.0.0.

3. Connect the autoprefixer

Specify for which browsers the prefixes in package.json are needed:


"browserslist": [
"last 2 versions",
"IE 10",
"IE 11"
],

4. Add the processing of icons

Using gulp and svgstore, especially since finally released the fourth version of gulp. Run npm i gulp@4.0.0 gulp-inject gulp-rename gulp-svgmin gulp-svgstore -SD and create a small Gulpfile.js (see the final appendix).

In detail, on Gulp, we will not dwell — all the questions, please, in the comments.

We will point out in the index.html notation for inserting SVG:

<div style="height: 0; width: 0; overflow: hidden; opacity: 0;position: absolute; top: 0;left: 0;">
<!-- inject:svg --><!-- endinject -->
</div>

Modify the package.json by adding the task SVG:


"scripts": {
...
"svg": "gulp svg",
...

Now we can use SVG in our templates like this:

<svg>
<use href='#icon-check'/>
</svg>

5) Install the Webpack-bundle-analyzer

Execute the command: npm i Webpack-bundle-analyzer — SD.

In angular.json, add “statsJson”: true:

"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
"statsJson": true,
...

Now we can see what our bundle actually consists of. In order to automate this, add the report script in package.json:


"scripts": {
...
"report": "webpack-bundle-analyzer dist/stats.json"
...

Example of using webpack-bundle-analyzer:

The basic functionality is now complete.

Now open our custom angular application and copy the modules, images, styles, etc. into the prepared template. I’ll copy everything from the final draft of the article.

Run the command: npm run hmr and get a few errors from RxJs, which migrated from the fifth to the sixth version. To fix them will help the next guide.

Final application.

Run the command: npm run the build and get the result:

As you can see, while the size of the bundle is quite large, it really includes routing, RxJs, etc. However, the Angular team announced a new render engine Ivy and hello world application with a size of 2.7 KB. Look forward to.

Like what you read? Give Alex Maison a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.