Angular CLI Commands For Angular Application

Angular CLI tool has many useful commands that helps in generating applications to preparing build. Let us see those wonderful commands.

Angular CLI Commands

ng new :-

ng new command used to add new application. This command will create multiple files like below.

    installing ng
    create .editorconfig
    create README.md
    create src\app\app.component.css
    create src\app\app.component.html
    create src\app\app.component.spec.ts
    create src\app\app.component.ts
    create src\app\app.module.ts
    create src\assets\.gitkeep
    create src\environments\environment.prod.ts
    create src\environments\environment.ts
    create src\favicon.ico
    create src\index.html
    create src\main.ts
    create src\polyfills.ts
    create src\styles.css
    create src\test.ts
    create src\tsconfig.app.json
    create src\tsconfig.spec.json
    create src\typings.d.ts
    create .angular-cli.json
    create e2e\app.e2e-spec.ts
    create e2e\app.po.ts
    create e2e\tsconfig.e2e.json
    create .gitignore
    create karma.conf.js
    create package.json
    create protractor.conf.js
    create tsconfig.json
    create tslint.json

There are various options available with this command. Some of options are following

    --directory // directory where new application generated
    --minimal   // Create a minimal app
    --routing   // Generate a routing module
    --style     // Defualt css file

ng generate :-

ng generate command used to add features to angular application.

• • • ng generate component new-component: This will add component to application and will add reference in app.module.ts file.

        create src\app\new-component\new-component.component.css
        create src\app\new-component\new-component.component.html
        create src\app\new-component\new-component.component.spec.ts
        create src\app\new-component\new-component.component.ts
        update src\app\app.module.ts
      

          # All three commands are equivalent
          $ ng generate component new-component
          $ ng generate component newComponent
          $ ng generate component NewComponent
      

    • ng generate class new-class: This will add class to application.

      create src\app\new-class.ts
      

    • ng generate directive new-directive: This will add new directive to application and will add reference in app.module.ts file.

          create src\app\new-directive.directive.spec.ts
          create src\app\new-directive.directive.ts
          update src\app\app.module.ts

    • ng generate enum new-enum: This will add enum to application.

          create src\app\new-enum.enum.ts
      

    • ng generate module new-module: This will add a module to application. We have to add newly generated module in provider section in app.module.ts.

          create src\app\new-module\new-module.module.ts
          WARNING Module is generated but not provided, it must be provided to be used
      

    • ng generate pipe new-pipe: This will add new pipe (filter as in angular 1x) to application and will add reference in app.module.ts file.

          create src\app\new-pipe.pipe.spec.ts
          create src\app\new-pipe.pipe.ts
          update src\app\app.module.ts
      

    • ng generate service new-service: This will add new service to application. We have to add that in provider section of app.module file.

          create src\app\new-service.service.spec.ts
          create src\app\new-service.service.ts
          WARNING Service is generated but not provided, it must be provided to be used
      

  Shortcut notations of above command is also availble. Below will be shortcut of above commands.

    ng g c new-component
    ng g cl new-class
    ng g d new-directive
    ng g e new-enum
    ng g m new-module
    ng g p new-pipe
    ng g s new-service

Angular CLI uses static analysis to understand the semantics of application. When adding a new feature using ng generate component, Angular CLI finds the closest module in the module tree of your application and integrates the new feature in that module. If we have an application with multiple modules, Angular CLI will automatically integrate the new feature in the correct module, depending on the directory where you run the command from.

ng serve :-

ng serve command builds the application and starts a web server.

By default application is hosted at http://localhost:4200.

    ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
    Hash: 2341600ed72c99da6f2c
    Time: 9814ms
    chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 177 kB {4} [initial] [rendered]
    chunk    {1} main.bundle.js, main.bundle.js.map (main) 5.34 kB {3} [initial] [rendered]
    chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
    chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.19 MB [initial] [rendered]
    chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

There are many options avalaible with this command. Some of the important options are following

    --host          // set host name. Default is localhost.
    --live-reload   // Whether to reload the page on change, using live-reload. Default is true.
    --open          // Open the URL in default browser. Default is false.
    --port          // Port where application will host. Default is true.
    --watch         // Run build when files are changed.
    --verbose       // Will show additional detail on output.
    --target        // Define build target. Default values is development. 
    --output-path   // Path where output will be placed.

ng build :-

ng build compiles the application into an output directory. By default build is placed in dist/ folder of your application.

    Hash: 66e45bde468ac2d85700
    Time: 8534ms
    chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 177 kB {4} [initial] [rendered]
    chunk    {1} main.bundle.js, main.bundle.js.map (main) 9.48 kB {3} [initial] [rendered]
    chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
    chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.89 MB [initial] [rendered]
    chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ng build can use option target to create –build for development and production. Based on target envionment file is used to create build.

    # these are equivalent ng build commands
    ng build --target=production --environment=prod
    ng build --prod --env=prod
    ng build --prod
    # and so are these
    ng build --target=development --environment=dev
    ng build --dev --e=dev
    ng build --dev
    ng build

