First time using browserify and module exports with Angular, and my usual setup for html5Mode is not working.
app.js
.config(function myAppConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
})
index.html
<head>
...
<base href="/">
</head>
What the above code is doing wrong...
The routing works until the app is refreshed, and then the page assets disappear. Also if an in-correct url is given the app won't redirect to '/' like I'm intending.
Any thoughts/solutions?
Update: I'm having the same issue with and without the .htaccess that is rewriting the /index.html from the url, so I kinda thought that it wasn't related to the web server. If you think that it might be related to the web server, here is the .htaccess:
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
</ifModule>
Related
Could you kindly tell me how can fix the issue of 404notfoundexception when I am trying to reload urls that was found using ngRouteProvider?
For example..
$routeProvider.when('/about',{
templateUrl:'partials/about.php',
controller: 'pageController'
});
if i click /about from a url, it displays the about page. However when I reload the page, it gives 404 error. I saw i will need to edit my .htaccess file. However I am not entirely sure what code to add.
Here is my current .htaccess file. Notice i tried to add something which did not work.
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
#Options +FollowSymLinks
RewriteEngine On
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
#handle angular route
#RewriteCond %{REQUEST_URI} !index
#RewriteRule (.*) index.html [L]
Laravel Routes :
/****** Api *******/
Route::group([
'prefix' =>'/api',
'middleware' => 'web'
], function(){
Route::get('/post/{id?}',[
'uses'=>'postApiController#getPost',
'as'=>'apiPost'
]);
Route::get('/slug/{slug?}',[
'uses'=>'postApiController#getOnePost',
'as'=>'apiPostSlug'
]);
Route::get('/addition/{slug?}',[
'uses'=>'postApiController#getOnePostAddition',
'as'=>'apiAdditionSlug'
]);
Route::get('/posts',[
'uses'=>'postApiController#getAllPost',
'as'=>'api.allPost'
]);
Route::get('/contacts',[
'uses'=>'ContactController#getContactList',
'as'=>'api.getContactList'
]);
Route::get('/nextslug/{id}',[
'uses'=>'postApiController#getNextRowSlug',
'as'=>'api.getNextSlug'
]);
Route::post('/mail',[
'uses'=>'ContactController#postContact',
'as'=>'api.postContact'
]);
});
/***** Api ends *****/
Route::get('/',[
'uses'=>'siteController#index',
'as'=>'index'
]);
Thanks in advance :)
Edit
I added following code on my laravel route:
/***** Handle missing ****/
Route::get('/pages/{slug?}',function($slug){
return view('index');
});
Its working well now !! I think that solves it
For all routes in angular you need to route to index action in Laravel.
So you need to add:
Route::get('/about',[
'uses'=>'siteController#index',
'as'=>'index'
]);
All this urls will be redirected to same entrypoint, view renderered by action siteController#index and then angular router will handle routing to right location.
UPDATE
You avoid boilerplate you could do something like this:
foreach(['/', '/about', '/something'] as $route){
Route::get($route,[
'uses'=>'siteController#index',
'as'=>'index'
]);
}
You can add the following code in web.php after all routes.
Route::get('/{any}', function () {
return view('welcome');})->where('any', '.*');
The welcome is the main view file (view file - resources/views/welcome.blade.php) in Laravel.
This may help someone.
I have trouble setting up the .htaccess for laravel and angular 2.
When I refresh the browser window I get a 404 page and try to avoid the html5 hashbang strategy.
I use routing from both Angular 2 and Laravel. The Laravel routing is used for retrieving templates (templateUrl in angular).
I started with https://github.com/sanex3339/laravel-5-angular-2-example
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
RewriteEngine On
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>
I found out another way to solve it:
App\Http\routes.php
Prefix all your Angular routes with '/api'
// Angular 2 base route resolving
Route::get('/', [
'uses' => 'JSControllers\AngularRoutesController#index',
'as' => 'home'
]);
Route::group(array('prefix' => 'api'), function()
{
// Angular 2 base `/edit` route resolving
Route::get('/edit', 'JSControllers\AngularRoutesController#index');
// Angular 2 templates route
Route::get('/templates/{template}', 'JSControllers\AngularTemplatesController#index');
// API route
Route::post('/api/upload-file', 'JSControllers\UploadController#uploadFile');
// Angular 2 templates route
Route::get('/blogdata', 'JSControllers\AngularDataController#blog');
});
App\Exceptions\Handler.php
public function render($request, Exception $e)
{
if($e instanceof NotFoundHttpException)
{
return Response::view('backend.content');
}
return parent::render($request, $e);
}
After enabling $locationProvider.html5Mode(true); and <base href="/" /> in the index.html routes began crashes after manual reload.
Looking up for solutions I found that .htaccess rules will fix this problem, but different configurations didn't help.
Maybe this is because my index.html is in the subdirectory /views/index.html
.htaccess:
Options +FollowSymLinks
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L] # /views/index.html doesn't work as well
</ifModule>
route config
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'AddTaskCtrl',
controllerAs: 'AddTask'
})
.when('/chat', { //this route breaks on manual refresh
templateUrl: 'chat.html',
controller: 'ChatCtrl',
controllerAs: 'chat'
})
}]);
step 1: use only $locationProvider.html5Mode(true);
step 2: Change your .htaccess
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
When index.html is start load point your app, or see more methods https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
My .htaccess looks like this:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^thesite\.com\.cp\-45\.webhostbox\.net$ [OR]
RewriteCond %{HTTP_HOST} ^www\.thesite\.com\.cp\-45\.webhostbox\.net$
RewriteRule ^/?$ "http\:\/\/www\.thesite\.com\/" [R=301,L]
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
My base URL is set to root in index.html:
<base href="/">
And I also have the following line of code in my AngularJS app configuration:
$locationProvider.html5Mode(true);
Despite all this, I am unable to get rid of a 404 when I try to directly access any page on my site without the # symbol in the URL. I can follow the links alright but once on a page, refreshing it returns a 404. Is there something I am missing in my rewrites?
Just in case it helps, my Angular app config looks like this (partial code below):
// create the module and name it asApp
var asApp = angular.module('asApp', ['ngRoute']);
// configure our routes
asApp.config(['$routeProvider', '$httpProvider', '$locationProvider', function($routeProvider, $httpProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
title: 'Learn Spanish with thesite | Unconventional tricks for the crazy learner',
templateUrl : 'pages/thesitehome.html?v=1.1',
controller : 'mainController'
})
// route for the about page
.when('/about', {
title: 'About thesite and its penchant for cunning Spanish learning tricks',
templateUrl : 'pages/aboutus.html?v=2',
controller : 'mainController'
})
// route for dictionary term
.when('/dictionary/:word2lookup', {
templateUrl : 'pages/dictionary.html?v=1',
controller : 'dictController'
})
// route for dictionary
.when('/dictionary', {
title: 'The thesite dictionary – Look up Spanish or English words in a jiffy',
templateUrl : 'pages/dictionary.html?v=1',
controller : 'mainController'
})
// route for the 404 page not found error
.when('/notfound', {
templateUrl : 'pages/404.html',
controller : 'mainController'
})
// route otherwise
.otherwise({
controller: 'mainController',
templateUrl: 'pages/404.html'
});
$locationProvider.html5Mode(true);
}]);
Any nudge in the right direction will be highly appreciated! Oh and the website in question is live just in case you wish to take a look and see the problem first-hand.
Try following tuts.
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
The basic routing method like below,
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
$locationProvider.html5Mode(true);
}]);
I want make user can access view1 by typing url "://host/view1" on browser. but this is not work..
By using $routeProvider and $locationProvider, if user click "href=/view1" this link, then
page routed host/view1.
But If user access directly to the url "://host/view1" it emit 404 error.
To make user can access /view1 directly by url, I have to remove html5Mode then, user can access by "://host/#/view1"
but How can I remove the # symbol!? not only just html5mode, the method user can access the page directly by typing that url.
Thanks. Yoshi
I create .htaccess file on DocumentRoot folder and add below
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
into .htaccess file.
that works as I expected!
ps.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
above two lines means if the file with the specified name in the browser doesn't exist, or the directory in the browser doesn't exist then procede to the rewrite rule below