Rewrite Ionic routing with IIS Rewrite

ionic-v1
1

Hi all,

I’m currently trying to clean my url using IIS rewrite

basicly i want to rewrite using IIS rewrite from http://www.domain.com/list to http://www.domain.com/app/list

but when i try to access http://www.domain.com/list IONIC not recognize it and brought to $urlRouterProvider.otherwise (app/index)

this method are run correctly if i use redirect on IIS rewrite rules

is there something miss or it cannot be happen

below are my app.js:

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })
  
  .state('app.index', {
    url: "/index",
    views: {
      'menuContent': {
        templateUrl: "templates/home.html",
		controller: 'indexController'
      }
    }
  })
 .state('app.list', {
    url: "/list",
    views: {
      'menuContent': {
        templateUrl: "templates/list.html",
		controller: 'indexController'
      }
    }
  })
$urlRouterProvider.otherwise('/app/index');
$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true);

This one is my web.config:

<rule name="Rewrite Blog" stopProcessing="true">
        <match url="^list$" />
        <action type="Rewrite" url="app/list" />
      </rule>
<rule name="AngularJS" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          <add input="{REQUEST_URI}" pattern="^/app" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
2

Sorry, I don’t sure i understand your problen. If your problem is to make redirect for abstract state so use it:

$urlRouterProvider.when(’/app’, ‘/app/list’);

3

Hi matanyed thx for your reply,

basicly i want to remove “/app” from the URL, i’m googling and not find any way to do it with IONIC routing if i use side nav

so i’m trying using IIS rewrite to get it

i’m rewriting /list to /app/list

so if any user browse www.domain.com/list its rewrite to www.domain.com/app/list

4

Just dont write “app” state.
use ng-controller on body tag (< body ng-controller=“AppController” >).

5

if i do that can i still have ion-side-menu for my menu?
if it still can, is there any example link?

so far i know from googling, app state is required to use ion-side-menu
sorry if i’m wrong

6

You can have side menu without app state.

7

thx matanyed its working

8

Great. Good luck friend.

9

Im new to Ionic and using ionic 4 to write web application. Currently the directory that run the site is http://xxx.xxx.xxx.xxx/folder1/app , whenever i route to page1 it will go to http://xxx.xxx.xxx.xxx/folder1/app/page1 and it works but when i refresh, it says 404 error. I know that url rewrite required for this, does anyone can help how to set this exactly so that it load resources properly when page refreshed? i’m using IIS7 to host ionic build files.

Thanks in advance