[ComponentRouter] templateUrl and lifecycle hook in Angular 1

[mediacad]

In my application in Angular 1, when I use the property 'template' in the directive, $onActivate works fine. But when I use the property 'templateUrl', $onActivate doesn't work (but the template is displayed fine).
Exemple :

angular
      .module('test')
      .directive('testComponent', ['$q',
        function($q) {
          return {
            templateUrl: 'templatePath', // $onActivate DOESN'T WORK
// OR
            template: 'hello', // $onActivate WORKS
            controllerAs: 'ctrl',
            controller: [
              '$q',
              Test]
          };
        }]);

  function Test($q) {
    console.log('controller');
  }
  Test.prototype.$onActivate = function() {
    console.log('$onActivate');
  };

Is it a bug ?

[vguede]

Here is a Plunker (navigate between Home and Test) :
http://plnkr.co/edit/jLp9Z7DGMl1Dl09dQwF8?p=preview.
Thanks to @brandonroberts

[vguede]

@btford any idea ?

[vguede]

@btford any idea of how long to fix this bug ?

[btford]

No

On Wed, Oct 28, 2015, 12:03 Vincent Guédé [email protected] wrote:

@btford https://github.com/btford any idea of how long to fix this bug ?

—
Reply to this email directly or view it on GitHub
#4633 (comment).

[vguede]

I made other tests : $onDeactivate either doesn't work with templateUrl.
It's an important bug which prevents using the router in an angular 1 application.
Is there a plan to fix this bug ? Thanks.

[0x-r4bbit]

@vguede fancy sending a PR with (at least) a failing test? Maybe we can sort things out together then :)

[vguede]

@PascalPrecht I don't have a PR, but if it can helps, there is this Plunker : http://plnkr.co/edit/jLp9Z7DGMl1Dl09dQwF8?p=preview

[0x-r4bbit]

@vguede correct! Let's make a PR out of it! :)

[brandonroberts]

@vguede are you using the npm build or your own built angular_1_router file?

[vguede]

@brandonroberts I use my own built angular_1_router file. I will try with the npm build.

[vguede]

I updated my plunkr with the npm build : same bug.

[brandonroberts]

@vguede I wasn't suggesting you use the npm build. I was gonna suggest a temporary fix, but need to verify it will work

[vguede]

@brandonroberts if you have a fix, it will help me a lot !

[brandonroberts]

@vguede My suggestion is based on you already having your templates loaded using the $templateCache. Basically you wrap the section that checks for the $onActivate in a $timeout. I'm blaming it on the digest cycle and I'm just using a $timeout to force another cycle. The $timeout change starts on line 156 in the angular_1_router.js build. Here is a working plunk that includes the change in the angular 1 router file.

http://plnkr.co/edit/UzaDGOyeh6Qt7a0Wb22j?p=preview

[vguede]

@brandonroberts It works fine indeed if my templates are already loaded in the $templateCache. Many thanks to this fix !

[vguede]

@brandonroberts It isn't the same issue, but have you a fix to implement redirect in $canActivate hook (see #2965) ?

[brandonroberts]

@vguede You can use DI with the $canActivate hook. I updated the plunk example with an admin route.

http://plnkr.co/edit/UzaDGOyeh6Qt7a0Wb22j?p=preview

[vguede]

@brandonroberts I forked your plunkr using promises in $canActivate (http://plnkr.co/edit/UfDNQIEMIGK9LNzmFhG3?p=preview). Do you know why it doesn't work ?

[brandonroberts]

@vguede You should always return a boolean, whether it be a true/false or a promise that resolves true/false. Don't reject in the lifecycle hooks. So just change your deferred.reject() to deferred.resolve(false) and your deferred.resolve() to deferred.resolve(true)

[vguede]

@brandonroberts It works fine ! Many thanks again ;o)

[brandonroberts]

👍

[petebacondarwin]

How about we piggy back on top of the component's $onInit method? The router could capture the component's $onInit and wrap it with a function that also registers the component with the router so that it knows that it can call $routerOnActivate. This could also remove the need to search the DOM for the controller...

[petebacondarwin]

How about we piggy back on top of the component's $onInit method? The router could capture the component's $onInit and wrap it with a function that also registers the component with the router so that it knows that it can call $routerOnActivate. This could also remove the need to search the DOM for the controller...

Nope that doesn't work because we still need to be told when the component is being instantiated.

[petebacondarwin]

Another possibility is to hook into the same API that Protractor uses to know when all XHR requests have settled (i.e. completed)...

[petebacondarwin]

One more possibility is, somehow, to expose the templateUrl request promise on the link function that is returned so that we can hook into doing work when the full async compilation has completed...

[KhoaSydney]

Hi @petebacondarwin,

Do we have the fix for this issue in angular router 1 yet?

cheers,
Khoa

[petebacondarwin]

Yes, this has landed and you can get it by running npm install --save-dev @angular/[email protected]

[petebacondarwin]

Oops, I was wrong. It has not yet landed in npm.

[KhoaSydney]

that's what I thought. Will the fix be pushed to npm any time soon?

[petebacondarwin]

I just rebased and fixed a formatting issue on #6978
So I think that @btford will merge it when he wakes tomorrow.
Hopefully he can publish 0.2.0 straight after that (with dist-tag latest)
In the meantime you should be able to build the router yourself off of my PR if you want to try it out...

[KhoaSydney]

thanks @petebacondarwin

[KhoaSydney]

@btford are you able to push the fix for isuee #6978 to npm ?

[ericj79]

Is this fix available in npm yet? Or is there a timeline for when that will happen?

[petebacondarwin]

0.2.0 has not yet been released. The timeline is the next few days, I believe

[petebacondarwin]

#6978 - has now been merged into master

[marcalj]

I'm trying to find registry information about @angular/router but I don't understand the syntax.

There's nothing I can find in the NPM registry (https://www.npmjs.com/package/angular) and the repository https://github.com/angular/router has not this tags you're mentioning. It has some but very old.

Can anyone clarify this, and explain how to find this package information in the npm registry?

Thanks a lot! :)

[petebacondarwin]

Right now the versions on npm are not that useful: latest 0.0.1 and pre-release 0.1.0.
We are working to cut 0.2.0 as latest and you should be able to get it via npm as npm install @angular/router

The npm repository website doesn't like scope modules (e.g. those starting with @angular). You can get the registry information by running npm info @angular/router.

The https://github.com/angular/router repository is obselete so ignore it.

[dmackerman]

I'm having issues getting $routerOnActivate to fire in the new Component Router. I'm not using templateUrl, just uses statically loaded templates with Webpack. Are there still issues here?

[petebacondarwin]

We are currently undertaking a design review of the component router. Please watch this space over the next couple of weeks

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}