Angular & StackBlitz

Summary

• 1. Presentation
• 2. Prerequisites
  • 2.1. Install NVM or Node
  • 2.2. Install a global Angular CLI (optional)
• 3. Installation
• 4. StackBlitz
  • 4.1. Launching the project
  • 4.2. Avoid error with zone.js
• 5. Semantic Versioning
• 6. Comments, suggestions?
• 7. License

1. Presentation

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

Label	Version
node	v18.13.0
npm	8.19.3
Angular	15.1.5

⬆ Back to top

2. Prerequisites

2.1. Install NVM or Node

To launch locally that project, you will need to install NVM (Node Version Manager) or Node.

📎	More information on: NVM: https://github.com/nvm-sh/nvm Node: https://nodejs.org/en/download

In my case, I used Node in KDE Neon (see https://github.com/nodejs/snap).

⬆ Back to top

2.2. Install a global Angular CLI (optional)

If you want to regenerate a new Angular project, you will need to install/update a global Angular CLI:

$ npm install -g @angular/cli

📎	More information on https://angular.io/cli

⬆ Back to top

3. Installation

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

2. $ cd angular-stackblitz

3. $ npm install

4. $ ng serve

5. Open your browser on http://localhost:4200/

⬆ Back to top

4. StackBlitz

4.1. Launching the project

📎	More information on https://developer.stackblitz.com/guides/integration/open-from-github

⬆ Back to top

4.2. Avoid error with zone.js

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

main.ts

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

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

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

Which creates an error (NG0908) when I launch the project in StackBlitz:

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

At this stage, locally everything works fine with $ ng serve.

So to solve the problem in StackBlitz, I have to import zone.js in main.ts:

main.ts

import 'zone.js/dist/zone'; // Avoid error in StackBlitz
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

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

After that, everything worked perfectly on StackBlitz:

But triggers a warning locally with $ ng serve:

Warning: .../angular-stackblitz/src/main.ts depends on 'zone.js/dist/zone'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

⚠️	I created an issue on StackBlitz: stackblitz/core#2366. I am looking for a single solution without zone.js, to make everything works, without errors and alerts, in StackBlitz and locally with $ ng serve. Still searching…​

📎	See manfredsteyer/ngx-build-plus#4 (comment)

⬆ Back to top

5. Semantic Versioning

📎	Based on https://semver.org/

v[MAJOR].[ANGULAR_VERSION].[MINOR].[PATCH]

With [ANGULAR_VERSION] = [ANGULAR MAJOR + ANGULAR MINOR]

Example, with v1 of this repository with Angular 15.1.6:

v1.1501.0.0

⬆ Back to top

6. Comments, suggestions?

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

⬆ Back to top

7. License

"Angular & StackBlitz" is released under the MIT License

---

⬆ Back to top