CODEWITHSUNDEEP
phpangularwampangular6wampserver
alim1990
alim1990

Reputation: 4972

Angular 6 Application how to serve it locally on wamp and how to import missing files into index page

EDIT #2

On my www/ directory, I have my server scripts and the .htaccess file:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^([\w-]+)$ api.php [L]
DirectoryIndex api.php

#RewriteCond %{REQUEST_URI} !echo.php
#RewriteRule .* echo.php?ua=%{HTTP_USER_AGENT}&https=%{HTTPS} [L]

SetEnvIf Origin "^http(s)?://(.+\.)?(dev.local\.com|localhost:8100|localhost:4200)$" ORIGIN=$0
Header always set Access-Control-Allow-Origin %{ORIGIN}e env=ORIGIN
Header merge Vary Origin

Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Headers "Content-Type, cookie"
Header set Content-Type "application/json"
Header set Access-Control-Allow-Methods "GET, POST"
# prevent mime based attacks
Header set X-Content-Type-Options "nosniff"

On my desktop, I have the the angular project where I run: 

ng build --prod --aot

I got a folder inside, called dist/angular/ and inside of it, all the related files.

I took the dist/angular/ content and place it in www/ directory and tried to run the index.html file, and got the following errors:

enter image description here

I finished an application for my organization, based on angular 6 and PHP as server side, and I need to test it locally. Most of our works, will be made locally, as the boss don't want any information to go over the wire (NGO data).

I ran:

ng-build --prod

And I've got the dist folder. But I opened the dist folder, and can't know what to do, and how to put it on wampserver to let users test it from their computers.

I checked this link with its selected answer about adding http-server.

Does working with http-server will be good option when using wampserver as local server to serve our app ?

Edit:

When I open my index.html file, I got 5 errors:

enter image description here

index.html script:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Registration System</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->

  <!--Bootstrap 4-->
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  -->
<link rel="stylesheet" href="styles.aa5ea5c31cd0cd659c6e.css"></head> 
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.2b56e49bc4acc7387a7f.js"></script><script type="text/javascript" src="polyfills.6a1700e5ae732a3a8f93.js"></script><script type="text/javascript" src="main.35b38c7c508a8567ed23.js"></script></body>
</html>

Upvotes: 1

Views: 2205

Answers (5)

alim1990
alim1990

Reputation: 4972

I found the solution, and it was that I didn't add the built files inside server folder (in my case the www directory), and it should be accessed through the link:

localhost/yourfolder/ and not by just clicking on the index.html file.

Here is my final .htaccess that has been added within the dist folder:

RewriteEngine On
    # If an existing asset or directory is requested go to it as it is
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    # If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

And at the index.html, I left it as <base href="/">

Upvotes: 0

Cobus Kruger
Cobus Kruger

Reputation: 8605

When hosting an Angular app, you can literally just take the content of the dist folder and place it in your htdocs or www folder. Well, in the simplest scenario at least.

There are a few caveats though.

The above works well when you want to serve it by itself, in the root of your server.

If you are hosting the Angular app from a sub-folder, you will need to change the base URL of the app by changing this line in the index.html file:

<base href="/path/to/folder/">

Also, if you haven't yet, you need to correctly configure CORS for the PHP backend.

Finally, you need to take care of routing. This requires entries in the .htaccess file to route as follows:

  1. Any path that should go to the Angular app must route to its index.html.
  2. All JavaScript, CSS, font and image files should route as normal.
  3. The PHP files should still route as normal, preferably to a subfolder to keep things clean. I like to use /api for this.

As an example, I have a PHP backend, that is located in the /api folder and an Angular app that I serve from the root.

So on my server, in the www folder, I have my index.html and the various JavaScrpit files. The PHP files are under www/api and the .htaccess routing takes care of routing all API calls to /www/api, all JavaScript, images, fonts and styles to just where they are, and every other path to /www/index.html.

That's about the gist of it. As long as .htaccess and your CORS setup is correct, you should have no issues.

Edit

Based on your update showing the 404 errors, I'd say your major issue is routing in .htaccess. Look up URL rewriting for Apache.

Edit

This answer shows a simple .htaccess setup that should probably work if you install in the root of your website. Even if it isn't complete for you, it's a good place to start.

Upvotes: 5

Hasta Dhana
Hasta Dhana

Reputation: 4719

Try changing : 

<base href="/">

to 

<base href="./">

so the paths are relative to the current directory rather than relative to the root directory

Upvotes: 2

Mehmet
Mehmet

Reputation: 1874

Just reference your generated js files from dist folder to you test.php page. Like that;

<script src="dist/my-app/main.js" type="text/javascript"></script>

Upvotes: 1

H. Gybels
H. Gybels

Reputation: 157

Heelo,

You should open your index.html and verify that everything built fine. If so you then can copy the dist directory in the www directory of wampserver !

Upvotes: 1

Related Questions