Angular CLI configuration file смотреть онлайн

In this video we will discuss the significance of the Angular CLI configuration file (.angular-cli.json). This is the configuration file that the Angular CLI uses.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

The settings from this file are used when we
1. Generate angular features likes components, pipes, services etc
2. Run unit and end-to-end tests
3. Build the application etc.

We will be revisiting this file many times as we progress through this Angular CLI course.

The table below shows some of the settings and their purpose. We will discuss the other settings and their purpose as we progress through the course.

project : name Name of the project

apps: root - The root directory of the application. Default is src. We can change this using the "source-dir" option when generating a new angular project using the "ng new" command

apps: outDir - The output directory for build results. Default is dist

apps: assets - List of application assets that you want to copy when building your project. By default, the src/assets/ folder and src/favicon.ico are copied over

apps: index - The name of the start HTML file which is index.html by default

apps: main - The name of the main entry-point file. main.ts by default

apps: polyfills - The name of the polyfills file. Angular is built on the latest standards of the web platform. Targeting such a wide range of browsers is challenging because not all browsers support all features of modern browsers. This can be compensated by using polyfill scripts that implement missing features in JavaScript

apps: styles - Global styles to be included in the build. Default is styles.css. We can also use less or scss. To change to less or scss, use the "style" option when generating a new angular project using the "ng new" command

apps: prefix - The selector prefix to apply for the generated components. Default is "app". This can be changed by using the "prefix" option when generating a new angular project using the "ng new" command

The important point to take away is that the values in the Angular CLI configuration file depends on the options that you have used with the "ng new" command when generating a new angular project. For example, if you do not use the --prefix option with the "ng new" command, then the default value "app" is stored in the configuration file for "prefix" setting. So the root component (AppComponent) that is created at the application generation time has "app" as the selector prefix.

Instead if you want "pragim" as the prefix, use --prefix flag along with "ng new" command. When you do this several things happen
1. "pragim" is stored as the "prefix" setting value in .angular-cli.json configuration file

2. "pragim" is used as the selector prefix for the root component that the "ng new" command generates

3. Any new component that you generate in the future using the following command will also have "pragim" as the selector prefix
ng generate component componentName

4. If you want to override the prefix setting in the angular cli configuration file, you can use --prefix option with the generate command as shown below. This will generate the component "xyz" with the prefix "tech" instead of "pragim"ng generate component xyz --prefix tech

5. Some of the options like --prefix can be used with several commands like ng new and ng generate

Please note : If you generate a project with --skip-install flag and when you try to generate a new component using "ng new" command before executing the "npm install" command you will get the following error
node_modules appears empty you may need to run npm install

To fix this, please first execute "npm install" to install the required npm packages and then generate the component.

Text version of the video
http://csharp-video-tutorials.blogspot.com/2017/10/angular-cli-configuration-file.html

Slides
http://csharp-video-tutorials.blogspot.com/2017/10/angular-cli-configuration-file-slides.html

Angular CLI Text articles & Slides
http://csharp-video-tutorials.blogspot.com/2017/10/angular-cli-tutorial-for-beginners.html

Angular CLI Tutorial
https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatArabic/playlists