Category Archives: angular5

apache login page preventing ajax call

I'm attempting to send data to an endpoint over POST and am running into an issue with the page since its protected by apache's htpasswd file. I am willing to have the user login to go to the page, however the issue is that with the ajax request that isnt happening. the login box does not show, so im unable to get it to log in. Im using angular 5 and the HTTPClient from @angular/common/http.

Angular 5 lazy loaded module doesn’t work on refresh

Note about this issue: I noticed it only happens using certain types of build process. Since I'm using angular-cli this error will appear everytime I compile the application using ng build. The only exception is when I use ng build --prod. I use any other flag I used to use, such as --dev --aot then I'll get the error where I can't refresh the page.

When using ng build --prod the refresh on the page will keep the application running as expected. But during development it means I need to run the command everytime a change is made on the code, otherwise I'll get errors like:

(void 0) is not a function

I'm trying to use Angular 5 lazy loaded modules using wamp server but I'm having problems when I refresh the page using lazy loaded modules. This is my routing configuration:

// Root routing config
export const mainRouting: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    {
        path: '',
        component: PortalComponent,
        canLoad: [ResolveGuard],
        children: [
            { path: 'home', component: HomeComponent },
            {
                path: 'page',
                loadChildren: './modules/page/page.module#PageModule'
            },
            {
                path: 'user',
                component: UserComponent,
                children: [
                    { path: 'profile', component: ProfileComponent },
                    { path: 'config', component: ConfigComponent },
                ]
            }
        ]
    },
];

// LazyLoaded routing config
export const pageRouting: Routes = [
    {
        path: '',
        children: [
            { path: 'about', component: PageAboutComponent },
            { path: 'condition', component: PageConditionComponent }
        ]
    }
];

Everything is working as expected. I can navigate to the home page of the application, I can access the lazy loaded routes (page/about and page/condition), the PageModule is loading only on demand, etc..

The problem is when I'm on the url /page/about (for example) and I refresh the page, then I get a 404 error.

If I'm on the url /user/profile and refresh the page, the application load as expected, because the user is not lazyloaded, it's within the main module.

I'm already using this .htaccess configuration

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

But only in this specific case it's not working. Is there a way to solve this issue?

‘No Access-Control-Allow-Origin header is present on the requested resource’ issue when trying to access a file in localhost?

I am trying to implement file download in angular 5.For this I trying to retrieve a file located in my localhost using get request and trying to convert it into blob object.

this is my code

let headers = new HttpHeaders();
headers = headers.set('Accept', 'application/pdf');

return this.http.get('http://localhost/angular5/lesson2.pdf', {
    headers: headers,
    responseType: 'blob'
}).subscribe((res) => {
    var blob = new Blob([res], { type: 'application/pdf' });
    console.log(blob);
    this.fileName(res);
    saveAs(blob, "testData.pdf");
});

in the above code I trying to access a file located in my localhost in get request,but it shows following error

enter image description here

how can I solve this issue?