Develop Reference

APP_INITIALIZER not awaiting (Angular 13)

I am in the process of updating from okta/okta-angular 3.x to 5.x. It seems to have introduced an odd bug.
When the app first starts up, we have been using APP_INITIALIZER to execute appInitializerFactory(configService: ConfigService), which makes an http call to load configuration data.
The call looks like this:
public async loadConfig(): Promise<any> {
return this.httpClient.get('assets/config.json').pipe(settings => settings)
.toPromise()
.then(settings => {
this.config = settings as IAppConfig;
})
.catch(exception => {
console.log("Exception encountered while retreiving configuration");
});
}
Before updating to okta 5.x, the APP_INITIALIZER has been awaiting the promise. Now, it appears that other providers are being resolved before the promise in APP_INITILIZER has finished.
The resulting issue happens downstream at the oktaInitializerFactory, where it runs the following code:
public oktaConfig() {
return Object.assign({
onAuthRequired: (oktaAuth: OktaAuth, injector: Injector) => {
const router = injector.get(Router);
router.navigate(['/login']);
}
}, this.config.oktaConfig);
}
On the last line, this.config.oktaConfig is returning as undefined because the APP_INITIALIZER has not finished awaiting.
Heres the complete app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { Routes, RouterModule, Router } from '#angular/router';
import { APP_INITIALIZER, NgModule } from '#angular/core';
import { MaterialModule } from './modules/material/material.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { TablesComponent } from './components/tables/tables.component';
import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { ToolbarComponent } from './components/toolbar/toolbar.component';
import { LoginComponent } from './components/login/login.component';
import { FormsModule } from '#angular/forms';
import { RunLogComponent } from './components/run-log/run-log.component';
import { RunDataComponent } from './components/run-data/run-data.component';
import { ActionComponent } from './components/action/action.component';
import { ErrorsComponent } from './components/errors/errors.component';
import { OktaAuth } from '#okta/okta-auth-js';
import { OKTA_CONFIG, OktaAuthGuard, OktaAuthModule, OktaCallbackComponent } from '#okta/okta-angular';
import { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { TabulatorUserTableComponent } from './components/tabulator-user-table/tabulator-user-table.component';
import { TabulatorTableComponent } from './components/tabulator-table/tabulator-table.component';
import { DataLakeComponent } from './components/data-lake/data-lake.component';
import { IntegrationHistoryComponent } from './components/integration-history/integration-history.component';
import { IntegrationStatusComponent } from './components/integration-status/integration-status.component';
import { MatSpinnerButtonComponent } from './components/mat-spinner-button/mat-spinner-button.component';
import { ConfigService } from './services/config.service';
import { DataStudioComponent } from './components/data-studio/data-studio.component';
import { IntegrationDashboardComponent } from './components/integration-dashboard/integration-dashboard.component';
import { IntegrationSelectorToolbarComponent } from './integration-selector-toolbar/integration-selector-toolbar.component';
import { PrimaryButtonsComponent } from './components/primary-buttons/primary-buttons.component';
import { UserCardComponent } from './components/user-card/user-card.component';
import { HttpOktaInterceptorService } from './services/http-okta-interceptor.service';
import { DebugInfoComponent } from './components/debug-info/debug-info.component';
import { ModalModule } from './modal';
import { DragNDrop } from './components/dropbox/drag-n-drop';
import { ProgressComponent } from './components/dropbox/progress/progress.component';
const appRoutes: Routes = [
{
path: '',
component: DashboardComponent,
canActivate: [OktaAuthGuard]
},
{
path: 'login/callback',
component: OktaCallbackComponent
},
{
path: 'login',
component: LoginComponent
}
];
#NgModule({
declarations: [
AppComponent,
TablesComponent,
PageNotFoundComponent,
DashboardComponent,
ToolbarComponent,
LoginComponent,
RunLogComponent,
RunDataComponent,
ActionComponent,
ErrorsComponent,
TabulatorUserTableComponent,
TabulatorTableComponent,
DataLakeComponent,
IntegrationHistoryComponent,
IntegrationStatusComponent,
MatSpinnerButtonComponent,
DataStudioComponent,
IntegrationDashboardComponent,
IntegrationSelectorToolbarComponent,
PrimaryButtonsComponent,
UserCardComponent,
DebugInfoComponent,
ProgressComponent,
DragNDrop
],
imports: [
BrowserModule,
OktaAuthModule,
RouterModule.forRoot(appRoutes, { relativeLinkResolution: 'legacy' }),
BrowserAnimationsModule,
MaterialModule,
FormsModule,
HttpClientModule,
ModalModule
],
providers: [
{
provide: APP_INITIALIZER,
useFactory: appInitializerFactory,
deps:[ConfigService],
multi: true
},
{
provide: OKTA_CONFIG,
useFactory: oktaInitializerFactory,
deps:[ConfigService],
},
{
provide: HTTP_INTERCEPTORS,
useClass: HttpOktaInterceptorService,
multi: true,
deps: [OktaAuth]
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
export function appInitializerFactory(configService: ConfigService) {
return () => configService.loadConfig();
}
export function oktaInitializerFactory(configService: ConfigService) {
return configService.oktaConfig();
}
Is there a particular reason why my APP_INITIALIZER isn't finishing before other code executes? When I downgrade back to okta 3.x, this issue goes away.

As it turns out, upgrading from Okta 3 to 4+ or 5+ does introduce a change that makes loading auth server configuration in APP_INITIALIZER a non-viable option.
In a nutshell, okta-angular will attempt to connect to the auth server before the APP_INITIALIZER finishes. The workaround for this is to load the configuration data into the injector in main.ts, which fires off before the APP_INITIALIZER. This technically goes against the documentation in angular.io, but Okta support has verified this behavior [Source]
Another user does a similar implementation for Auth0, which encountered the same problem, linked here: stackoverflow.com/a/66957293/3202440

I have no idea how it was supposed to work in previous versions. you have appInitializerFactory that depends on ConfigService. ConfigService depends on HttpClient. HttpClient => HTTP_INTERCEPTORS i.e. on HttpOktaInterceptorService. HttpOktaInterceptorService => OktaAuth which most likely relies on OKTA_CONFIG.
It means that to construct a HttpClient(which is implicitly requried for initializer) you need OKTA_CONFIG already constructed. and it sounds very logical that this config initializer is being called earlier than APP_INITIALIZERs.
Most likely this dependency was introduced during refactoring, not just the update.
In your place I would try to eliminate dependency on a HttpClient in ConfigService and just make this request with a native api

How do I use a component from a different module to be the main component in routing declarations

Angular newbie here, your patience is highly appreciated.
What am I trying to achieve?
I'm trying to use the component in my auth module(i.e login
component) as the base component for the route myapp.com/login
Assuming that when embedding in **app.component.html works fine, the same should be true when I put that in app-routing.module.ts
code for app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: '/login', component: LoginComponent}, //Cannot find name 'LoginComponent'.ts(2304)
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
My component structure
I have an auth module which has a login and register components
And the basic ng-cli generated app structure.
code for authmodule
auth.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';
#NgModule({
declarations: [RegisterComponent, LoginComponent],
exports:[RegisterComponent,LoginComponent],
imports: [
CommonModule
]
})
export class AuthModule { }
code for app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {AppCommonsModule} from './app-commons/app-commons.module';
import {AuthModule} from './auth/auth.module'
import { HomeComponent } from './home/home.component'
#NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AppCommonsModule,
AuthModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

