How to Install on Ng1 about sticky-states

[molehillrocker]

In case anyone comes here that uses no bundler at all (like me), here is my approach:

1. Hit npm install @uirouter/core @uirouter/sticky-states @uirouter/angularjs.
2. Copy ui-router-core[.min].js, ui-router-sticks-states[.min].js and ui-router-angularjs[.min].js to a directory where you can load it from, e.g. your dist directory.
3. Include the scripts in your index.html:

<script src="/deps/angular-ui-router/release/ui-router-core.js"></script>
<script src="/deps/angular-ui-router/release/ui-router-sticky-states.js"></script>
<script src="/deps/angular-ui-router/release/ui-router-angularjs.js"></script>

4. Add the following code to your app.module.js (or similar):

angular.module('app.state', ['ui.router']).config([
  '$uiRouterProvider',
  function($uiRouterProvider) {
    var StickyStates = window['@uirouter/sticky-states'];
    $uiRouterProvider.plugin(StickyStates.StickyStatesPlugin);
  }
]);

[christopherthielen]

I know that this is an issue today. I'll write up some instructions when I get back from vacation.

[dsills22]

I am also caught in between upgrading to ui-router 1.0.0-beta.3 and wanting a sticky states feature, but this port (of the sticky states feature on the legacy ui-router) is not providing a simple js release file. @christopherthielen, can you please provide one?

[Aduer]

@pamo In order to use sticky-states you need to make it running beside the ui-router-core host. In case your application already uses a bundle that includes the angular 1 stuff+core you have to replace that bundle with a ui-router-core 'standalone' pluginhost and a angular 1 plugin, otherwise you will end up with two instances of the ui-router-core running in your app.

The angular 1 router plugin is already available on bower and i used that. The other components (core & sticky state) are not availabe so you have to build them from sources (but it's quite easy because the author has already provided the scripts to do that beside the code)

The script that follow can be launched in a directory outside you project (in order to not pollute everything) and then you can copy & paste only the built libraries inside your project where do you prefer

mkdir WORKSPACE
cd WORKSPACE

git clone --branch 5.0.3 https://github.com/ui-router/core.git ui-router-core
cd ui-router-core
npm install
npm run build
echo "now you can deploy the file WORKSPACE/ui-router-core/_bundles/ui-router-core.min.js and include int in your html file"

cd ..
git clone --branch 1.3.0 https://github.com/ui-router/sticky-states.git
cd sticky-states
npm install
echo "WORKSPACE/sticky-states/bundles/ui-router-sticky-states.js should have been already generated as a post install script.. deploy it in your app and include it in your html file"

cd ..
bower init (you can provide meaningless info to the question asked by the wizard)
bower install angular-ui-router
echo "Grab only the file  bower_components/angular-ui-router/release/ui-router-angularjs.min.js and deploy it to your app and include it in your html file"

Hope this works, i'm not at work now and i'm not able to check if this was the routine that i really did

[christopherthielen]

I added 5 example sticky-states projects:

• AngularJS + npm + webpack
• AngularJS + bower + script tags
• AngularJS + npm + script tags
• Angular CLI
• Create React App

[dsills22]

@Aduer, I updated with a plunker in case it might help you or others: http://plnkr.co/edit/JD9fEVnjvFMJmnmRIM2v?p=preview

[dsills22]

Hi all (@witoldszpur, @hinet2013), I ended up writing a migration of the typescript code to js, which works for me. The code can be found here:

https://stackoverflow.com/questions/42914806/ui-router-state-change-keep-controller-and-scope-but-destroy-dom/

Hopefully this helps you :)

[pamo]

@Aduer, thank you for posting these steps! It would be very helpful if these steps were documented with explicit examples somewhere in the documentation for getting started in this repo/project before the issue is closed. 😅
I'm sure the people in this thread (including my team and me) would be able to verify them.

[mohanrao]

@christopherthielen Can you provide any example If my project is using bower and old vanilla js without any js module loaders, then how to use sticky-state?

[Aduer]

After recent updates by the author no more workaround are required!
I managed to make everything working by

• Stopped using the full angular-ui-router bundle in favor to the plugin version (ui-router-angularjs.min.js) available in the same bower package "angular-ui-router": "^1.0.3"
• Using ui-router-core v5.0.3 compiled & bundled by me from sources by using the npm scripts that are shipped with the source code (again: thank you chris!)
• Using ui-router-sticky-states v1.3.0 compiled & bundled by me from sources using the npm scripts that have been recenlty added to the source code

