Run Angular on CodeSandbox and StackBlitz

In real-world scenarios, sharing code for assistance often requires the recipient to set up the environment. Tools like CodeSandbox and StackBlitz offer immediate online development environments, simplifying project sharing. Platforms like CodeSandbox Angular and StackBlitz Angular provide robust features for running code remotely.

How to Create & Run an Angular Project in CodeSandbox?

1. Go to the website: link

2. Create an account, click on Sign In and sign in using any of your following social logins:

3. Select CodeSandbox Angular template

Add Angular Material

Go to the left sidebar and choose Add Dependency to add the Material dependencies.

Add the following dependencies:

Import Angular Material Modules

Create a folder shared under the app folder. In the shared folder, create a file named material.module.ts:

File: material.module.ts

Now let's import this module into our app.module.ts :

Transform Your Career

Choose from our industry-leading programs designed for career success

NSDC Certified

Modern Software and AI Engineering Program

Master full-stack development with AI integration

12 MonthsDuration

AI-LedCurriculum

Career SupportSupport

+1000 more

Go to Program

NSDC Certified

Modern Data Science and ML with specialisation in AI

Advanced data science techniques with AI specialization

12 MonthsDuration

AI-LedCurriculum

Career SupportSupport

+1000 more

Go to Program

NSDC Certified

Advanced AIML with Specialisation in Agentic AI

Deep dive into AIML with focus on Agentic systems

12 MonthsDuration

AI-LedCurriculum

Career SupportSupport

+1000 more

Go to Program

NSDC Certified

DevOps, Cloud & AI Platform Engineering

Build and manage AI-powered cloud infrastructure

12 MonthsDuration

AI-LedCurriculum

Career SupportSupport

+1000 more

Go to Program

NSDC Certified

AI Engineering Advanced Certification by IIT-Roorkee

Premier AI engineering certification from IIT-Roorkee

3 MonthsDuration

AI-LedCurriculum

Career SupportSupport

Go to Program

File: app.module.ts

Add Material Core Theme

Rename src/style.css to src/style.scss and update the angular-cli.json file

Update style. scss with the following theme

Adding Material Icon

Add a link element to the index.html file so that you can access the icon fonts CDN.

Create the Landing Page

Update your app.component.html

Under the src/assets folder, save the following picture as cover.jpg :

Creating Your First Template

Click on Sandbox Info from the CodeSandbox left menu, followed by Create Template.

You may now change the Template's name, description, colour, and icon.

When you create a new Sandbox in CodeSandbox angular, your template will be displayed.

By utilizing this template each time you develop a new application, you may now reduce the time it takes to integrate Material in Angular.

How to Create & Run Angular Project in StackBlitz?

1. Go to the website:link

2. Login using your GitHub account

3. Create a new Angular project

Boom!!! It's done

Yes, it is that easy, and with only three actions, we are prepared to begin.

Start your GitHub Project in Stackblitz

Our GitHub repository runs incredibly easily on StackBlitz Angular, thanks to StackBlitz.

1. Copy the GitHub repo link https://github.com/srashtisj/angular-demo-app

2. replace github.com to stackblitz.com/github

https://stackblitz.com/github/srashtisj/angular-demo-app

And done! Here's my GitHub repo on StackBlitz Angular:

We can run and do whatever changes are required and then push the changes back to the repo.

Run Our Unit Tests in Stackblitz

We can indeed use StackBlitz Angular to execute our unit tests. A few adjustments must be made before we can run unit tests.

Therefore, all unit test bootstrapping codes must be included in the main.ts file to begin Jasmine testing for your project in a StackBlitz. So let's create a new main.ts file and rename our current main.ts to main.ts.backup.

The next step is to use Jasmin from main.ts to execute our unit tests:

1. initialize and import the modules for Jasmine and Jasmine for browsers.
2. importing the zone.js module
3. Import the the.spec.ts files.
4. Angular test environment for Bootstrap

Import the following code into the main.ts file

StackBlitz Example

Why Should I Run Angular Project Unit Tests in StackBlitz?

Occasionally we need to run unit tests for educational purposes or to make some playground links for use in technical publications. It's easier to use it.