You are referring to LoginComponent in routing file but not importing it.
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: '/login', component: LoginComponent}, //Cannot find name 'LoginComponent'.ts(2304)
];
Add import statement and I believe it should fix typescript error.
import { LoginComponent } from './login/login.component';

You can't directly refer components declared as part of other modules in AppRoutingModule. You have to delegate the routing of LoginComponent to AuthModule by creating an AuthRoutingModule. Then in AppRoutingModule, create a route for login and pass the control to AuthRoutingModule.
Follow the below steps to create a route for LoginComponent.
Create a new file called AuthRoutingModule and include routes for the components in AuthModule in this file.
auth-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LoginComponent } from './login.component';
const authRoutes: Routes = [
{
path: '', // considering LoginComponent as the root path for AuthModule. This will be referred as 'login' from AppRoutingModule
pathMatch: 'full', // this is important to correctly match the empty path
component: LoginComponent
}
];
#NgModule({
imports: [RouterModule.forChild(authRoutes)],
exports: [RouterModule]
})
export class AuthRoutingModule {}
Note that forChild() method used here. RouterModule.forRoot() should be used only once and it should preferrable be there in AppRoutingModule. RouterModule.forChild() is used for creating routes for other child modules (and hence the forChild name).
Import AuthRoutingModule in AuthModule file.
Modify your AppRoutingModule file as below.
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { HomeComponent } from './home.component';
const authRoutes: Routes = [
{
path: '',
pathMatch: 'full', // this is important to correctly match the empty path
component: HomeComponent
},
{
path: 'login',
loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
// now this will refer the root path of AuthRoutingModule
},
// Redirect all invalid URLs to HomeComponent
{
path: '**',
redirectTo: '/'
}
];
#NgModule({
imports: [RouterModule.forRoot(authRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
As shown in the above code snippet, if you want to load a component from a child module for a particular route, AppRoutingModule should redirect the control to the child module using the loadChildren property.
You would have already imported both AppRoutingModule and AuthModule in your AppModule file. Just make sure that you are loading the AppRoutingModule first and then other child modules with routing (i.e., AuthModule in your case).
If you want lazy loading, remove all child modules(with routes) from AppModule imports. More on lazy loading here.
Refer Angular official docs for more information on child modules routing.
I have also created a sample stackblitz app for demo purposes.

Shared Component in Lazy Modules Angular

I have a problem and I don't know what I'm not seeing.
I have equis Modules
ComponentsHomeModule, a file where I have a component that I would like to share
import { NgModule } from '#angular/core';
import { ElementComponent } from './element/element.component';
import { CommonModule } from '#angular/common';
#NgModule({
imports: [CommonModule],
declarations: [ElementComponent],
exports: [ElementComponent],
})
export class ComponentsHomeModule {}
In this case, the component is ElementComponent, that's the component I want to share.
Then I have my ElementsModule where I want to use the ElementComponent
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ElementsRoutingModule } from './elements-routing.module';
import { ElementsComponent } from './elements.component';
import { ComponentsHomeModule } from '../../components/components-home.module';
#NgModule({
imports: [CommonModule, ComponentsHomeModule, ElementsRoutingModule],
declarations: [ElementsComponent],
})
export class ElementsModule {}
an then inside the ElementsComponent I'm trying to render the ElementComponent but when I make in my html
ElementsComponent html:
<app-element></app-element>
In the console I see the error of
ERROR in src/app/home/pages/elements/elements.component.html:15:7 - error TS8001: 'app-element' is not a known element:
1. If 'app-element' is an Angular component, then verify that it is part of this module
I don't know where is the error because if I have my component imported and exported into the ComponentsHomeModule and then I'm importing that module all should work.
By the way I tried with import the ComponentsHomeModule into the App.Module and nothing and the Module where I'm using the ComponentsHomeModule is used in a lazy load:
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home.component';
import { ElementsRoutingModule } from './pages/elements/elements-routing.module';
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{
path: '',
redirectTo: 'elements',
},
{
path: 'elements',
loadChildren: () => ElementsRoutingModule,
}
],
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class HomeRoutingModule {}
SOLVED::
The problem was in the importing of the lazy loading.
I was importing the RoutingMoudule instead of only the module
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home.component';
import { ElementsModule } from './pages/elements/elements.module';
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{
path: '',
redirectTo: 'elements',
},
{
path: 'elements',
loadChildren: () => ElementsModule,
}
],
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class HomeRoutingModule {}

