Angular, StackBlitz & WebContainer

Presentation

Sandbox to locally generate a project with Angular CLI and launch it online in a WebContainer on StackBlitz.

Prerequisites

Be sure to install the latest version of:

• NVM or Node.
• Global Angular CLI (if you want to regenerate the application).

Installation

The very first cloning of the project

1 - Clone the project:

git clone git@github.com:jprivet-dev/angular-stackblitz-webcontainer.git

2 - Go in the folder project:

cd angular-stackblitz-webcontainer

3 - Install the dependencies:

npm install

4 - Launch the project:

ng serve

5 - Go on http://localhost:4200/.

All in one command

git clone git@github.com:jprivet-dev/angular-stackblitz-webcontainer.git;\
cd angular-stackblitz-webcontainer;\
npm install;\
ng serve

The following times

1 - Launch the project:

ng serve

2 - Go on http://localhost:4200/

3 - Stop the project with Ctrl + C

Regenerate a new Angular app

Launch the script:

. scripts/generate-root.sh

And commit all:

git add .; git commit -m "build(ng): regenerate a new angular app"

StackBlitz

Open the project in a WebContainer

Go on https://stackblitz.com/edit/jprivet-dev-angular-stackblitz-webcontainer.

Create your own WebContainer API

1 - On StackBlitz, create a new WebContainer API with Node.js.

2 - Click on the button Connect repository:

3 - In the popup Connect new GitHub repository, click on import an existing repository:

4 - In the popup Import existing GitHub repository, copy/Past in the field Paste GitHub repository URL the following URL:

https://github.com/jprivet-dev/angular-stackblitz-webcontainer

5 - Click on the button Import repository to validate.

6 - In the top menu, click on the button Save.

7 - Refresh the complete page to reboot the WebContainer:

8 - If all went well, you can see the ✔ Compiled successfully. message in the terminal and the application displayed.

Launching the project from GitHub

/!\ Do not launch the project on StackBlitz directly from GitHub.

If you launch the project in StackBlitz directly from GitHub (without WebContainer), you will have the following error in the console:

Error: NG0908: In this configuration Angular requires Zone.js

Angular CLI locally generates by default the main.ts file without zone.js:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

... and put zone.js in the polyfills parameters of the angular.json file:

"polyfills" : [
    "zone.js"
],

In our case, it seems that the polyfills properties, in the angular.json file generated by Angular CLI, are not taken into account on StackBlitz and return an error.

However, StackBlitz's Angular starter provides a main.ts file that imports zone.js, with which it works very well without WebContainer:

// main.ts
import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

...

I created an issue on StackBlitz. To get around this problem, I'm going to use the WebContainer.

Semantic Versioning

v[ANGULAR MAJOR + ANGULAR MINOR].[MINOR].[PATCH]

Example, with Angular 15.1.6:

v1501.0.0

Resources

• https://angular.io/
• https://badgen.net/
• StackBlitz:
  • https://stackblitz.com/
  • Launching projects from GitHub: https://developer.stackblitz.com/guides/integration/open-from-github
  • https://github.com/stackblitz/starters/tree/main/angular
  • https://github.com/stackblitz/webcontainer-api-starter
  • Use StackBlitz WebContainers in Angular tutorials and examples: angular/angular#42404
  • https://blog.bitsrc.io/running-node-js-in-your-browser-with-webcontainers-48ada077518e
  • https://angular.io/generated/live-examples/toh-pt6/stackblitz.html
• https://semver.org/

Comments, suggestions?

Feel free to make comments/suggestions to me in the Git issues section.

License

This project is released under the MIT License.