New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(NgComponentOutlet): add NgModule support to NgComponentOutlet directive #14088

Merged

vicb merged 1 commit into angular:master from jasonaden:module_to_component_outlet

Jan 26, 2017

Contributor

jasonaden commented Jan 24, 2017

…rective

Allow NgComponentOutlet to dynamically load a module, then load a component from
that module. Useful for lazy loading code, then add the lazy loaded code to the
page using NgComponentOutlet.

Closes #14043

Please check if the PR fulfills these requirements

The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (check one with "x")

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Other... Please describe:

What is the current behavior? (You can also link to an open issue here)

What is the new behavior?

Does this PR introduce a breaking change? (check one with "x")

[ ] Yes
[ ] No

If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

Other information:

googlebot commented Jan 24, 2017

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
If you signed the CLA as a corporation, please let us know the company's name.

googlebot added the cla: no label

jasonaden force-pushed the module_to_component_outlet branch from fcce7bc to 6276120 Compare

January 24, 2017 23:46

googlebot commented Jan 24, 2017

CLAs look good, thanks!

googlebot added cla: yes and removed cla: no labels

mhevery added the action: cleanup label

mhevery suggested changes

View reviewed changes

modules/@angular/common/src/directives/ng_component_outlet.ts

                *
                * You can control the component creation process by using the following optional attributes:
                *
-               * * `ngOutletInjector`: Optional custom {@link Injector} that will be used as parent for the
+               * * `ngComponentOutletInjector`: Optional custom {@link Injector} that will be used as parent for
+               * the

Contributor

mhevery Jan 24, 2017

formatter mess up, please join lines.

modules/@angular/common/src/directives/ng_component_outlet.ts

		@@ -57,16 +63,16 @@ import {ComponentFactoryResolver, ComponentRef, Directive, Injector, Input, OnCh
		* @experimental

Contributor

mhevery Jan 24, 2017

Add example for Module

modules/@angular/common/src/directives/ng_component_outlet.ts

                * ```
                * <ng-container *ngComponentOutlet="componentTypeExpression;
                *                                   injector: injectorExpression;
-               *                                   content: contentNodesExpression">
+               *                                   content: contentNodesExpression;
+               *                                   module: moduleExpression;">

Contributor

mhevery Jan 25, 2017

rename to ngModuleFactory

modules/@angular/common/src/directives/ng_component_outlet.ts

                * component.
                *
-               * * `ngOutletContent`: Optional list of projectable nodes to insert into the content
+               * * `ngComponentOutletContent`: Optional list of projectable nodes to insert into the content
                * section of the component, if exists. ({@link NgContent}).

Contributor

mhevery Jan 25, 2017

remove @link since there is nothing such as NgContent

modules/@angular/common/src/directives/ng_component_outlet.ts

@@ @@ -78,9 +84,19 @@ export class NgComponentOutlet implements OnChanges { @@
                   if (this.ngComponentOutlet) {
                     let injector = this.ngComponentOutletInjector || this._viewContainerRef.parentInjector;
+                    if (this.ngComponentOutletModule) {
+                      this.moduleRef = this.ngComponentOutletModule.create(injector);

Contributor

mhevery Jan 25, 2017

make sure that moduleRef does not have value and destroy it.
Guard this on module change only. changes.ngComponentOutletModule

modules/@angular/common/src/directives/ng_component_outlet.ts

                 @Input() ngComponentOutlet: Type<any>;
                 @Input() ngComponentOutletInjector: Injector;
                 @Input() ngComponentOutletContent: any[][];
+                @Input() ngComponentOutletModule: NgModuleFactory<any>;

Contributor

mhevery Jan 25, 2017

Turn this into a setter and create/destroy module on setter.

Contributor Author

jasonaden Jan 25, 2017

I think we decided not to do it that way, right? Changed to clean up moduleRef at the right time.

modules/@angular/common/test/directives/ng_component_outlet_spec.ts

+                       expect(moduleRef.destroy).not.toHaveBeenCalled();
+                       fixture.destroy();
+                       expect(moduleRef.destroy).toHaveBeenCalled();
+                     }));

Contributor

mhevery Jan 25, 2017

add one more test that updating a type should not rebuild module injector.

Contributor Author

jasonaden Jan 25, 2017

Added two tests, one for updating the component and one for updating component and module.


          feat(NgComponentOutlet): add NgModule support to NgComponentOutlet di…

13f2b6b

…rective

Allow NgComponentOutlet to dynamically load a module, then load a component from
that module. Useful for lazy loading code, then add the lazy loaded code to the
page using NgComponentOutlet.

Closes angular#14043

jasonaden force-pushed the module_to_component_outlet branch from 6276120 to 13f2b6b Compare

January 25, 2017 21:07

mhevery approved these changes

View reviewed changes

mhevery added action: merge pr_state: LGTM and removed action: cleanup labels

vicb merged commit 3ef73c2 into angular:master

juleskremer pushed a commit to juleskremer/angular that referenced this pull request


          feat(NgComponentOutlet): add NgModule support to NgComponentOutlet di…

82cc38b

…rective (angular#14088)

Allow NgComponentOutlet to dynamically load a module, then load a component from
that module. Useful for lazy loading code, then add the lazy loaded code to the
page using NgComponentOutlet.

Closes angular#14043

angular-automatic-lock-bot bot commented Sep 10, 2019

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.}

angular-automatic-lock-bot bot locked and limited conversation to collaborators

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.