Category Archives: angular-cli

Url in browser will not navigate to corresponding routerlink

I have a single-page website running on an apache web server written using angular cli. I have a homepage and multiple links that navigate using the routerlink tag that work perfectly normally. However when I click on "about", for example, it navigates to website.net/about and everything is perfect until the page is reloaded or I manually type in website.net/about when it throws a 404 error.

This is the main app code:

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { ProgramsComponent } from './programs/programs.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    ProgramsComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([{
        path: 'programs',
        component: ProgramsComponent
      },
      {
        path: 'about',
        component: AboutComponent
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

import { Component } from '@angular/core';
import {ProgramsComponent} from './programs/programs.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Title';
}

app.component.html:

<div id="header" style="text-align:Left">
  <header>
    <a href="../index.html">
      <h1>
        {{ title }}
      </h1>
    </a>
    <nav>
      <div class="nav-comp">
        <a routerLink="/about">About</a>
        <a routerLink="/programs">Programs</a>
      </div>
    </nav>
  </header>
</div>
<router-outlet></router-outlet>

any help and/or links would be appreciated if alternatively if this can be fixed using the apache web server I would be open to fixing it that way but would prefer not to

Issues with Angular-CLI and Apache

I just ran the angular-cli setup for a new app. I have Apache running which is serving a local API on port 80 at http://localhost/path/to/api. Of course, ng start serves on port 4200 at http://localhost:4200.

I'm on Windows 10 if that is relevant.

So I researched proxying for Angular-cli and created proxy.config.json:

{
    "/api/": { //I've tried "/api", "/api", "/api/*", none worked
        "target" : {
            "host": "localhost",
            "protocol": "http:",
            "port": 80
        }, //also tried just straight "http://localhost" and "http://localhost:80"
        "secure" : false,
        "changeOrigin": false,
        "logLeverl" : "debug",
        "pathRewrite": {
            "^/api/clients/public/" : "/path/to/api/clients/public/"
        }
    }
}

And hooked it up to npm start via package.json. I added the "pathRewrite" to test it on a specific path.

In the console, I get ERROR Object { _body: "<!DOCTYPE html> <html lang="en"> <h…", status: 404, ok: false, statusText: "Not Found", headers: Object, type: 2, url: "http://localhost:4200/path/to/api/clients/public/" } for the call /api/clients/public/

So from the URL I know the proxy config is working (pathRewrite is in effect) but the port is not changed.

I have tried every permutation of the config I've found on the internet and in the documentation.

Does anyone have an idea?

I also tried using a symlink into the Angular application folder but it is redirected to index.html, so if there is a way to exclude that path from the redirect, that works for me too.

Angular CLI: Generate htaccess using base-href

With Angular CLI the base href in index.html can be set on build, e.g. ng --base-href /folder/someproject/. This is very useful for automatic deployment processes.

But projects like this may require a .htaccess also setting a base like so: RewriteRule ^(.*) /folder/someproject/index.html [NC,L]

Is it possible (with Webpack?) to set the path within htaccess also by use of base-href?

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

request url problems when using base href

Quick version - What I believe I want: How can I configure angular2 http service to ignore <base href>

Longer version - In case there is a better approach: In my project we are serving two angular apps using Apache:

http://host/index.html - angular 1
http://host/ng2/index.html - angular 2

They both use the same endpoint

http://host/api/foo

Both apps are using the same vhost. The angular 2 app is located under public/ng2 on disk.

The problem boils down to this:

When I use: <base href="/ng2/"> the angular app loads fine. However all requests to the api using the http service gets polluted.

http.get('/api/foo/2') goes to http://host/ng2/api/foo

My current solution is to set base href to <base href="/"> and put all angular2 files except index.html directly under /public. (index.html is still in /public/ng2) This works but it is a mess.

What I would like to have:

  • All angular2 files are in /public/ng2 (works because of <base href="/ng2/"> or other Apache config)
  • Outgoing requests do not have ng2 appended to them.

It is not an option to hardcode the url

Angular CLI routing – Doesn’t work on (Apache-) Server

I'm currently learning Angular-CLI for a Project. I succeeded in creating a simple little project with some routing Objects. In dev mode with ng serve, everthing works just fine. I can call the localhost:port in the browser and it works with the routing.

Routing when executed with ng server.

After a successful ng build -prod and moving all the stuff from the dist directory into my Server Folder (Apache24/htdocs), I start my Server and the main Side (mywebside) just works fine, the routing however does not... (i.e. localhost/about), instead I get a standart Error-Page as shown below:

Missing Page Error

Hope I was able to describe clearly what I did and where my problems are. I didn't posted any Code because I think the problem has to be else where.

Thank you for your help!

Manuel

Versions:

angular CLI: Beta.8 (latest)

(apache): 2.4.20