With this stuff i got the full-functionality on Angular 1 with plain JS, so in my point of view this issue can be closed

---

edit by cthielen: do not use angular-ui-router package. instead, use @uirouter/angularjs

[buksy90]

What if copying files is not a possibility? Is it possible to create ng1-sticky-states github project that would be prebuild for ng1? Unfortunately, I need it to work with simple bower install.

[bennettatoms]

I am running into the same issue. I just upgraded to 1.0.0-rc.1 from 0.3.x and reworked a lot of my application in the process, primarily in order to be able to take advantage of sticky states, but it's not clear how to configure them. Any advice would be much appreciated!

[hinet2013]

Thank you Chris. In the meanwhile i tried to compile by myself the .ts files...

After npm run build i don't know how to handle the index.js & stickyStates.js that got generated in lib and lib-esm directories

Can we get a quick advice on how to proceed to obtain a single js file to be referenced in html file via <script src='..> and then configure the plugin retrieving the instance from window (like what we already do for visualizer plugin..)

[christopherthielen]

Sticky states imports ui-router-core but angular-ui-router doesn't have that. If using UMD bundles, we will need a shim that re-exposes angular-ui-router as ui-router-core. Then you can get the window['ui-router-sticky-states'] and find the plugin class to register with the router

[hinet2013]

I tried the howto at the end of the page https://ui-router.github.io/ng1/ but with ui-router-core and sticky-states instead of angular-ui-router.
Ended up with a huge file of 8k LOC (feeling to having duplicated inside of plugin something that was already present in aungular-ui-router)
The file exposes the plugin instance through window object but when loaded an error raised about 'stateDeclaration params is not a function'

Is this attempt totally random?

[pamo]

is porting from TS to JS the only option at this point?

[Aduer]

Hi Chris, what do you mean with

shim that re-exposes angular-ui-router as ui-router-core
??

I tried to mimic the way the Visualizer bundle is generated

`
git clone --branch 3.0.0 https://github.com/ui-router/core.git ui-router-core
cd ui-router-core
npm install
npm link
npm run build

cd ..

#Building Visualizer plugin from sources: the bundle built by me works in my application...
git clone --branch 3.1.1 https://github.com/ui-router/visualizer.git
cd visualizer
move bundles bundles.ORIG
npm install
npm link ui-router-core
npm run build

cd ..

git clone --branch 1.2.0 https://github.com/ui-router/sticky-states.git
cd sticky-states

//1 - Edited package.json to add 'bundle' commands ispired by Visualizer plugin
//2 - Edited tsconfig.json to mimic Visualizer's configuration
//3 - Copied webpack.config.js from Visualizer and adapted naming

npm install
npm link ui-router-core
npm run build
`

I was able to load the plugin at config time and get the StickyStatesPlugin instance but it crashes in attempting to use some 'core' API (seems that he uses a bundled copy of it instead of the one provided by anular-ui-router)

Can you provide some hints?

PS. the solution proposed by dsills22 based on decoration approach does not worked for me..

[Aduer]

Thank you @dsills22 . Your solution works in general, but i encounter a crash when a redirect happens with options 'reload: true'

TypeError: P(...) is undefined Stack trace: e@http://xxxxxxxxxxxxx/vendor/managed/angular-ui-router/js/angular-ui-router.min.js:7:29510 on</e.prototype.hookBuilder@http://xxxxxxxxxxxxx/vendor/managed/angular-ui-router/js/angular-ui-router.min.js:9:17593 e@http://xxxxxxxxxxxxx/vendor/managed/angular-ui-router/js/angular-ui-router.min.js:9:12970 jr</e.prototype.create@http://xxxxxxxxxxxxx/vendor/managed/angular-ui-router/js/angular-ui-router.min.js:8:25409 StickyStatesUtilFactory/SERVICE.calculateStickyTreeChanges@http://xxxxxxxxxxxxx/vendor/static/sticky-states-dsills2/sticky-states-util.js:205:43 $delegate.create@http://xxxxxxxxxxxxx/resources/js/app.min.js:2:22176 Br</e.prototype.transitionTo@http://xxxxxxxxxxxxx/vendor/managed/angular-ui-router/js/angular-ui-router.min.js:9:7485 $delegate.transitionTo@http://xxxxxxxxxxxxx/resources/js/app.min.js:2:23177 Br</e.prototype.go@http://xxxxxxxxxxxxx/vendor/managed/angular-ui-router/js/angular-ui-router.min.js:9:6134 <here $state.go(stateObject, params, {reload: true}

