# Angular CLI

Angular CLI is a command-line interface tool for scaffolding, developing, testing, deploying, and maintaining Angular applications.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Build an Authenticated Standalone Angular v22 App with the Okta Angular SDK

DevFeed: [Build an Authenticated Standalone Angular v22 App with the Okta Angular SDK](<https://devfeed.tech/articles/supercharge-auth-with-signals-and-the-new-okta-angular-sdk-15977.md>)

Original publisher: [Read original article](<https://developer.okta.com/blog/2026/08/25/angular-auth-signals>)

Author: Alisa Duncan

Published: 2026-08-25T05:00:00Z

Content type: tutorial

Language: en

Sources: [Okta Developer](<https://devfeed.tech/sources/okta-developer.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Authentication](<https://devfeed.tech/topics/authentication.md>), [OpenID connect (OIDC)](<https://devfeed.tech/topics/oidc.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [OAuth](<https://devfeed.tech/topics/oauth.md>), [SDKs](<https://devfeed.tech/topics/sdks.md>), [Node.js](<https://devfeed.tech/topics/node-js.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [angular-v22](<https://devfeed.tech/tags/angular-v22.md>), [authentication](<https://devfeed.tech/tags/authentication.md>), [cli](<https://devfeed.tech/tags/cli.md>), [node-js](<https://devfeed.tech/tags/node-js.md>), [oauth](<https://devfeed.tech/tags/oauth.md>), [oidc](<https://devfeed.tech/tags/oidc.md>), [release](<https://devfeed.tech/tags/release.md>), [sdk](<https://devfeed.tech/tags/sdk.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>)

### AI overview

This tutorial updates a small Angular v22 application to use the standalone Okta Angular SDK. It covers adding authentication with the provider function, protecting routes with functional guards, loading user groups with rxResource and signal inputs, and moving Okta configuration to runtime loading.

### Source excerpt

Have you noticed that the Okta Angular SDK went fully standalone? There's no NgModule left to import, no importProvidersFrom wrapper to remember, and the guards are plain functions now. If you've been waiting for the SDK to look like the rest of your standalone Angular app, this is the release you were waiting for. In this post, we'll pick up a small Angular v22 project and finish it. We'll make the following changes: Add authentication using the new provideOktaAuth provider function Protect a route with the SDK's functional guard Load each user's groups with rxResource and a signal input Move the Okta configuration to runtime loading We're calling Okta's APIs directly for this project, so we don't have to stand up a separate backend. If you want to jump to the completed project, you can find it in the okta-angular-auth-signals-example GitHub repository. Otherwise, warm up your fingers and let's get coding! Note This post is best for developers familiar with Angular. If you are an Angular newbie, start by building your first Angular app using the tutorial created by the Angular team. Prerequisites For this tutorial, you will need the following tools: Node.js v22 or greater Angular CLI An Okta Integrator Free Plan account A web browser with good debugging capabilities Your favorite IDE Terminal window (if you aren't using an IDE with a built-in terminal) Table of Contents Get the starting Angular project Secure the Angular app with OAuth 2.1 and OpenID Connect (OIDC) using Okta Grant API scopes to read users and groups Allow cross-origin requests and protect the access token Add authentication with the standalone Okta Angular provider Protect routes with functional route guards Add users to your Okta org Display users and review Angular's rxResource API Load a user's groups with rxResource and a signal input Display group details using signal inputs Load your Okta configuration at runtime Learn more about Angular signals, standalone APIs, and OIDC Get the starting An

## Nx 14.2 Adds Angular v14 Support, Storybook 6.5, Improved Migrations, and Performance Gains

DevFeed: [Nx 14.2 Adds Angular v14 Support, Storybook 6.5, Improved Migrations, and Performance Gains](<https://devfeed.tech/articles/nx-14-2-angular-v14-storybook-update-lightweight-nx-and-more-21418.md>)

Original publisher: [Read original article](<https://nx.dev/blog/nx-14-2-angular-v14-storybook-update-lightweight-nx-and-more>)

Author: Juri Strumpflohner

Published: 2022-06-09T00:00:00Z

Content type: release

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Storybook](<https://devfeed.tech/topics/storybook.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [configuration](<https://devfeed.tech/topics/configuration.md>), [Caching](<https://devfeed.tech/topics/caching.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [cli](<https://devfeed.tech/tags/cli.md>), [cypress](<https://devfeed.tech/tags/cypress.md>), [eslint](<https://devfeed.tech/tags/eslint.md>), [improvements](<https://devfeed.tech/tags/improvements.md>), [jest](<https://devfeed.tech/tags/jest.md>), [nx](<https://devfeed.tech/tags/nx.md>), [release](<https://devfeed.tech/tags/release.md>), [speed](<https://devfeed.tech/tags/speed.md>), [storybook](<https://devfeed.tech/tags/storybook.md>), [typescript](<https://devfeed.tech/tags/typescript.md>), [update](<https://devfeed.tech/tags/update.md>)

### AI overview

Nx 14.2 adds Angular v14 support, upgrades Storybook to 6.5, improves Angular CLI migrations, updates TypeScript and Prettier, and includes performance and configuration improvements.

### Source excerpt

Nx 14.2 brings Angular v14 support, Storybook 6.5, improved Angular CLI migrations, optional nx.json configuration, and significant performance gains.

## Common Chunk and Lazy Loading in Angular

DevFeed: [Common Chunk and Lazy Loading in Angular](<https://devfeed.tech/articles/common-chunk-and-lazy-loading-in-angular-21377.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2021/02/common-chunk-lazy-loading-angular-cli/>)

Published: 2021-02-17T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Webpack](<https://devfeed.tech/topics/webpack.md>), [configuration](<https://devfeed.tech/topics/configuration.md>), [modules](<https://devfeed.tech/topics/modules.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [config](<https://devfeed.tech/tags/config.md>), [lazy-loading](<https://devfeed.tech/tags/lazy-loading.md>), [performance](<https://devfeed.tech/tags/performance.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

### AI overview

A tutorial explaining Angular lazy loading, the common.js chunk, and the Angular CLI's commonChunk configuration option. It describes how Angular Router and Webpack split JavaScript into on-demand chunks, why shared code is placed in a startup-loaded common chunk, and when disabling that behavior may improve startup speed at the cost of code duplication.

### Source excerpt

Lorem ipsum dolor sit amet

## Automatic Multi-Step Code Migrations with Nx

DevFeed: [Automatic Multi-Step Code Migrations with Nx](<https://devfeed.tech/articles/automatic-multi-step-code-migrations-with-nx-21375.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2020/11/multi-step-automatic-code-migrations/>)

Published: 2021-01-08T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [migration](<https://devfeed.tech/topics/migration.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Tooling](<https://devfeed.tech/topics/tooling.md>), [npm](<https://devfeed.tech/topics/npm.md>), [Code](<https://devfeed.tech/topics/code.md>), [configuration](<https://devfeed.tech/topics/configuration.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [automated](<https://devfeed.tech/tags/automated.md>), [cli](<https://devfeed.tech/tags/cli.md>), [code](<https://devfeed.tech/tags/code.md>), [config](<https://devfeed.tech/tags/config.md>), [development](<https://devfeed.tech/tags/development.md>), [framework](<https://devfeed.tech/tags/framework.md>), [migration](<https://devfeed.tech/tags/migration.md>), [migrations](<https://devfeed.tech/tags/migrations.md>), [monorepo](<https://devfeed.tech/tags/monorepo.md>), [npm-packages](<https://devfeed.tech/tags/npm-packages.md>), [nx](<https://devfeed.tech/tags/nx.md>), [tooling](<https://devfeed.tech/tags/tooling.md>), [upgrade](<https://devfeed.tech/tags/upgrade.md>)

### AI overview

This tutorial explains Angular's automatic code migrations and how ng update upgrades packages, code, and configuration files through migration scripts. It then introduces Nx's multi-step migration process for managing upgrades alongside ongoing development in large repositories and monorepos.

### Source excerpt

Lorem ipsum dolor sit amet

## Create Nx Libs with Assets

DevFeed: [Create Nx Libs with Assets](<https://devfeed.tech/articles/create-nx-libs-with-assets-21366.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2020/05/nx-libs-with-assets/>)

Published: 2020-05-20T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Library](<https://devfeed.tech/topics/library.md>), [Webpack](<https://devfeed.tech/topics/webpack.md>), [configuration](<https://devfeed.tech/topics/configuration.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [cli](<https://devfeed.tech/tags/cli.md>), [generate](<https://devfeed.tech/tags/generate.md>), [json](<https://devfeed.tech/tags/json.md>), [library](<https://devfeed.tech/tags/library.md>), [nx](<https://devfeed.tech/tags/nx.md>), [rxjs](<https://devfeed.tech/tags/rxjs.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

### AI overview

A tutorial on configuring Nx libraries to provide static assets such as images and JSON files to Angular applications. It explains how Angular CLI asset configuration and Webpack development serving handle these files, then outlines the library and target-application configuration involved.

### Source excerpt

Lorem ipsum dolor sit amet

## Lazy Loading with Angular Elements and ngx-lazy-el

DevFeed: [Lazy Loading with Angular Elements and ngx-lazy-el](<https://devfeed.tech/articles/lazy-loading-with-angular-elements-and-ngx-lazy-el-21361.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2019/11/lazy-loading-angular-ngx-lazy-el/>)

Published: 2019-11-06T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [angular-elements](<https://devfeed.tech/tags/angular-elements.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [ci](<https://devfeed.tech/tags/ci.md>), [cli](<https://devfeed.tech/tags/cli.md>), [es2015](<https://devfeed.tech/tags/es2015.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [lazy-loading](<https://devfeed.tech/tags/lazy-loading.md>), [performance](<https://devfeed.tech/tags/performance.md>), [web-performance](<https://devfeed.tech/tags/web-performance.md>)

### AI overview

A tutorial on reducing startup time in Angular web applications through lazy loading. It focuses on lazy loading non-routed components with Angular Elements and ngx-lazy-el, and also discusses differential loading, performance budgets, and router-based lazy loading.

### Source excerpt

Lorem ipsum dolor sit amet

## Angular Performance: Performance budgets with the Angular CLI

DevFeed: [Angular Performance: Performance budgets with the Angular CLI](<https://devfeed.tech/articles/angular-performance-performance-budgets-with-the-angular-cli-21355.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2019/08/ngperf-setting-performance-budgets/>)

Published: 2019-08-28T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [cli](<https://devfeed.tech/tags/cli.md>), [code-splitting](<https://devfeed.tech/tags/code-splitting.md>), [performance](<https://devfeed.tech/tags/performance.md>), [videos](<https://devfeed.tech/tags/videos.md>)

### AI overview

This article explains how to define performance budgets with the Angular CLI, configure limits on metrics that affect an app's performance, monitor those budgets, and receive alerts when they are violated.

### Source excerpt

Lorem ipsum dolor sit amet

## Angular Performance: Preloading Lazy Routes

DevFeed: [Angular Performance: Preloading Lazy Routes](<https://devfeed.tech/articles/angular-performance-preloading-lazy-routes-21353.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2019/08/ngperf-preloading-lazy-routes/>)

Published: 2019-08-27T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Development](<https://devfeed.tech/topics/development.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [code-splitting](<https://devfeed.tech/tags/code-splitting.md>), [lazy-loading](<https://devfeed.tech/tags/lazy-loading.md>), [library](<https://devfeed.tech/tags/library.md>), [modules](<https://devfeed.tech/tags/modules.md>), [performance](<https://devfeed.tech/tags/performance.md>), [route](<https://devfeed.tech/tags/route.md>), [videos](<https://devfeed.tech/tags/videos.md>)

### AI overview

A tutorial on preloading lazy routes in Angular. It covers preloading all lazy modules, defining a custom preloading strategy, and using ngx-quicklink to automatically load visible links.

### Source excerpt

Lorem ipsum dolor sit amet

## Dynamically Load CSS with the Angular CLI

DevFeed: [Dynamically Load CSS with the Angular CLI](<https://devfeed.tech/articles/dynamically-load-css-with-the-angular-cli-21350.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2019/08/dynamically-load-css-angular-cli/>)

Published: 2019-08-22T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [CSS](<https://devfeed.tech/topics/css.md>), [how to create smooth CSS transitions](<https://devfeed.tech/topics/how-to-create-smooth-css-transitions.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [cli](<https://devfeed.tech/tags/cli.md>), [css](<https://devfeed.tech/tags/css.md>), [development](<https://devfeed.tech/tags/development.md>), [lazy-loading](<https://devfeed.tech/tags/lazy-loading.md>), [themes](<https://devfeed.tech/tags/themes.md>), [tooling](<https://devfeed.tech/tags/tooling.md>)

### AI overview

This tutorial explains how to configure the Angular CLI to produce separate CSS or Sass entry points and lazy load them at runtime. It describes using independent styles for themes or clients, preventing all styles from being included together, and adding the selected stylesheet dynamically through a link element.

### Source excerpt

Lorem ipsum dolor sit amet

## How Angular CLI Simplified Angular Project Setup and Development

DevFeed: [How Angular CLI Simplified Angular Project Setup and Development](<https://devfeed.tech/articles/it-s-time-to-say-thank-you-to-the-angular-cli-team-21357.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2019/08/thank-you-angular-cli-team/>)

Published: 2019-08-13T00:00:00Z

Content type: opinion

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Angular](<https://devfeed.tech/topics/angular.md>), [Tooling](<https://devfeed.tech/topics/tooling.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [cli](<https://devfeed.tech/tags/cli.md>), [development](<https://devfeed.tech/tags/development.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [team](<https://devfeed.tech/tags/team.md>), [tooling](<https://devfeed.tech/tags/tooling.md>)

### AI overview

This commentary thanks the Angular CLI team for simplifying Angular project setup. It describes how the CLI generates a configured Angular app and automates development tasks such as building, testing, serving, compilation, file monitoring, and proxy configuration.

### Source excerpt

Lorem ipsum dolor sit amet

## Angular 8 and the Future - NGConf 2019 Roundup

DevFeed: [Angular 8 and the Future - NGConf 2019 Roundup](<https://devfeed.tech/articles/angular-8-and-the-future-ngconf-2019-roundup-21338.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2019-05-01-ngconf-2019-roundup/>)

Published: 2019-05-01T00:00:00Z

Content type: opinion

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Framework](<https://devfeed.tech/topics/framework.md>), [Optimization](<https://devfeed.tech/topics/optimization.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [cli](<https://devfeed.tech/tags/cli.md>), [feature](<https://devfeed.tech/tags/feature.md>), [features](<https://devfeed.tech/tags/features.md>), [generators](<https://devfeed.tech/tags/generators.md>), [lazy-loading](<https://devfeed.tech/tags/lazy-loading.md>), [optimization](<https://devfeed.tech/tags/optimization.md>), [performance](<https://devfeed.tech/tags/performance.md>), [techniques](<https://devfeed.tech/tags/techniques.md>), [videos](<https://devfeed.tech/tags/videos.md>), [youtube](<https://devfeed.tech/tags/youtube.md>)

### AI overview

A personal roundup of NGConf 2019 announcements focused on Angular 8, including its positioning as a platform, differential loading, and Angular CLI builders. The article says differential loading creates separate bundles for modern and legacy browsers, potentially reducing bundle size by about 7-20% without server-side infrastructure changes.

### Source excerpt

Lorem ipsum dolor sit amet

## Introduction to Angular Elements

DevFeed: [Introduction to Angular Elements](<https://devfeed.tech/articles/introduction-to-angular-elements-21341.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2019/04/intro-to-angular-elements/>)

Published: 2019-04-28T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Web Components](<https://devfeed.tech/topics/web-components.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Single-page application (SPA)](<https://devfeed.tech/topics/spa.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [angular-elements](<https://devfeed.tech/tags/angular-elements.md>), [components](<https://devfeed.tech/tags/components.md>), [course](<https://devfeed.tech/tags/course.md>), [egghead](<https://devfeed.tech/tags/egghead.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [introduction](<https://devfeed.tech/tags/introduction.md>), [micro-frontends](<https://devfeed.tech/tags/micro-frontends.md>), [videos](<https://devfeed.tech/tags/videos.md>)

### AI overview

This tutorial introduces Angular Elements, explains how Angular components can be wrapped as browser Custom Elements, and describes use cases such as embedding them in non-Angular applications, CMS systems, and legacy AngularJS applications. It also begins a step-by-step example of creating an Angular Element with the Angular CLI.

### Source excerpt

Lorem ipsum dolor sit amet

## \[object ErrorEvent\] thrown by Karma in Angular Unit Tests

DevFeed: [\[object ErrorEvent\] thrown by Karma in Angular Unit Tests](<https://devfeed.tech/articles/object-errorevent-thrown-by-karma-in-angular-unit-tests-21331.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2018/07/object-errorthrown-karma/>)

Published: 2018-07-25T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [debugging](<https://devfeed.tech/topics/debugging.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [debug](<https://devfeed.tech/tags/debug.md>), [debugging](<https://devfeed.tech/tags/debugging.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [rxjs](<https://devfeed.tech/tags/rxjs.md>), [tests](<https://devfeed.tech/tags/tests.md>), [unit-tests](<https://devfeed.tech/tags/unit-tests.md>)

### AI overview

This tutorial explains how to diagnose the "[object ErrorEvent] thrown by Karma" message when running Angular unit tests. It recommends debugging with Chrome DevTools and disabling source maps with an Angular CLI flag when source maps contribute to cryptic errors.

### Source excerpt

Lorem ipsum dolor sit amet

## Add Mocha reporter for Karma unit tests to your Angular CLI project

DevFeed: [Add Mocha reporter for Karma unit tests to your Angular CLI project](<https://devfeed.tech/articles/add-mocha-reporter-for-karma-unit-tests-to-your-angular-cli-project-21325.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2018/02/add-mocha-reporter-angular-cli-tests/>)

Published: 2018-02-13T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Mocha](<https://devfeed.tech/topics/mocha.md>), [test](<https://devfeed.tech/topics/test.md>), [npm](<https://devfeed.tech/topics/npm.md>), [Yarn](<https://devfeed.tech/topics/yarn.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [cli](<https://devfeed.tech/tags/cli.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [install](<https://devfeed.tech/tags/install.md>), [npm](<https://devfeed.tech/tags/npm.md>), [tests](<https://devfeed.tech/tags/tests.md>), [unit-tests](<https://devfeed.tech/tags/unit-tests.md>), [video](<https://devfeed.tech/tags/video.md>)

### AI overview

This tutorial explains how to replace Karma's default progress reporter with the Karma Mocha reporter in an Angular CLI project. It covers installing the reporter with npm or Yarn, updating the project configuration, and viewing test suite and test case names in the resulting output.

### Source excerpt

Lorem ipsum dolor sit amet

## Keycloak and Angular CLI

DevFeed: [Keycloak and Angular CLI](<https://devfeed.tech/articles/keycloak-and-angular-cli-31567.md>)

Original publisher: [Read original article](<https://www.keycloak.org/2018/02/keycloak-and-angular-cli>)

Author: Stan Silvert

Published: 2018-02-09T00:00:00Z

Content type: tutorial

Language: en

Sources: [Keycloak Blog](<https://devfeed.tech/sources/keycloak-blog.md>)

Topics: [Keycloak](<https://devfeed.tech/topics/keycloak.md>), [Angular](<https://devfeed.tech/topics/angular.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [npm](<https://devfeed.tech/topics/npm.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [account-management](<https://devfeed.tech/tags/account-management.md>), [angular](<https://devfeed.tech/tags/angular.md>), [angularjs](<https://devfeed.tech/tags/angularjs.md>), [browser](<https://devfeed.tech/tags/browser.md>), [cli](<https://devfeed.tech/tags/cli.md>), [idm](<https://devfeed.tech/tags/idm.md>), [kerberos](<https://devfeed.tech/tags/kerberos.md>), [keycloak](<https://devfeed.tech/tags/keycloak.md>), [ldap](<https://devfeed.tech/tags/ldap.md>), [npm](<https://devfeed.tech/tags/npm.md>), [openid-connect](<https://devfeed.tech/tags/openid-connect.md>), [saml](<https://devfeed.tech/tags/saml.md>), [self-service](<https://devfeed.tech/tags/self-service.md>), [sso](<https://devfeed.tech/tags/sso.md>)

### AI overview

This tutorial shows how to install and configure Keycloak in an Angular CLI application using a schematic. It covers importing a generated client configuration, running the application, and using the resulting Keycloak service and guard for authentication-related features. The integration is described as early alpha software.

### Source excerpt

So I made a schematic that installs and configures Keycloak in any Angular CLI application. If you want to try it out, do this from the command line: npm install -g @ssilvert/keycloak-schematic ng new myApp cd myApp ng generate keycloak --collection @ssilvert/keycloak-schematic --clientId=myApp Now Keycloak is integrated into your app. Of course, you can do this with any existing Angular CLI application. It doesn't have to be a new one. Then, go to the Keycloak Admin console (master realm) and go to Clients --> Add Client --> Select File. Select the client-import.json file that the "ng generate keycloak" command created in /myApp. Assuming your Keycloak server is running on localhost:8080, you are ready to go. Start your application: ng serve Go to your browser to start the app and see this: Oh joy! myApp is protected with Keycloak! The keycloak-schematic installs a KeycloakService and a KeycloakGuard. So you can easily: Add login/logout buttons Access user self service (account management) Guard protected routes instead of the whole app Work with roles Lots more Click here for a comprehensive getting started guide, full documentation, and sample code. Note that this stuff is early alpha right now. And it will move from @ssilvert to @keycloak before long. In the mean time, I'd love to get feedback. There is a lot to do to make Keycloak/Angular integration even better, but I think the keycloak-schematic is a big step forward. So long, and thanks for all the fish.

## Create a CD pipeline with Angular, GitLab and Firebase

DevFeed: [Create a CD pipeline with Angular, GitLab and Firebase](<https://devfeed.tech/articles/create-a-cd-pipeline-with-angular-gitlab-and-firebase-21327.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2018/02/cd-gitlab-angular-firebase/>)

Published: 2018-02-07T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [CI/CD](<https://devfeed.tech/topics/cicd.md>), [Angular](<https://devfeed.tech/topics/angular.md>), [GitLab](<https://devfeed.tech/topics/gitlab.md>), [Firebase](<https://devfeed.tech/topics/firebase.md>), [Headless Browser](<https://devfeed.tech/topics/headless-browser.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>), [Test-driven development](<https://devfeed.tech/topics/tdd.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [browser](<https://devfeed.tech/tags/browser.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [ci-cd](<https://devfeed.tech/tags/ci-cd.md>), [continuous-delivery](<https://devfeed.tech/tags/continuous-delivery.md>), [deployment](<https://devfeed.tech/tags/deployment.md>), [firebase](<https://devfeed.tech/tags/firebase.md>), [gitlab](<https://devfeed.tech/tags/gitlab.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [script](<https://devfeed.tech/tags/script.md>), [test](<https://devfeed.tech/tags/test.md>), [tests](<https://devfeed.tech/tags/tests.md>), [unit-tests](<https://devfeed.tech/tags/unit-tests.md>)

### AI overview

A tutorial on creating a continuous delivery pipeline for an Angular project using GitLab CI/CD and Firebase. It covers package.json build scripts, Angular CLI app-specific builds, automated tests, and running Karma tests with headless Chrome on a CI server.

### Source excerpt

Lorem ipsum dolor sit amet

## Compile-time vs. Runtime configuration of your Angular App

DevFeed: [Compile-time vs. Runtime configuration of your Angular App](<https://devfeed.tech/articles/compile-time-vs-runtime-configuration-of-your-angular-app-21324.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2018/01/ng-app-runtime-config/>)

Published: 2018-01-21T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [configuration](<https://devfeed.tech/topics/configuration.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [JSON](<https://devfeed.tech/topics/json.md>), [HTTP](<https://devfeed.tech/topics/http.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [configuration](<https://devfeed.tech/tags/configuration.md>), [http](<https://devfeed.tech/tags/http.md>), [json](<https://devfeed.tech/tags/json.md>)

### AI overview

This tutorial compares compile-time and runtime configuration approaches for Angular applications. It explains Angular CLI environment files, production and staging builds, and loading deployable JSON settings over HTTP before the application starts.

### Source excerpt

Lorem ipsum dolor sit amet

## Interviewing Igor Minar and Adam Bradley for AngularBeers

DevFeed: [Interviewing Igor Minar and Adam Bradley for AngularBeers](<https://devfeed.tech/articles/interviewing-igor-minar-and-adam-bradley-for-angularbeers-21305.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2016/12/ama-igor-angularbeers/>)

Published: 2016-12-18T00:00:00Z

Content type: article

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Ionic](<https://devfeed.tech/topics/ionic.md>), [React](<https://devfeed.tech/topics/react.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [NativeScript](<https://devfeed.tech/topics/nativescript.md>), [React Native](<https://devfeed.tech/topics/react-native.md>), [bazel](<https://devfeed.tech/topics/bazel.md>), [Compiler](<https://devfeed.tech/topics/compiler.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [bazel](<https://devfeed.tech/tags/bazel.md>), [cli](<https://devfeed.tech/tags/cli.md>), [comparisons](<https://devfeed.tech/tags/comparisons.md>), [compiler](<https://devfeed.tech/tags/compiler.md>), [interviewing](<https://devfeed.tech/tags/interviewing.md>), [ionic](<https://devfeed.tech/tags/ionic.md>), [nativescript](<https://devfeed.tech/tags/nativescript.md>), [react](<https://devfeed.tech/tags/react.md>)

### AI overview

An AngularBeers AMA moderated by the author features Igor Minar and Adam Bradley discussing Angular versioning, Universal, mobile development, Angular Material, React comparisons, Bazel, Closure Compiler integration, and Ahead-of-Time compilation.

### Source excerpt

Lorem ipsum dolor sit amet

## Configure Ahead of Time (AoT) for your Angular app using the Angular CLI

DevFeed: [Configure Ahead of Time (AoT) for your Angular app using the Angular CLI](<https://devfeed.tech/articles/configure-ahead-of-time-aot-for-your-angular-app-using-the-angular-cli-21307.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2016/12/configure-aot-with-angular-cli/>)

Published: 2016-12-02T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Development](<https://devfeed.tech/topics/development.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [build](<https://devfeed.tech/tags/build.md>), [cli](<https://devfeed.tech/tags/cli.md>), [compilation](<https://devfeed.tech/tags/compilation.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [source](<https://devfeed.tech/tags/source.md>), [update](<https://devfeed.tech/tags/update.md>)

### AI overview

A video tutorial explains how to configure Ahead-of-Time compilation for an Angular application using the Angular CLI, create a production bundle, and download the example source code. An update notes that Angular CLI later enabled AoT automatically for builds using the relevant flag.

### Source excerpt

Lorem ipsum dolor sit amet

## Configure a proxy for your API calls with Angular CLI

DevFeed: [Configure a proxy for your API calls with Angular CLI](<https://devfeed.tech/articles/configure-a-proxy-for-your-api-calls-with-angular-cli-21301.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2016/11/configure-proxy-api-angular-cli/>)

Published: 2016-11-06T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Angular](<https://devfeed.tech/topics/angular.md>), [API](<https://devfeed.tech/topics/api.md>), [Cross-origin resource sharing (CORS)](<https://devfeed.tech/topics/cors.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Webpack](<https://devfeed.tech/topics/webpack.md>), [REST API](<https://devfeed.tech/topics/rest-api.md>), [TypeScript](<https://devfeed.tech/topics/typescript.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Ajax](<https://devfeed.tech/topics/ajax.md>), [HTTP](<https://devfeed.tech/topics/http.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [api](<https://devfeed.tech/tags/api.md>), [browser](<https://devfeed.tech/tags/browser.md>), [cli](<https://devfeed.tech/tags/cli.md>), [cors](<https://devfeed.tech/tags/cors.md>), [css](<https://devfeed.tech/tags/css.md>), [development](<https://devfeed.tech/tags/development.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [http](<https://devfeed.tech/tags/http.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [proxy](<https://devfeed.tech/tags/proxy.md>), [rest-api](<https://devfeed.tech/tags/rest-api.md>), [typescript](<https://devfeed.tech/tags/typescript.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

### AI overview

A tutorial explains how to configure the Angular CLI development server to proxy API calls to a separate backend, avoiding the need to use full backend URLs in the application and helping address cross-origin restrictions during local development.

### Source excerpt

Lorem ipsum dolor sit amet

## Let's create your first Angular app

DevFeed: [Let's create your first Angular app](<https://devfeed.tech/articles/let-s-create-your-first-angular-app-21300.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2016/10/lets-create-ur-first-ng2-app/>)

Published: 2016-10-04T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Forms](<https://devfeed.tech/topics/forms.md>), [modules](<https://devfeed.tech/topics/modules.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [cli](<https://devfeed.tech/tags/cli.md>), [component](<https://devfeed.tech/tags/component.md>), [components](<https://devfeed.tech/tags/components.md>), [forms](<https://devfeed.tech/tags/forms.md>), [getting-started](<https://devfeed.tech/tags/getting-started.md>), [guide](<https://devfeed.tech/tags/guide.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [http](<https://devfeed.tech/tags/http.md>), [rxjs](<https://devfeed.tech/tags/rxjs.md>), [services](<https://devfeed.tech/tags/services.md>), [state](<https://devfeed.tech/tags/state.md>), [stateful](<https://devfeed.tech/tags/stateful.md>), [stateless](<https://devfeed.tech/tags/stateless.md>)

### AI overview

A roughly 50-minute screencast guides beginners through creating an Angular application using Angular version 2 or later. It covers project generation with Angular CLI, modules, components, styling, data flow, stateful and stateless components, forms, RxJS, services, and Angular's HTTP library.

### Source excerpt

Lorem ipsum dolor sit amet

## Angular version 2.0.0 released!!

DevFeed: [Angular version 2.0.0 released!!](<https://devfeed.tech/articles/angular-version-2-0-0-released-21298.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2016/09/ng2-released/>)

Published: 2016-09-14T00:00:00Z

Content type: release

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [releases](<https://devfeed.tech/topics/releases.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Webpack](<https://devfeed.tech/topics/webpack.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [cli](<https://devfeed.tech/tags/cli.md>), [release](<https://devfeed.tech/tags/release.md>), [version-2-0-0](<https://devfeed.tech/tags/version-2-0-0.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

### AI overview

Angular 2.0.0 was officially released. The article discusses its planned six-month breaking-change cadence, semantic versioning, an open-source upgrade tool, and work on features including animations, web workers, PWA support, and Material Design components.

### Source excerpt

Lorem ipsum dolor sit amet