Your ElementsComponent is part of ElementsModule, so if you want to use ElementsComponent in ComponentsHomeModule then you need to exports ElementsComponent form ElementsModule, not from ComponentsHomeModule.

Angular2 Unexpected value in Service. Please add annotation

In my Angular2 app am getting the following error Error: (SystemJS) Unexpected value 'ReleasesService' declared by the module 'AppModule'. Please add a #Pipe/#Directive/#Component annotation.
My AppModule:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { routing } from './app.routes';
import { HttpModule } from '#angular/http';
import { SearchFilter } from '../app/search-filter.pipe';
import { ReleasesService } from '../app/releases/releases.service';
import { AppComponent } from './app.component';
import { HomeComponent } from '../app/home/home.component';
import { ReleasesComponent } from '../app/releases/releases.component';
import { DistroComponent } from '../app/distro/distro.component';
import { ContactComponent } from '../app/contact/contact.component';
#NgModule({
imports: [ BrowserModule, HttpModule, routing ],
declarations: [ AppComponent,
SearchFilter,
HomeComponent,
ReleasesComponent,
ReleasesService,
DistroComponent,
ContactComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
My ReleasesService:
import { Injectable } from '#angular/core';
import { Http, Response } from '#angular/http';
import { Observable } from 'rxjs/Observable';
import { IRelease } from './release';
import 'rxjs/add/operator/map';
#Injectable()
export class ReleasesService {
getReleases() {
return IRelease;
}
}
How to fix it? I reinstalled the Quickstarter (the base for my App), and having the same error when try to create the service.

declarations is only for declarable classes: Components Directives and Pipes
You can add ReleasesService to providers array
#NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
providers: [ ReleasesService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
See also
https://angular.io/guide/ngmodule-faq#what-classes-should-i-add-to-declarations

I had a similar problem, occurring while a project had angular2 as dependency and a project dependency (with the failing component) as well. Seems like angular2 metadata gets attached to the direct angular2 dependency, so the component in the project dependency wasn't declared in the angular2 of the project.
Workaround is to remove angular2 from the dependency (declaring it as devDependency there) and only use one angular2 instance.

Be sure the decorator has the caracter #.
If you don´t type # before the decorator function you will have this error message
#Component({ selector: '...', }) -> Correct
Component({ selector: '...', }) -> ERROR MESAGE: 'add a #Pipe/#Directive/#component'

How can I use Electron's webview html element inside an angular2 template?

I saw this question: How to use Electron's <webview> within Angular2 app?
And it got me past my initial error but now I'm seeing
zone.js?1478729974810:355 Unhandled Promise rejection: Template parse errors:
'webview' is not a known element:
1. If 'webview' is an Angular component, then verify that it is part of this module.
2. If 'webview' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message. ("url" [src]="paper.url | path" [original-size]="false" [show-all]="true"></pdf-viewer-->
[ERROR ->]<webview id="inlinePaper" attr.src="{{paper.url | path}}" disablewebsecurity></webview>
</div"): PaperComponent#45:12 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'webview' is not a known element:
1. If 'webview' is an Angular component, then verify that it is part of this module.
2. If 'webview' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message. ("url" [src]="paper.url | path" [original-size]="false" [show-all]="true"></pdf-viewer-->
[ERROR ->]<webview id="inlinePaper" attr.src="{{paper.url | path}}" disablewebsecurity></webview>
</div"): PaperComponent#45:12
at TemplateParser.parse (http://localhost:5555/node_modules/#angular/compiler/bundles/compiler.umd.js:7711:21)
at RuntimeCompiler._compileTemplate (http://localhost:5555/node_modules/#angular/compiler/bundles/compiler.umd.js:17193:53)
at eval (http://localhost:5555/node_modules/#angular/compiler/bundles/compiler.umd.js:17098:85)
at Set.forEach (native)
at compile (http://localhost:5555/node_modules/#angular/compiler/bundles/compiler.umd.js:17098:49)
at ZoneDelegate.invoke (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:203:28)
at Zone.run (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:96:43)
at http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:462:57
at ZoneDelegate.invokeTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:236:37)
at Zone.runTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:136:47)
I added CUSTOM_ELEMENTS_SCHEMA to both my root module and the other module in play here as well as trying the NO_ERRORS_SCHEMA described in the angular documentation for NgModule but I'm still seeing this same template error.
This project has a lot of files and I won't list them all here but feel free to ask for whatever you might feel relevant.
This was built from the angular2 advanced seed at https://github.com/NathanWalker/angular-seed-advanced
My root module 'web.module.ts':
// angular
import { NgModule, NO_ERRORS_SCHEMA } from '#angular/core';
import { APP_BASE_HREF } from '#angular/common';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule } from '#angular/router';
import { Http } from '#angular/http';
// libs
import { StoreModule } from '#ngrx/store';
import { EffectsModule } from '#ngrx/effects';
import { TranslateLoader } from 'ng2-translate';
// app
import { AppComponent } from './app/components/app.component';
import { ToolbarComponent } from './app/components/toolbar/toolbar.component';
import { HomeComponent } from './app/components/home/home.component';
import { routes } from './app/components/app.routes';
// feature modules
import { CoreModule } from './app/frameworks/core/core.module';
import { AnalyticsModule } from './app/frameworks/analytics/analytics.module';
import { multilingualReducer, MultilingualEffects } from './app/frameworks/i18n/index';
import { MultilingualModule, translateFactory } from './app/frameworks/i18n/multilingual.module';
import { SampleModule } from './app/frameworks/sample/sample.module';
import { EventModule } from './app/components/event/event.module';
// config
import { Config, WindowService, ConsoleService, EventService } from './app/frameworks/core/index';
Config.PLATFORM_TARGET = Config.PLATFORMS.WEB;
if (String('<%= ENV %>') === 'dev') {
// only output console logging in dev mode
Config.DEBUG.LEVEL_4 = true;
}
// sample config (extra)
import { AppConfig } from './app/frameworks/sample/services/app-config';
import { MultilingualService } from './app/frameworks/i18n/services/multilingual.service';
// custom i18n language support
MultilingualService.SUPPORTED_LANGUAGES = AppConfig.SUPPORTED_LANGUAGES;
let routerModule = RouterModule.forRoot(routes);
if (String('<%= TARGET_DESKTOP %>') === 'true') {
Config.PLATFORM_TARGET = Config.PLATFORMS.DESKTOP;
// desktop (electron) must use hash
routerModule = RouterModule.forRoot(routes, {useHash: true});
}
declare var window, console;
// For AoT compilation to work:
export function win() {
return window;
}
export function cons() {
return console;
}
#NgModule({
imports: [
BrowserModule,
CoreModule.forRoot([
{ provide: WindowService, useFactory: (win) },
{ provide: ConsoleService, useFactory: (cons) }
]),
routerModule,
AnalyticsModule,
MultilingualModule.forRoot([{
provide: TranslateLoader,
deps: [Http],
useFactory: (translateFactory)
}]),
StoreModule.provideStore({
i18n: multilingualReducer,
}),
EventModule
],
declarations: [
AppComponent,
HomeComponent,
ToolbarComponent
],
providers: [
{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
},
EventService
],
bootstrap: [AppComponent],
schemas: [NO_ERRORS_SCHEMA]
})
export class WebModule { }
Here is my sub module the event module:
// angular
import { NgModule, ModuleWithProviders, Optional, SkipSelf, NO_ERRORS_SCHEMA } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { HttpModule } from '#angular/http';
import { eventComponent } from './event.component';
import { EventDetailsComponent } from './details/event.details.component';
import { EventNavigationComponent } from './navigation/event.navigation.component';
import { EventAlphanavComponent } from './navigation/event.alphanav.component';
import { EventTrackComponent } from './index-track/event.track.component';
import { EventScheduleComponent } from './index-schedule/event.schedule.component';
import { EventAlphaComponent } from './index-alpha/event.alpha.component';
import { EventAuthorComponent } from './index-author/event.author.component';
import { EventAuthorListComponent } from './index-author/list/event.author.list.component';
import { EventSponsorComponent } from './sponsors/event.sponsor.component';
import { EventExhibitorComponent } from './exhibitors/event.exhibitor.component';
import { EventActivitiesComponent } from './activities/event.activities.component';
import { PaperComponent } from './paper/paper.component';
// libs
import { StoreModule } from '#ngrx/store';
// app
import { Config, WindowService, ConsoleService, EventService, Path } from '../../frameworks/core/index';
// state
/**
* Do not specify providers for modules that might be imported by a lazy loaded module.
*/
#NgModule({
imports: [
CommonModule,
HttpModule,
RouterModule,
StoreModule
],
schemas: [ NO_ERRORS_SCHEMA ],
declarations: [
eventComponent,
EventDetailsComponent,
EventNavigationComponent,
EventAlphanavComponent,
EventTrackComponent,
EventScheduleComponent,
EventAlphaComponent,
EventAuthorComponent,
EventAuthorListComponent,
EventSponsorComponent,
EventExhibitorComponent,
EventActivitiesComponent,
PaperComponent,
Path
]
})
export class EventModule {
constructor(#Optional() #SkipSelf() parentModule: EventModule) {
if (parentModule) {
throw new Error('SampleModule already loaded; Import in root module only.');
}
}
}
Any clue what I'm doing wrong here? Will this even work once I have this template problem worked out?
Any direction at all is appreciated. I'm following what instructions I can find but it's still not working. Thanks in advance!

Create a dummy directive for webview.
import { Directive } from '#angular/core';
#Directive({
selector: 'webview'
})
/** Dummy directive to allow html-tag 'webview' */
export class WebviewDirective {}
and add it to your AppModule declarations array:
...
import { WebviewDirective } from './webview.directive';
#NgModule({
imports: [...],
declarations: [..., WebviewDirective],
providers: [...],
bootstrap: [...]
})
export class AppModule {}
Credits to Philipp for his answer: https://stackoverflow.com/a/39290383/6028371

There must have been some problem with my testing. The above code worked after rebuilding the project and the webview element does what it needs to do in the electron context.