Update from 1.0.0-beta.2 to 1.0.0-beta.3 brings TS errors

[artaommahe]

I'm using TypeScript 1.8.9 with ng1 and webpack. Update to beta.3 brings this

[default] node_modules/angular-ui-router/commonjs/state/stateService.d.ts:16:5           
    Duplicate identifier 'readonly'.                                                                               
[default] node_modules/angular-ui-router/commonjs/state/stateService.d.ts:16:14          
    '=' expected.                                                                                                  
[default] node_modules/angular-ui-router/commonjs/state/stateService.d.ts:16:14          
    Cannot find name 'transition'.                                                                                 
[default] node_modules/angular-ui-router/commonjs/state/stateService.d.ts:16:24          
    ';' expected.                                                                                                  
[default] node_modules/angular-ui-router/commonjs/state/stateService.d.ts:17:5           
    Duplicate identifier 'readonly'.                                                                               
[default] node_modules/angular-ui-router/commonjs/state/stateService.d.ts:17:14          
    '=' expected.                                                                                                  
[default] node_modules/angular-ui-router/commonjs/state/stateService.d.ts:17:14          
    Cannot find name 'params'.                                                                                     
...
and 10-20 more errors from this file

[andrew-hamilton-dev]

I fixed this by removing the 'readonly' params from stateService.d.ts locally to get my build working. It looks like this is a typescript 2.0 propert, so if your not using ts 2.0. This will freak out.

[elesdoar]

My app with requirejs show:

Cannot read property 'module' of undefined

in angular-ui-router.js file, line 6625 where:

var app = angular.module("ui.router.angular1", []);

[christopherthielen]

@artaommahe yes, this is because we build with typescript 2.0. Unfortunately building with 2.0 broke backwards compatibility for us.

Angular 2 team also builds with typescript 2.0. They have a build step (in brocolli) where they strip the readonly markers out.

Typescript 2.0 is now final, but I don't think that means all users should upgrade immediately. Maybe we can do something similar before publishing to strip out the readonly markers too. Eventually, we'll drop support for typescript 1.x though.

[epelc]

@christopherthielen do you know how we might fix @elesdoar's issue? I'm having the same problem.

Running angular 1/2 hybrid trying to upgrade from ui-router 0.3.x to 1.0.0-beta.3 just for the ng1 portion.

[christopherthielen]

@epelc @elesdoar can you explain how to reproduce this issue?

Cannot read property 'module' of undefined

This means that angular is undefined when ui-router is loaded. UI-Router is distributed as a UMD bundle, which should be compatible with require.js.

[epelc]

@christopherthielen I'm using webpack to load it and angular. ui-router is loading after angular but I'm still getting this issue for some reason. Do you know if 0.3.x also used UMD?

I narrowed it down a little on our end. I got the same error when attempting to upgrade an old version of our app before we started switching to typescript and angular 2.

[christopherthielen]

@epelc 1.0 is bundled using webpack. 0.3.x is using a hand-made UMD-like surround, but I think it's not full UMD: https://github.com/angular-ui/ui-router/blob/legacy/Gruntfile.js#L23-L29

ui-router umd code can be seen at the top of the bundle: https://unpkg.com/[email protected]/release/angular-ui-router.js where it depends on (requires) angular.

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory(require("angular"));
    else if(typeof define === 'function' && define.amd)
        define("angular-ui-router", ["angular"], factory);
    else if(typeof exports === 'object')
        exports["angular-ui-router"] = factory(require("angular"));
    else
        root["angular-ui-router"] = factory(root["angular"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_57__) {
return /******/ (function(modules) { // webpackBootstrap

If you can publish an example to github or something I can take a look. However, this should be moved to a different issue, since it's unrelated to the original issue reported about Typescript.

[christopherthielen]

Fixed by c8162ee

[dustinsmith1024]

Am I required to use webpack for 1.0 beta? I tried loading with requirejs and get this ui.router not available. I didn't change any configs from ui-router 3.

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module admin due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:nomod] Module 'ui.router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

[christopherthielen]

Am I required to use webpack for 1.0 beta?

Nope, requirejs should work. We ship a UMD bundle which should be compatible with requirejs, as far as I know. I've never used requirejs, however.

[dustinsmith1024]

By ship a UMD bundle you mean https://unpkg.com/[email protected] should work? Or there is a different version out there somewhere?

Sorry stuck where to look.

[christopherthielen]

@dustinsmith1024 We publish (ship) to NPM and Bower. The URL you linked is a CDN for NPM. Yes, the linked file is the UMD bundle and it should work.

However, I suggest you retrieve the package using a package manager (npm or yarn preferred)

npm install --save angular-ui-router@next

Can you provide any other details about how you're trying to integrate ui-router using requirejs? Assume I don't know anything about your setup.

[dustinsmith1024]

I got it working. We had a requirejs shim in place before and I had to remove that and reference the angular-ui-router versus our shim name. Thanks for the help.