How do I open a terminal in Stackblitz while working on an Angular project?

Question

I know Stackblitz offers support for generating services and components from a couple of clicks. But I still need to work on terminal for my practice and add dependencies. Please don't answer that there are other better, methods than Terminal, that is not the question.

And I know that a terminal can be opened as I just opened an angular project which had terminal opened in it, but I couldn't find it or redo it.

So, How do I open a terminal in Stackblitz while working on an Angular project?

Ryon

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Bushranger

Proof there is a terminal: angular.io/generated/live-examples/getting-started-v0/… | Link from angular.io/start – Thermotherapy

Answer 1

In Stackblitz You do not have a terminal to run Angular CLI commands. But you can use Angular Generator to generate components, services, Pipe, Directive, etc., etc.

Tedie

This doesn’t really answer the question – Athamas

I do not see the Angular Generator menu when I right click, any idea why? – Garrott

Answer 2

It seems like you can't open a terminal in an Angular Project, but if you create a Node.js app, you can use the terminal to create an Angular project just as you would locally.

However, I assume there is some sort of downside to this as the standard Angular setup available on the StackBlitz dashboard doesn't allow you to use the terminal. My guess is that booting a WebContainer (StackBlitz's Node.js runtime) is slower than just rendering the app statically.

Athamas

Answer 3

To get a terminal, create a Node.js application on StackBlitz and use npm and the Angular CLI to create an Angular application .

StackBlitz screenshot with terminal:

Mishamishaan

Answer 4

Just discovered that when you get access to a terminal via NodeJS project, like Chris mentioned, and completely replace the files within it with local angular app files... you're up and running in less than a minute pretty much (after you run npm install of course)!

I did this today so I could share a private project with team members (and avoid having to set up their environments locally)!

Hope this helps someone else looking for similar solutions!

Eurasian

Answer 5

Stackblitz mentioned there is no terminal for Angular project

https://ng-girls.gitbook.io/todo-list-tutorial/workshop-todo-list/installations/stackblitz

Not sure how did you had terminal, but I'll keep looking :P

Cholecystectomy

Answer 6

I suggest you to fork the sample project provided by the Angular Quick Start Guide, and replace with your code: https://angular.io/generated/live-examples/getting-started-v0/stackblitz.html

Source: https://angular.io/start#create-the-sample-project

Calcification

Answer 7

Create a NodeJS Project then you can see the terminal. After that type these commands:

• npm install @angular/cli
• ng new your-app-name
• cd your-app-name
• ng serve --open

Your Angular project is now published on a port, you should check the browser(on the right hand side of the Stackblitz platform)

Don't type anything in that terminal after your program was published, You can click the + button the open new Terminal. Use the new terminal for the new commands.

Jocundity

Answer 8

Actually I came in here with the exact question @user5432838 . I saw terminal when I first opened stackblitz , however couldnt find it later . I tried opening stackblitz again and I realized that the terminal is just getting hidden in the bottom. To open it Just scroll to the bottom and drag up the bottom margin. And there you go !!! There is terminal in stackblitz.enter image description here

Sinatra

Answer 9

Also check that you are using Chrome or Firefox, and not Safari. As Safari will just not show the terminal!

Glorygloryofthesnow

Answer 10

When you use Angular "template", you cannot open the terminal.

• The template is configured as such so that everything works automatically (compile, serve).
• All your local console.log results are redirected to the web console on the page view (right side).
• You install packages in the "dependencies" part of the file project view (left side)
  • You can directly edit package.json and add a dependency line if you have the code.
• You add angular things, such as Components, Modules, etc, by "Angular Generator"
  • right click on any folder (or create one) at any level
  • select an option in "Angular Generator" item.
  • give it a name in newly opened input fields
  • press enter

To have a terminal in your project, you need to start without a template (actually with a bare template)

• Have a new project from "Node.js" template.
• work out every step (create, run, etc.) manually.
  • page view will automatically detect and refresh when you "serve"
• terminal shortcut is Ctrl+` (check for MAC)
  • or move the mouse to the bottom of the editor view (middle) and pull it out. (especially when hidden)

Tallow