I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I am adding a <webview> when the app first runs in a component, and then a second one on a button click. The first one is displayed without issue. The second one throws an error:

Uncaught TypeError: GuestViewContainer[(this.viewType + "BrowserPlugin")] is not a constructor

The application is hosted as a Chrome app. The webviews are added by being contained in a component, the components are added via *ngIf.

The issue also manifests when adding the component containing the webview via the router and activating a route.

It is unclear to me if this is a bug in Angular or in Chrome. I am only able to reproduce the issue in Chrome.

Expected behavior

I expect that the webview will be displayed properly without error whenever its added - when the app first runs or if its displayed later in response to an event or route being activated.

Minimal reproduction of the problem with instructions

STEPS TO REPRODUCE

Load a webview in angular component either on event (e.g. button click) or via activating an angular route. You will get error "Uncaught TypeError: GuestViewContainer[(this.viewType + "BrowserPlugin")] is not a constructor" and callstack shown in "Others" section.

MINIMAL DEMO

To run packaged chrome app reproduction of the issue:

• Unzip the .zip file : https://github.com/ArtOfContext/angular-chromeapp-adding-webview-throws-error-reproduction/raw/master/angular-chromeapp-adding-webview-throws-error-reproduction.zip
• Navigate Chrome browser to chrome://extensions
• check the Developer mode button checkbox
• Click Load unpacked extension... button
• Browse to the folder that you just unzipped
• Find the Chrome app that was just added in extensions window, click the launch button
• Again in extensions window for the app, click the index.html
• In the application, click the button that says "Click to add 2nd webview"
• Check the javascript console.
• See error message - the error and callstack is listed in Others section below

To build the bug reproduction from source:

• pull git repo: https://github.com/ArtOfContext/angular-chromeapp-adding-webview-throws-error-reproduction
• requires Angular CLI
• npm install
• run the following: ng build --aot npm run chromeapp # this copies manifest.json and background.js into the dist folder

• The packaged chrome app is now inside of the "dist" folder. You can use this folder and the Load unpackaged extension button in chrome://extensions

What is the motivation / use case for changing the behavior?

I want to be able to use <webview>s as I would other HTML components inside of Angular / Chrome apps. In Chrome apps, iframes are not available and we need similar functionality. Webview is the answer - its a a powerful component in Chrome apps and there are several capabilities we require.

Environment

Angular version: 4.4.3


Browser:
- [ x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.0.0  
- Platform:  Windows 

Others:


The reproduction repo contains another JavaScript only version of the app, it does not use Angular.  I am not able to reproduce the issue in that case.  That app is "javascript-only-working".

Call stack of error in the Angular version:
Uncaught TypeError: GuestViewContainer[(this.viewType + "BrowserPlugin")] is not a constructor
    at WebViewImpl.GuestViewContainer.createInternalElement$ (extensions::guestViewContainer:97:7)
    at WebViewImpl.GuestViewContainer (extensions::guestViewContainer:26:41)
    at new WebViewImpl (extensions::webView:19:22)
    at HTMLElement.proto.createdCallback (extensions::guestViewContainer:246:5)
    at DefaultDomRenderer2.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.createElement (chrome-extension://abjegfgbmmkgiifemllflgcpdpjdecjj/vendor.bundle.js:24397:25)
    at DebugRenderer2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRenderer2.createElement (chrome-extension://abjegfgbmmkgiifemllflgcpdpjdecjj/vendor.bundle.js:20357:49)
    at createElement (chrome-extension://abjegfgbmmkgiifemllflgcpdpjdecjj/vendor.bundle.js:15950:27)
    at createViewNodes (chrome-extension://abjegfgbmmkgiifemllflgcpdpjdecjj/vendor.bundle.js:18946:44)
    at callViewAction (chrome-extension://abjegfgbmmkgiifemllflgcpdpjdecjj/vendor.bundle.js:19429:13)
    at execComponentViewsAction (chrome-extension://abjegfgbmmkgiifemllflgcpdpjdecjj/vendor.bundle.js:19338:13)