Following are some important options which can be used with ng build command

    --deploy-url/-d     //  URL where files will be deployed
    --environment/-e    //  enviorment for build
    --output-path/-op   //  Path where output will be placed
    --target/-t         //  Defines the build target
    --watch/-w          //  Run build when files change
    --verbose/-v        //  Adds more details to output logging. 

ng lint :-

ng lint runs the tslint (TypeScript linter) which just prints out linting errors.

    Warning: The 'no-use-before-declare' rule requires type checking
    All files pass linting.

Following options available for ng lint.

    --fix       //Fixes linting errors. This may override files.
    --force     //Succeeds even if there was linting errors. 

ng test :-

ng test compiles the application into an output directory. Tests will execute after a build is executed via Karma, and it will automatically watch files for changes.

    10% building modules 1/1 modules 0 active31 07 2017 13:02:28.089:WARN [karma]: No captured browser, open http://localhost:9876/
    31 07 2017 13:02:28.103:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
    31 07 2017 13:02:28.105:INFO [launcher]: Launching browser Chrome with unlimited concurrency
    31 07 2017 13:02:28.110:INFO [launcher]: Starting browser Ch31 07 2017 13:02:36.427:WARN [karma]: No captured browser, open http://localhost:9876/
    31 07 2017 13:02:36.978:INFO [Chrome 59.0.3071 (Windows 10 0.0.0)]: Connected on socket bl10cxd0Ufw3aWJ-AAAA with id 10046474
    Chrome 59.0.3071 (Windows 10 0.0.0): Executed 7 of 7 SUCCESS (0.262 secs / 0.244 secs)

ng eject :-

This will generate webpack configuration file in root directory. Once we do this we will not be able to use “ng build” again until we change.angular-cli.json file and remove the ejected property from the project.

    ==========================================================================================
    Ejection was successful.
    To run your builds, you now need to do the following commands:
        - "npm run build" to build.
        - "npm test" to run unit tests.
        - "npm start" to serve the app using webpack-dev-server.
        - "npm run e2e" to run protractor.
    Running the equivalent CLI commands will result in an error.
    ==========================================================================================
    Some packages were added. Please run "npm install".

Now we have to use npm commands for our application. If we try to use ng commands then we will get error

    ng build
    An ejected project cannot use the build command anymore.

To run Angular CLI commands back, we have to change “ejected” property to false in .angular.cli.json file.Once we set false for ejected property. We can run Angular CLI command back.

    Hash: 66e45bde468ac2d85700
    Time: 11779ms
    chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 177 kB {4} [initial] [rendered]
    chunk    {1} main.bundle.js, main.bundle.js.map (main) 9.48 kB {3} [initial] [rendered]
    chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
    chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.89 MB [initial] [rendered]
    chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ng e2e :-

This will do end to end testing. End to end testing (E2E) or also known as integration testing is a great way to make sure our applications function correctly.

    ** NG Live Development Server is listening on localhost:49156, open your browser on http://localhost:49156 **
    Hash: d0141bb4e4f4d5bf3c00
    Time: 9433ms
    chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 177 kB {4} [initial] [rendered]
    chunk    {1} main.bundle.js, main.bundle.js.map (main) 9.49 kB {3} [initial] [rendered]
    chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
    chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.19 MB [initial] [rendered]
    chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
    webpack: Compiled successfully.
    [13:05:18] I/file_manager - creating folder D:\Personal\Blog\Github\AngularStartup\firstApp\node_modules\protractor\node_modules\webdriver-manager\selenium
    [13:05:28] I/update - chromedriver: unzipping chromedriver_2.31.zip
    [13:05:29] I/launcher - Running 1 instances of WebDriver
    [13:05:29] I/direct - Using ChromeDriver directly...
    [21116:13844:0731/130530.157:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:13844:0731/130530.364:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:9952:0731/130530.420:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:13844:0731/130530.510:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:20484:0731/130530.519:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:13844:0731/130530.528:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:20484:0731/130530.536:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:13844:0731/130530.611:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:20484:0731/130530.640:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:13844:0731/130530.713:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:20484:0731/130530.784:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:13844:0731/130530.849:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:20484:0731/130530.913:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:13844:0731/130530.956:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:20484:0731/130530.961:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:13844:0731/130530.971:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:20484:0731/130530.979:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:13844:0731/130530.984:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:20484:0731/130530.986:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:13844:0731/130530.990:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:20484:0731/130530.998:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:13844:0731/130531.000:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:20484:0731/130531.002:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:13844:0731/130531.007:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    [21116:20484:0731/130531.013:ERROR:persistent_memory_allocator.cc(809)] Corruption detected in shared-memory segment.
    Jasmine started
      first-app App
        √ should display welcome message
    Executed 1 of 1 spec SUCCESS in 0.993 sec.
    [13:05:33] I/launcher - 0 instance(s) of WebDriver still running
    [13:05:33] I/launcher - chrome #01 passed

Summary

Angular CLI is great tool to work with angular application development. This help us in creating new application to manage each task like feature addition, testing, build etc. for application.

• ng new : Create new angular application
• ng generate : Generate new featuire application
• ng serve : Build and run application
• ng build : Build application
• ng test : Build and test application
• ng e2e : Build and do integration testing
• ng lint : Lint error in application
• ng eject : Remove angular cli command and use NPM commands