Currently working on an application with Angular6+. After running the command ng build --prod, a dist folder was generated. How can I view or serve this folder on Localhost?
Currently working on an application with Angular6+. After running the command ng build --prod, a dist folder was generated. How can I view or serve this folder on Localhost?
To achieve this, you can utilize the http-server package.
Start by globally installing the package
npm install http-server -g
Then navigate to your project directory (in the terminal) and run
http-server dist/
If you are working with Angular 6 or newer versions (Currently using Angular 10), you need to execute
http-server dist/your-project-name
You can now access your application at http://localhost:8080
Update: For Angular 12 and above, use
ng serve --configuration productionStarting from Angular 7, you can simply run ng serve --prod=true. More info can be found in the documentation: https://angular.io/cli/serve
Although the original question is for Angular 6, I landed here through a Google search, so leaving this note for future reference.
For my situation, I took the following steps:
Firstly, I globally installed http-server
npm install http-server -g
Next, within the project directory (using the terminal), I executed
http-server dist/[your-project-name]You can now navigate to http://localhost:8080/index.html to see your application. However, every time I refresh the browser page, I need to re-enter /index.html in the URL.
This method was successful with Angular 7.x.x version.
Terminal Instructions:
$ npm install http-server -g
To run your Angular project named "ngx" from the project directory:
$ ng build
$ http-server dist/ngx
Starting up the http-server to serve the files in dist/ngx
Access it at:
Press CTRL-C to stop the server
Enjoy!
Operating System Platforms
- Setup process for Windows:
Install WAMP server from https://wampserver.en.softonic.com/ and launch it.
Move your dist folder files to c:/wamp/www/(your project name)/
Create a .htaccess file to redirect your index.html. (Refer to http://www.htaccesstools.com/htaccess-faq/)
Access your project at http://localhost/(your project name)
- Setup process for Ubuntu:
Install LAMP server using the guide at https://www.linode.com/docs/web-servers/lamp/install-lamp-stack-on-ubuntu-16-04/
Start the server on Ubuntu.
Copy your dist folder files to /opt/lampp/htdocs/(your project name)/
Create an .htaccess file to redirect your index.html.
View your project by navigating to http://localhost/(your project name)
click here to view image The PrimeNG calendar component is presenting a challenge with the minimum date setting for December 2nd to 31st. It seems to be malfunctioning, causing the minimum year to become disabled. Additionally, when the maxdate is set to ...
The recent release of React includes breaking changes to the TypeScript typings, causing packages that require "@types/react" with a wildcard version to automatically target this new version and break my project. Initially, I wanted to reach out to projec ...
This login page utilizes formik and I am encountering some issues: const handleLogin = () => { const login = useLoginMutation(); return ( <div> <Formik initialValues={{ email: "", password: "" }} ...
I am facing a challenge with a JSON file that stores crucial data in the following format { "login": { "email": "Email", "firstName": "First name", "lastName": "Last name", ...
Looking to localize messages separately for each component? Check out this example for Vue 2. But how can it be done for Vue 3 and Vuetify 3? Here's what I've tried: package.json "dependencies": { "@mdi/font": "6.5 ...
Is there a way to reference a type in TypeScript without including all of its required fields, without creating a new interface or making all fields optional? Consider the following scenario: interface Test { one: string; two: string; } _.findWhe ...
Currently, I am facing challenges testing a component that contains a subscription within the ngOnInit method. While everything runs smoothly in the actual application environment, testing fails because the subscription object is not accessible. I have att ...
I want to utilize the collapse feature from Bootstrap in my project. To do so, I have installed jQuery and popper.js: "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/hover.css/css/hover.css", "node_modules/hambur ...
Having a two-page web service setup consisting of a Main page and a details page, I encountered an issue. When I double click on the main page data, it successfully directs me to the details page with all the relevant information displayed. However, whenev ...
My project has numerous tests that are not being maintained, causing errors when running ng test due to import issues in .spec.ts files. Is there a way to execute a single file test for a service without having to clean up all the tests? Perhaps using Php ...
We are currently in the process of creating an angular progressive web application that receives updates from a LightStreamer Server and displays notifications to the user. Since PWAs serve as alternatives to native apps, we are aiming for our app to rem ...
Here is a link to the code sandbox In this gif demonstration, it's evident that the notifications are not triggering the exit animation when removed from the DOM (usually after 6 seconds). Why is this happening? I've followed all the suggestion ...
How can I implement multiple CSS files in the styleUrls array? @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: [conditional statement for loading specific CSS] }) I have attempted it before, bu ...
Looking to retrieve the current route name from a template in order to pass it to a router link (specifically passing the current route to the login view so I can redirect users there after authentication). Everything functions as expected, but when perfo ...
Utilizing ng-bootstrap, I am creating a Popover with HTML and bindings. However, the ng-template keeps getting recreated every time I click the button, causing a delay in the initialization of my component. Is there a way to hide the ng-template instead? ...
Good evening, I recently created a reactive form that includes a nested array structure for cocktails and ingredients. However, I am facing an issue accessing the ingredient formArray within the cocktail array in my existingFlavForms form. this.existingF ...
Is it possible to apply a filter inside another filter in this scenario? I have a table of orders with nested tables of services, and I want to only display the orders where the type of service is 'type1'. I tried using the following line of code ...
Can you inject a service into a class that is not a component? Consider the following scenario: Myservice import {Injectable} from '@angular/core'; @Injectable() export class myService { dosomething() { // implementation } } MyClass im ...
Is it possible for the useFetch hook to allow any type of array to be used as the data type? hooks/useFetch.ts: const useFetch = <T extends any[]>(dataUrl: string) => { const [data, setData] = useState<T>([]); const [error, setError] = ...
Is there a distinction between the following two code snippets? function sayHello(name?: string) { if (name) { return 'Hello ' + name; } return 'Hello!'; } and function sayHello(name: string | undefined) { if (name) { return &apo ...