Export Angular project from StackBlitz to local

Question

I would like to export an Angular project done in StackBlitz an execute it from Angular CLI with the command ng serveas we do with an Angular project created in our local machines.

Answer 1

Just do it. Here is where you need to click:

Answer 2

See here. Using this button, you can download the source code.

Answer 3

To resolve this error: ENOENT: no such file or directory, stat '/.../projectFolder/tsconfig.app.json'

After downloading the project from StackBlitz I copied the zip to a folder. The tsconfig.app.json file for my project was located in the src folder. To resolve the error above I replaced the property "tsConfig": "tsconfig.app.json" with "tsConfig": "src/tsconfig.app.json" in my angular.json file. In the terminal I ran npm install in the project's directory to install all the dependencies. I then ran ng serve -o to run the server and the app opened up in my browser successfully.

source: ENOENT: no such file or directory in tsconfig.app.json using angular 4?

Edit: The Building Locally section of https://angular.io/start/deployment gives instructions on how to build a StackBlitz application locally. It basically says to install the Angular CLI, create a new project, replace the /src folder in your new project with the /src folder from the downloaded StackBlitz project, and finally build the project.

This however did not work for me as it caused a missing Module error. What did work was replacing all the files in the new project folder that matched the files from the StackBlitz project folder. Run npm install, npm build --prod, and finally ng serve -o.

Answer 4

1. Click on that button with the arrow pointing down
2. cd into you project cd "your app name"
3. npm install
4. ng serve

Answer 5

I was also trying to export a StackBlitz Angular project to my local environment but ran into some different errors (e.g. Error: Error on worker #1: TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined) -- probably due to missing files needed by my local CLI.

The Running Your App Locally section of the Angular docs (also pointed out in @HelloWorldPeace's answer), worked for me. To summarize:

1. Download the project zip from StackBlitz.
2. Create a blank local Angular project with the CLI: ng new my-project-name
3. Replace the /src folder of the new project with the /src folder of the StackBlitz download
4. npm install inside the project directory and ng serve (or npm start)

The Angular CLI caught some typing errors in strict mode that I had to fix (didn't have to worry about them in StackBlitz), but other than that everything was working properly.

Answer 6

As @gal007, @tamo-studio and @jb-nizet pointed out, you should be able to just download the project, run npm install and ng serve, but this might not work for all projects.

It should work for any project with a current Angular version newer than version 6, I tried with v7 and it worked like a charm.

Your error message in one comment suggests the file tsconfig.json is missing, which you can take form a newly generated project of Angular. To create such a project follow these steps:

1. Check in package.json which version of Angular your current project uses (look for @angular/core)
2. install the corresponding version of the angular-cli, e. g. for v4 via npm i -g @angular/cli@^4
3. run $ ng init in an empty directory
4. Take the tsconfig.json, move it to your current project and make adjustments if required
5. Now you can delete the temporairly created project

This should make it run. If it does still not work, look at StackOverflow for the error messages or start a new Question :)

Answer 7

It is true that StackBlitz does not generate such file. But a tsconfig.json file in a directory indicates that such directory is the root of a TypeScript project. So, you can create such file and leave it empty. It allowed me to compile from terminal. https://www.typescriptlang.org/docs/handbook/tsconfig-json.html