69171

Angular ui-router's nested routes not working in ES6 with bable?

I have multiple modules in Angular and I also use nested routes. There is an auth module which also has a sub route auth.login the code goes as follows:-

<strong>Login.route.js</strong>

routes.$inject = ['$stateProvider']; export default function routes($stateProvider) { $stateProvider .state('auth.login', { url: '/login', template: require('./login.tpl.html') }); }

<strong>auth.route.js</strong>

routes.$inject = ['$stateProvider']; export default function routes($stateProvider) { $stateProvider .state('auth', { url: '/auth', template: require('./auth.tpl.html') }) }

Then inject these into the main module like this according to the folder structure.

import auth from './features/auth'; import auth from './features/auth/login';

I am not getting any error but apart from the / & /auth path nothing reflects. If I use /login it redirects me to the / path.

Kinda weird but UI-Router is not working. Please suggest.

<strong>NOTE: I use BableJS and Webpack for the Development</strong>

Answer1:

I noticed that the code you've shown never actually invokes the exported functions. That might be the root of your problem.

A better way to approach this might be to export the state objects themselves. In the outermost file, you can then import those state objects, and register them with the $stateProvider. Here's an example:

Login.route.js

let loginState = { // UI-Router allows state definitions to contain the name name: 'auth.login', url: '/login', template: require('./login.tpl.html') } // Just export the state definition; you don't have to register it yet export default loginState;

auth.route.js

let authState = { name: 'auth', url: '/auth', template: require('./auth.tpl.html') } export default authState;

app.js

This file shows bootstrapping the application. It imports the state definitions from the child modules, and registers them with the $stateProvider.

// Now import the state definitions from the other modules import loginState from './Login.route.js'; import authState from './auth.route.js'; let app = angular.module('app', ['ui.router']); // create a single config block which registers // all the state definitions that were imported app.config(registerAllStates); registerAllStates.$inject = ['$stateProvider']; function registerAllStates($stateProvider) { // Loop over them and register them with the $stateProvider. [loginState, authState].forEach(state => $stateProvider.state(state)); }

Recommend

  • custom page-xxxx.tpl.php doesnt works
  • How to add custom fields to the order_invoice.tpl, OpenCart 2.0
  • Extjs - Combo with Templates to Display Multiple Values
  • How to modify the HTML tag in Drupal 6?
  • Better Indy for Dephi 2007
  • Compare struct to a constant in C
  • Activation Function choice for Neural network
  • Sensibility of combined Maven/Ant+Ivy build management for dual platform Desktop/Android deployment?
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • Pycharm: Marking a folder as 'sources root' is not recursive for subfolders
  • Does Mobilefirst provide a provision to access web services directly?
  • Change Inet root folder for iis 7
  • Paperclip, set path outside of rails root folder
  • output of program is not same as passed argument
  • script to move all files from one location to another location
  • ILMerge & Keep Assembly Name
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • Symfony2: How to get request parameter
  • Rearranging Cells in UITableView Bug & Saving Changes
  • Why winpcap requires both .lib and .dll to run?
  • Akka Routing: Reply's send to router ends up as dead letters
  • Return words with double consecutive letters
  • Circular dependency while pushing http interceptor
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • How to get icons for entities from eclipse?
  • Linker errors when using intrinsic function via function pointer
  • Python: how to group similar lists together in a list of lists?
  • Proper folder structure for lots of source files
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Hits per day in Google Big Query
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Linking SubReports Without LinkChild/LinkMaster
  • unknown Exception android
  • Append folder name and increment by 1 using batch script
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • JaxB to read class hierarchy
  • Checking variable from a different class in C#
  • Busy indicator not showing up in wpf window [duplicate]
  • Unable to use reactive element in my shiny app