Thursday, February 21, 2019

Error in creating angular component from CLI

Error code is:


More than one module matches. Use skip-import 
option to skip importing the component into the 
closest module.

This Error is related to component module file When we have multiple module file (more than one) then auto generated component is missing module path so we need to give module path with component name like :

 ng g c ./feature/ComponentName --module modulePath

For Example

ng g c ./feature/metric-detail --module app 

comments are always welcome :)

Tuesday, February 19, 2019

Angular CLI cheat sheet

Install Globally

npm install -g @angular/cli

Install Locally

npm install @angular/cli
To run a locally installed version of the angular-cli, you can call ng commands directly by adding the .bin folder within your local node_modules folder to your PATH. The node_modules and .bin folders are created in the directory where npm install @angular/cli was run upon completion of the install command.
Alternatively, you can install npx and run npx ng <command> within the local directory where npm install @angular/cli
 was run, which will use the locally installed angular-cli.

Install Specific Version (Example: 6.1.1)

npm install -g @angular/cli@6.1.1

Usage

ng help

Generating and serving an Angular project via a development server

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve
Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
You can configure the default HTTP host and port used by the development server with two command-line options :
ng serve --host 0.0.0.0 --port 4201

Generating Components, Directives, Pipes and Services

You can use the ng generate (or just ng g) command to generate Angular components:
ng generate component my-new-component
ng g component my-new-component # using the alias 
 
# components support relative path generation 
# if in the directory src/app/feature/ and you run 
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp 
# but if you were to run 
ng g component ./newer-cmp
# your component will be generated in src/app/newer-cmp 
# if in the directory src/app you can also run 
ng g component feature/new-cmp
# and your component will be generated in src/app/feature/new-cmp 
You can find all possible blueprints in the table below:

Scaffold
Usage
ng g component my-new-component
ng g directive my-new-directive
ng g pipe my-new-pipe
ng g service my-new-service
ng g class my-new-class
ng g guard my-new-guard
ng g interface my-new-interface
ng g enum my-new-enum
ng g module my-module
1.      ng g module new-module to create a new moduleangular-cli will add reference to componentsdirectives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow these steps:
2.       call ng g component new-module/new-component
This should add the new componentdirective or pipe reference to the new-moduleyou've created.

Updating Angular CLI

If you're using Angular CLI 1.0.0-beta.28 or less, you need to uninstall angular-clipackage. It should be done due to changing of package's name and scope from angular-clito @angular/cli:
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
To update Angular CLI to a new version, you must update both the global package and your project's local package.
Global package:
npm uninstall -g @angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean` 
npm install -g @angular/cli@latest
Local project package:
rm -rf node_modules dist 
# use rmdir /S/Q node_modules dist in Windows Command Prompt; 
use rm -r -fo node_modules,dist in Windows PowerShell 
npm install --save-dev @angular/cli@latest
npm install

Some Useful Flag for Angular CLI.

1.     To open project automatically in a browser Tab
ng serve --o
OR
ng serve --open
2. Create project with routing file by default
ng new ProjectName --routing
3. Run project on different Port (Apart from default Port 4200)
ng serve --port 4201
4. Changing Base href while build
ng build --base-href=yourValue
OR
ng build --base-href /myUrl/
5. For performance of your application
* ng build --prod
* ng build --aot
6. Adding custom prefix for new project
ng new your-project --prefix custom
7. For Inline Template/Style of your component
ng g c button --inline-style --inline-template
You can anyone as per your requirements.
8. Avoid Hashing of file names while bundle your application
ng build -prod --output-hashing none
OR
ng build -prod --output-hashing=none