refactor(angular_1_router): Angular 1.X component integration #5278
Conversation
|
@coutin thanks for your PR! Quick question: wouldn't this break existing code where directives are created using Maybe we need to support both? |
|
@PascalPrecht of course it works with default directive config. As the restrict value of the directive is by default is EA. |
|
I might got a bit confused because you changed the template from an attribute directive explicitly to be an element. I mean, you're saying that |
|
When you create a component by doing The actual ngOutlet directive code is expecting the component define in your route and your module to be at least an attribute directive, which makes it incompatible with the default config of a component. The change here is just to be aligned between the default config of a component in angular 1.5 and what the router is expecting as component in his route meaning at least an element directive. |
|
I see where you're coming from. I think we just need to keep in mind that there might be components that are defined as attribute.
If I'm understanding you right, component directives defined as attributes wouldn't work anymore then? |
|
Exactly as now neither component directive defined as element and class are working with the new router. If you define directive without restrict options it works fine. The thing is that you would always need to define the component restrict option to be able to use it with the router without this small change. |
|
Ah! Coin dropped. I thought this worked before haha. But then this is not only a |
|
Of course, but as you are defining Component in your route, you may expect to have at least the default configuration of a component working straight away. |
|
I stumbled upon this while working with the new router and angular 1.5, see the referenced bugs ... |
|
+1 |
|
Since angular/angular.js#13741 is now merged, we definetly need this or something similar to be merged 👍 |
|
👍 |
|
+1 for this @btford - are there tests in place for this ng1 router functionality? |
|
We are now using angular 1.5rc2 with this fix. Seems to be good ... |
In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes angular#6076 Closes angular#5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
|
Closing in favour of #6796 as it has tests etc |
In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes angular#6076 Closes angular#5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
In Angular 1.5 there is a new helper method for creating component directives. See https://docs.angularjs.org/guide/component for more information about components. These kind of directives only match the `E` element form and the previously component router only created HTML that matched directives that matched the `A` attribute form. This commit changes the `<ng-outlet>` directive so that it generates custom HTML elements rather divs with custom attributes to trigger the relevant component to appear in the DOM. Going forward, Angular 1.5 users are encouraged to create their router components using the following style: ``` myModule.componnet('component-name', { // component definition object }); ``` Closes angular/angular.js#13860 Closes #6076 Closes #5278 BREAKING CHANGE: The component router now creates custom element HTML rather than custom attribute HTML, in order to create a new component. So rather than ```html <div custom-component></div> ``` it now creates ```html <custom-component></custom-component> ``` If you defined you router components using the `directive()` helper and specified the `restrict` properties such that element matching was not allowed, e.g. `restrict: 'A'` then these components will no longer be instantiated by the component router and the outlet will be empty. The fix is to include `E` in the `restrict` property. `restrict: 'EA'` Note that this does not affect directives that did not specify the `restrict` property as the default for this property is already `EA`.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
With the latest update on angular 1.5, @shahata introduced a more convenient way to create component (Through this PR angular/angular.js#12933). The thing is the default configuration of the components prevent the new router to use it as is.
The default value of the restrict is 'E' whereas the ngOutlet directive is expecting components with a restrict 'A'
This PR is just simple modification of the ngOutlet directive to make the default configuration of a component working with the new router.