Category Archives: angular2

Angular2 apache rewriting

I'm using Angular2 to build a web mobile application, when i build my project and run it on local, everything works perfectly but when i push it into our production system i have problem, i think it's about Apache Rewriting !

My url in local http://127.0.0.1/ My url un prod http://domain.tld/mobile/

When my application is on production, it doesn't load any link like css or js ... so my application doesn't work !

My .htaccess look like this :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

So to resolve my issue i think i need to edit my htaccess but how can i say to it to use /mobile and / but if i put only /mobile my application will do not work on local..

So if you have any idea ?

Thanks :)

Deploy Angular 2 to Apache Server

I want to deploy an Angular 2 application on an Apache server. I've read various guides like this and this but none of them is working. I have npm and ng installed on server.

In nutshell, here's what i did:

  1. Cloned complete project repository on my server.
  2. Installed dependencies using npm install.
  3. Used ng build --prod command and it created a dist directory.
  4. Changed apache root to /var/www/html/dist directory.
  5. Enabled mod_rewrite, restarted apache and added this .htaccess in my dist directory.

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule>

But only my home page domain.com works, other pages like domain.com/login, domain.com/register etc. throw 404 error. Even domain.com/index.html/login doesn't work.

The application works fine on my local system where I'm developing it using ng serve. What am i missing?

RewriteRule not working

I'm working with angular 2 and yii2. I use the angular cli command 'ng serve' to build the server but the url is something like 'localhost:4200'. So I decided to write rewriterule to proxy the url (just like the production I'd make )

Below is the virtual host config.

    <VirtualHost *:80>
    ServerName sesmailer.local
    DocumentRoot C:\Users\Dong\Documents\projects\sesmailer\web
    <Directory  "C:\Users\Dong\Documents\projects\sesmailer\web">
        Options +Indexes +Includes +FollowSymLinks -MultiViews
        AllowOverride All
        Require local

        RewriteEngine On
        RewriteRule ^api/(.*)$ index.php [L,QSA]
        RewriteCond %{REQUEST_URI} !^/api/.*
        RewriteRule ^(.*)$ http://localhost:4200/$1 [P]
    </Directory>
</VirtualHost>

But when every I tried to access the url : http://example.com/api/test, the first rewriterule do not working as it should be, but it always redirect the request to the localhost:4200 site.

Do you have any ideas ? Thanks

angular 2 xampp server

I'm trying to set my server im xampp to run an application with the angular 2 quickstart. so far I download the quickstart project to folder in the htdocs/project, set the httpd-vhosts.conf to the folder

<VirtualHost *:80>
        ServerName angular2Teste.com
        DocumentRoot "C:/xampp/htdocs/projects/src"

    <Directory "C:/xampp/htdocs/projects/src">
            Options Indexes FollowSymLinks
            AllowOverride All
            Order allow,deny
            Allow from all
        </Directory>
</VirtualHost>

with this I'm able to open the project in the browser with the url angular2teste.com. the problem is that the angular quickstart project is set to have the node modules in the parent folder

-project
--node_modules
--src
---index.html

as far as I can tell I will need a .htaccess in my directory to set the index.html as root file to all the angular route calls, but also to redirect all the calls from the node_modules to the parent folder but I'm struggle with this, .htaccess is not my strong. Any ideias as I can set the .htaccess file?

How to Use Angular2 app QuickStart Demo

Trying out sample from this link https://angular.io/docs/js/latest/quickstart.html added and created all files with exact structure, installed dependancies , when i run this example by opening index.html file from src folder , but its stuck with "loading...." message in browser. I am trying this out on server running Cent OS7 with Apache 2 the entire app folder is inside html folder under www. Is there anything else I need to configure ? Note I am not using nom lite server I know its for local testing. I am trying this under apache. Any help will be appreciated.

here is the source https://github.com/vdharankar/quickstart_aj

Apache Tomcat Post requests, responds with 500 due to Expected authority at index 7: file://

Details:

App: Angular 2 App compiled in Ionic 2

API Server: Tomcat 8.5.x Bundled inside Jira Service Desk

Login:

var creds = {username:user.username, password:user.password};
var headers = new Headers();
headers.append('Content-Type', 'application/json');

return new Promise(resolve => {
    this.http.post(Url + '/rest/auth/1/session', creds, {headers:headers}).subscribe(data => {

        if(data.status === 200){

              console.log('success Authenticate');
        } else {

            console.log('fail Authenticate');
        }
    });
});

Problem

Above is the login functionality, on submission however, it spits out a response of a 500 error: http://pastebin.com/L7guLDAA

It has something to do with how Apache Tomcat handles Origin headers, Origin: file:// is what is used when run in a compiled APK. When same code is ran via http://localhost:8100 (web browser) it posts with a response of 200 as normal.

From my understanding Tomcat is just not parsing the URI, There was another stackoverflow post here: CORS issue with Tomcat and Android Webview

This seems to be the fix for my issue. However, I'm having issues building that plugin for tomcat. Helpful comments, or how to compile/build this plugin would be much appreciated.

Angular2 app not served from Apache server

I have created an Angular2 app as specified in quick start guide but by using angular-cli. I created a production build using ng build --prod

Then I created a folder by the name heroes in Apache htdocs folder where I placed all the build files. So when accessing the app through http://localhost/heroes, the browser console is displaying 404 error for the js and css files

error

Any help would be great.

PS - I have a route in the app by the same name as the app folder name in apache i.e. heroes

htaccess does not redirect in angular 2

i have been trying to achieve redirect in my angular 2 application using htaccess. i want to transfer from http://www.example.com/edudetail/advance-java/6 link to following link http://www.example.com/edudetail/6 using htaccess.

so i have made htaccess like this

<IfModule mod_rewrite.c>
RewriteEngine On 
RewriteBase /
RewriteRule ^index\.html$ - 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html 
RewriteCond %{HTTP_HOST} ^example\.com$
RewriteRule (.*) http://www.example.com/$1 [R=301]
RewriteRule ^edudetail/.*/(.*)$ edudetail/$1 [R=301,L]  
</IfModule>

My htaccess is right and tested and when tested with "htt://htaccess.mwl.be/" above links it redirects but in angular 2 it shows an error like this Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'edudetail/advance-java/6'.

it lands directly in angular 2 with above first link and does not get convert to other link.

there has to be some way to implement in htaccess.require assistance.

404 Redirection config of Apache server for Angular2 app

Setup:

  • Angular2 SPA hosted on the Apache server.
  • Some attempts have been made to redirect visitors back to index.html when 404. The app only has two public routes (/login and /signup) and will redirect all unauthenticated back to login page.

Bug Description: When accessing the signup page by entering 'MY_BASE_URL/signup' in browser, the actually page landed is still the login page.

Is there a best-practice to config Apache server for hosting Angular2 application with appropriate route re directions? ??