[voltechs]

@dsills22 Thank you so much for your work on this!

Has anyone gotten this to work with modals? I want modals to pop up via deep linking, with a default view in a different state/view. For example, a dashboard.

[jfoo1984]

Thanks @Aduer! I'll be trying those instructions out, and let you know if i find anything different!

[christopherthielen]

New release of sticky states 1.4.1 should address many problems from this thread.

For webpack + (ES6 or Typescript) users:

import { StickyStatesPlugin } from '@uirouter/sticky-states';
...
ngmodule.config(['$uiRouterProvider', $uiRouter => {
  $uiRouter.plugin(StickyStatesPlugin);

For webpack + ES6 users:

var StickyStatesPlugin = require('@uirouter/sticky-states').StickyStatesPlugin;
...
ngmodule.config(['$uiRouterProvider', $uiRouter => {
  $uiRouter.plugin(StickyStatesPlugin);

For UMD bundle <script> tag users:

var StickyStatesPlugin = window['@uirouter/sticky-states'].StickyStatesPlugin;
...
ngmodule.config(['$uiRouterProvider', $uiRouter => {
  $uiRouter.plugin(StickyStatesPlugin);

[jfoo1984]

Thanks @christopherthielen ! will give it a shot soon.

[killersite]

@christopherthielen when I try to follow your instructions above I get a build error like - "invalid expression export' or similar.
My webpack babel loader is ignoring everything in 'node_modules' so I think it does not recognize the ES6 code I am referencing with @uirouter/sticky-states...
Any helpful ideas would be appreciated. Is there a demo NG1 app that shows the usage?
Thanks

[mathiasmoeller]

@mohanrao I have exactly the same structure. Did you find a solution yet?

[mohanrao]

Right now I did what @Aduer suggested. No other options

[cesiya23]

import {StickyStatesPlugin} from '@uirouter/sticky-states';

Codes above will reach webpack compile errors:

WARNING in ./~/@uirouter/sticky-states/lib/stickyStates.d.ts
    Module parse failed: /Users/Cynn/project/node_modules/@uirouter/sticky-states/lib/stickyStates.d.ts Unexpected token (2:8)
    You may need an appropriate loader to handle this file type.
    SyntaxError: Unexpected token (2:8)
        at Parser.pp$4.raise (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:2221:15)
        at Parser.pp.unexpected (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:603:10)
        at Parser.pp.semicolon (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:581:61)
        at Parser.pp$1.parseExpressionStatement (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:966:10)
        at Parser.pp$1.parseStatement (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:730:24)
        at Parser.pp$1.parseTopLevel (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:638:25)
        at Parser.parse (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:516:17)
        at Object.parse (/Users/Cynn/project/node_modules/acorn/dist/acorn.js:3098:39)
        at Parser.parse (/Users/Cynn/project/node_modules/webpack/lib/Parser.js:902:15)
        at DependenciesBlock.<anonymous> (/Users/Cynn/project/node_modules/webpack/lib/NormalModule.js:104:16)
        at DependenciesBlock.onModuleBuild (/Users/Cynn/project/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
        at nextLoader (/Users/Cynn/project/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
        at /Users/Cynn/project/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
        at Storage.finished (/Users/Cynn/project/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
        at /Users/Cynn/project/node_modules/graceful-fs/graceful-fs.js:78:16
        at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)
     @ ./~/@uirouter/sticky-states/lib ^\.\/.*$

I use webpack + ts-loader + babel to compile (code transform), here goes my webpack loader configuration:

module.exports = {
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'ng-annotate!babel?' + JSON.stringify({
          presets: ['es2015', 'stage-3'],
          plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties']
        }) + '!ts-loader?allowJsEntry=true' // plugins here is not necessary for everyone
      }
    ]
  }
};

I excluded node_modules directory in configuration of ts-loader, so modules in node_modules will not be parsed by webpack. There's a directory called _bundles includes compiled codes.

Thanks @christopherthielen .

---

🍨 Solution:

import uiRouter from 'angular-ui-router';
import {StickyStatesPlugin} from '@uirouter/sticky-states/_bundles/ui-router-sticky-states';
export default angular
  .module('router', [
    uiRouter
  ])
  .config(['$uiRouterProvider', function ($uiRouterProvider) {
    $uiRouterProvider.plugin(StickyStatesPlugin);
  }])
  .config(['$stateProvider', function ($stateProvider) {
    // states ...
    $stateProvider.state('app', {});
  }])
  .name;

devDependencies:

├── [email protected]
├─┬ @uirouter/[email protected]
├─┬ [email protected]
│ └── @uirouter/[email protected]

This should definitely be put on the front README

[christopherthielen]

What if copying files is not a possibility? Is it possible to create ng1-sticky-states github project that would be prebuild for ng1? Unfortunately, I need it to work with simple bower install.

Sticky states will not be published on bower. Bower is deprecated. You'll have to find some way to copy files from node_modules.

[soroushNeshat]

@christopherthielen Thank u very much for AngularJS + npm + script tags example . it worked for me

[brazorf]

This #4 (comment) worked for me.
Thanks @molehillrocker @Aduer @christopherthielen

[manishb-socialcurry]

In case anyone comes here that uses no bundler at all (like me), here is my approach:

1. Hit npm install @uirouter/core @uirouter/sticky-states @uirouter/angularjs.
2. Copy ui-router-core[.min].js, ui-router-sticks-states[.min].js and ui-router-angularjs[.min].js to a directory where you can load it from, e.g. your dist directory.
3. Include the scripts in your index.html:

<script src="/deps/angular-ui-router/release/ui-router-core.js"></script>
<script src="/deps/angular-ui-router/release/ui-router-sticky-states.js"></script>
<script src="/deps/angular-ui-router/release/ui-router-angularjs.js"></script>

1. Add the following code to your app.module.js (or similar):

angular.module('app.state', ['ui.router']).config([
  '$uiRouterProvider',
  function($uiRouterProvider) {
    var StickyStates = window['@uirouter/sticky-states'];
    $uiRouterProvider.plugin(StickyStates.StickyStatesPlugin);
  }
]);

@molehillrocker, I tried your solution. It somehow did not work for me. I then printed out the variable
StickyStates which prints an empty object "{ }" and when I print out StickyStates.StickyStatesPlugin, it tells me that it is undefined!

Where am I making a mistake?

Here is the stub from my index.html:

` <script src="scripts/plugins/angular-ui-router/release/ui-router-core.min.js" ></script>

  <script src="scripts/plugins/angular-ui-router/release/ui-router-angularjs.js" ></script>
  <script src="scripts/plugins/angular-ui-router/release/angular-ui-router.min.js" ></script>
  <script src="scripts/plugins/angular-ui-router/release/resolveService.min.js" ></script>
  <script src="scripts/plugins/angular-ui-router/release/stateEvents.min.js" ></script>

  <script src="scripts/plugins/angular-ui-router/release/ui-router-sticky-states.js" ></script>
  <script src="scripts/plugins/angular-ui-router/release/ui-router-dsr.min.js" ></script>

`
And, here is my app.js:

.config(['$uiRouterProvider', function($uiRouterProvider) { var StickyStates = window['@uirouter/sticky-states']; console.log("StickyStates: " + JSON.stringify(StickyStates)); console.log("StickyStatesPlugin: " + JSON.stringify(StickyStates.StickyStatesPlugin)); //$uiRouterProvider.plugin(StickyStatesPlugin); }]);

Please help.

[manishb-socialcurry]

Also, do you have to add all states using stateRegistry of $uiRouteProvider like @christopherthielen has done in his angularjs + npm + scripts example:

`var stateRegistry = $uiRouterProvider.stateRegistry;

stateRegistry.register({
name: 'home',
url: '/home',
sticky: true,
views: {
home: 'generic',
},
});`

Can I not add states the following way?:

`$stateProvider

        // setup an abstract state for the tabs directive
        .state('welcome', {
            url: '/',
            templateUrl: 'views/welcome-screen/welcome.html',
            controller: "authController"
        })
        .state('enterphonenumber', {
            url: '/enterphonenumber',
            templateUrl: 'views/signup/enterphonenumber.html',
            controller: "signupController"

        })
        .state('enterotp', {
            url: '/enterotp',
            templateUrl: 'views/signup/enterotp.html',
            controller: "signupController"
        })`