We Keep Coding

*ng-if not working inside ion-modal in ionic 5

i am building a mobile app with ionic 5, when I try to call ion-modal that has an *ng-If in it, i would get this error
Can't bind to 'ngIf' since it isn't a known property of 'ion-header'.
The modal is a comment section in comment.page.ts, here is the code for the comment.page.html
<ion-header class="ion-no-border" *ngIf="!isLoading">
<ion-toolbar>
<ion-title class="centerAM">{{no_comm | shortNumber}} comment{{no_comm>1?'s':''}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
....
here is the code for the comment.module.ts
import { NgModule } from '#angular/core';
import { IonicModule } from '#ionic/angular';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { NgxEmojModule } from 'ngx-emoj';
import { CommentPageRoutingModule } from './comment-routing.module';
import { CommentPage } from './comment.page';
import { PipesModule } from '../../pipes/pipes.module';
#NgModule({
imports: [
CommonModule,
NgxEmojModule,
PipesModule,
FormsModule,
IonicModule,
CommentPageRoutingModule
],
schemas: [],
declarations: [ CommentPage]
})
export class CommentPageModule {}
here is the function that calls the modal from the home.page.ts
async CommentModal(i, id) {
const modal = await this.modalCtrl.create({
component: CommentPage,
componentProps:{id},
swipeToClose: true,
cssClass: 'comment-modal'
});
await modal.present();
return
}
If i should add the comment.module.ts in the home.module.ts or the app.module.ts, when the page loads, it will automatically load the modal without the user clicking anything, and i also removed the page from the route and it didn't work, please what am i doing wrong

It is likely that your modules are being lazy-loaded. In that case the docs suggest that you should import your modal module (CommentPageModule) inside of the module, where you require this modal.
In other words, you need:
...
#NgModule({
imports: [
...
CommentPageModule, // <--- here
]
...
export class YourMainModule {}
Otherwise, the modal component doesn't get fully loaded.
Quote from the docs:
When lazy loading a modal, it's important to note that the modal will not be loaded when it is opened, but rather when the module that imports the modal's module is loaded.

I got the same issue on angular 10, Ionic 5, and the issue resolved by just import
modal page in app.modual.ts like
import { ModalPage } from './modules/core/modal/modal/modal.page';
#NgModule({
declarations: [
...
ModalPage
]

just add the component which will be used
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
UpdatePageRoutingModule],
declarations: [UpdatePage, DownloadModalComponent],
entryComponents: [DownloadModalComponent]
})
export class UpdatePageModule {}
in modal in your module declarations and entryComponents like this
where DownloadModalComponent is a component which is being used in a modal of UpdatePage.

You need to make sure that you've imported the BrowserModule to your module.
import {BrowserModule} from '#angular/platform-browser';
....
#NgModule({
imports: [
BrowserModule,
]
....

Angular 7 Creating dynamic modules with compileModuleAndAllComponentsAsync aot build issue

Problem :
I have to render a dynamic html which generates at run-time as a string, so for that purpose I've used dynamic components approach as innerHTML just not cater angular attributues like *ngIf, formGroup, router-link etc, but getting following error after deploying on local server.
Error :
Error: Unexpected value 'function(){}' imported by the module 'function(){}'. Please add a #NgModule annotation.
I tried creating the dynamic module but was getting error when making aot build because it was inside a non lazy-loaded module and according to a solution I found that aot will not work for dynamic components generating in a lazy-loaded module.
Now when I have moved it in a non lazy-loaded module I am not getting any error locally when generating aot build but getting this error after deployment however deployment is successful and nothing is breaking there.
DYNAMIC MODULE
export function createCompiler(compilerFactory: CompilerFactory) {
return compilerFactory.createCompiler();
}
#NgModule({
declarations: [StepComponent],
imports: [
CommonModule
],
exports: [StepComponent],
entryComponents: [StepComponent],
providers: [
{ provide: COMPILER_OPTIONS, useValue: {}, multi: true },
{ provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS] },
{ provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] }
]
})
export class DynamicStepModule { }
STEP COMPONENT
export class StepComponent implements OnInit, OnChanges {
#Input() step: Steps;
#ViewChild('dynamicComponent', { read: ViewContainerRef }) container: ViewContainerRef;
constructor(private compiler: Compiler) { }
ngOnInit() { }
ngOnChanges(change: SimpleChanges) {
if (this.step && change.step.currentValue !== change.step.previousValue) {
this.addComponent(this.step);
}
}
addComponent(step: Steps) {
const cmp = Component({ template: step.formattedText })(class DynamicComponent {
stepFormGroup: FormGroup;
constructor(
) {
// Some Component related code
}
});
const meta = NgModule({
imports: [
CommonModule,
FormsModule,
MaterialModule,
ReactiveFormsModule,
LibSharedModule,
BrowserModule,
BrowserAnimationsModule
],
declarations: [cmp]
})(class DynamicModule {
});
this.compiler
.compileModuleAndAllComponentsAsync(meta)
.then(factories => {
const factory = factories.componentFactories.find(component => component.componentType === cmp);
this.container.remove();
this.container.createComponent(factory);
});
}
}
Locally when generating aot build not getting error but after deploying on a local server getting this issue:
ERROR Error: Unexpected value 'function(){}' imported by the module 'function(){}'. Please add a #NgModule annotation.

Error when using AngularJS component inside Angular app: "Error: Trying to get the AngularJS injector before it being set."

I'm working through Angular's upgrade guide to learn how to embed AngularJS components in an Angular app. I've created a bare-bones Angular app using the Angular CLI and added a simple AngularJS module as a dependency.
When I run ng serve, the application compiles with no errors. However, at runtime, I get this message in the console:
Error: Trying to get the AngularJS injector before it being set.
What is causing this error, and how can I avoid it? I haven't deviated from the steps detailed in the upgrade guide.
Here's how I'm upgrading my AngularJS component inside my Angular app:
// example.directive.ts
import { Directive, ElementRef, Injector } from '#angular/core';
import { UpgradeComponent } from '#angular/upgrade/static';
// this is the npm module that contains the AngularJS component
import { MyComponent } from '#my-company/module-test';
#Directive({
selector: 'my-upgraded-component'
})
export class ExampleDirective extends UpgradeComponent {
constructor(elementRef: ElementRef, injector: Injector) {
// the .injectionName property is the component's selector
// string; "my-component" in this case.
super(MyComponent.injectionName, elementRef, injector);
}
}
And here's my app.module.ts:
// 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 { UpgradeModule } from '#angular/upgrade/static';
import { ExampleDirective } from './example.directive';
import { myModuleName } from '#my-company/module-test';
#NgModule({
declarations: [AppComponent, ExampleDirective],
imports: [BrowserModule, AppRoutingModule, UpgradeModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) {}
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, [myModuleName], {
strictDi: true
});
}
}
I'm using Angular 5.2.0.

I faced the same issue, and finally solved it. There are some steps to follow before bootstrap an hybrid Angular/angularjs application.
Install the UpgradeModule npm install #angular/upgrade
Wrap your "CompanyModule" (the module where all your company components are registered) into a new angularjs module (for instance: Ng1Shared). If you not have a module for your company components, it must be created. Than downgrade AppComponent as shown below.
const MyCompanyModule = angular
.module('MyCompanyModule', [])
.component('myComponent', MyComponent)
.name;
const Ng1Shared = angular
.module('Ng1Shared', [MyCompanyModule])
.directive('appRoot', downgradeComponent({ component: AppComponent }))
.name;
Configure AppModule with basic imports (BrowserModule, CommonModule, UpgradeModule). Provide the angularjs' Injector to Angular; declare an "entryComponent" and remove the default bootstrap for AppComponent.
#NgModule({
imports: [BrowserModule, CommonModule, UpgradeModule],
declarations: [AppComponent],
providers: [{provide: '$scope', useExisting: '$rootScope'}], // REQUIRED
entryComponents: [AppComponent], // ADD AN ENTRY COMPONENT
// bootstrap: [AppComponent] MUST BE REMOVED
})
Set angularjs globally with a function provided by UpgradeModule itself and manually bootstrap Angular with DoBootstrap method provided by #angular/core.
export class AppModule implements DoBootstrap {
constructor(private upgrade: UpgradeModule) { }
public ngDoBootstrap(app: any): void {
setAngularJSGlobal(angular);
this.upgrade.bootstrap(document.body, [Ng1Shared], { strictDi: false });
app.bootstrap(AppComponent);
}
}
Create a wrapper directive for every angularjs component and add it to AppModule's declaration array.
#Directive({
selector: 'my-component'
})
export class MyComponentWrapper extends UpgradeComponent {
#Input() title: string;
constructor(elementRef: ElementRef, injector: Injector) {
super('myComponent', elementRef, injector);
}
}
I wrote a simple example available on stackblitz.
For example purposes I added angularjs MyCompanyModule to another angularjs module, called Ng1Module. As you can see also property binding between angularjs and angular component works fine.
I hope it can be useful.

https://github.com/angular/angular/issues/23141#issuecomment-379493753
you cannot directly bootstrap an Angular component that contains
upgraded components before bootstrapping AngularJS. Instead, you can
downgrade AppComponent and let it be bootstrapped as part of the
AngularJS part of the app:
https://stackblitz.com/edit/angular-djb5bu?file=app%2Fapp.module.ts

try to add an entryComponents to your AppModule like this :
...
#NgModule({
declarations: [AppComponent, ExampleDirective],
imports: [BrowserModule, AppRoutingModule, UpgradeModule],
entryComponents: [
AppComponent // Don't forget this!!!
],
providers: [],
// bootstrap: [AppComponent] // Delete or comment this line
})
...

How to properly configure this dummy Angular project

I have this very basic project:
https://stackblitz.com/edit/angular-rktmgc-ktjk3n?file=index.html
This is the code on: /index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="mat-app-background basic-container">
<br />
API reference for Angular Material slide-toggle<br /><br />
<select-reset-example>loading</select-reset-example>
<div style="margin-top:30px;">
<div style="color:#f00;margin-bottom:20px;">
Below is what I need to get it work like above (but it doesn't):
</div>
<mat-slide-toggle>Slide me!</mat-slide-toggle>
</div>
</div>
This is the code on: /app/select-reset-example.html
<mat-slide-toggle>Slide me!</mat-slide-toggle>
When loading the component: mat-slide-toggle through: select-reset-example it works, but when loading it directly on the index.html it doesn't.
My question is, how to configure the following /main.ts file in order to render the mat-slide-toggle directly on the index.html?
In case the scope be a problem, maybe is it possible to create a custom component which inherits from that mat-slide-toggle or MatSlideToggleModule class?
If possible, could you fork the project on stackblitz.com and give me the link
with a proper configuration?
import './polyfills';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { NgModule } from '#angular/core';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { MatSlideToggleModule } from '#angular/material';
import { SelectResetExample } from './app/select-reset-example';
import { HttpModule } from '#angular/http';
import { CdkTableModule } from '#angular/cdk/table';
#NgModule({
exports: [
MatSlideToggleModule,
]
})
export class DemoMaterialModule { }
#NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
DemoMaterialModule,
ReactiveFormsModule,
],
entryComponents: [SelectResetExample],
declarations: [SelectResetExample],
bootstrap: [SelectResetExample],
providers: []
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
This is the structure of the project:
Thanks!

Indeed there are several options which could be applied here.
Attempt 1
At first glance we can easily solve your problem by simply importing MatSlideToggle component and adding it to the bootstrap array:
import { MatSlideToggle } from '#angular/material';
#NgModule({
...
bootstrap: [SelectResetExample, MatSlideToggle ]
^^^^^^^^^^^^^^
cool, it was very easy!!!
})
export class AppModule { }
https://stackblitz.com/edit/angular-rktmgc-7h51hh?file=main.ts
Hmm, seems we've broken everything:).
Why?
Angular bootstraps SelectResetExample component. During this process it creates mat-slide-toggle that is part of select-reset-example.html template.
So now our html has two mat-slide-toggle tags.
And then angular bootstraps second component (MatSlideToggle) that will be applied to the first mat-slide-toggle. This way we can see that the first working slider lost text Slide me!.
Attempt 2
Let's change order of our bootstrapping components:
#NgModule({
...
bootstrap: [ MatSlideToggle, SelectResetExample ]
})
export class AppModule { }
https://stackblitz.com/edit/angular-rktmgc-mkm7ry?file=main.ts
The second slider works now but wait... We again lost the text.
The main reason of this is that angular can't process projectable nodes on bootstrapping component.
Attempt 3
Angular gives the opportunity to override bootstrapping process by writing code within ngDoBootstrap method of #NgModule. Let's try...
import { ApplicationRef, ComponentFactoryResolver, Injector, NgModuleRef } from '#angular/core';
#NgModule({
// we replaced bootstrap option with entryComponents
entryComponents: [SelectResetExample, MatSlideToggle],
})
export class AppModule {
constructor(
private resolver: ComponentFactoryResolver,
private ngModule: NgModuleRef<any>) {}
ngDoBootstrap(appRef: ApplicationRef) {
const factory = this.resolver.resolveComponentFactory(MatSlideToggle);
const target = document.querySelector('mat-slide-toggle');
const compRef = factory.create(
Injector.NULL,
[Array.from(target.childNodes)], // passing projectable nodes
target,
this.ngModule);
appRef.attachView(compRef.hostView);
appRef.bootstrap(SelectResetExample);
}
}
https://stackblitz.com/edit/angular-rktmgc-ncyebq?file=index.html
Here i am bootstrapping our components throught custom method ngDoBootstrap. And it works but...
What is this? Do I really need to know this?
I don't think so. There must be some other way out.
Attempt 4
in order not to complicate our live we should follow the design of angular framework. For that it would be better to have one root component. Let's create it:
app.component.ts
#Component({
selector: '.mat-app-background.basic-container',
templateUrl: './app.component.html',
})
export class AppComponent {
}
app.component.html
<br />
API reference for Angular Material slide-toggle<br /><br />
<select-reset-example>loading</select-reset-example>
<div style="margin-top:30px;">
<div style="color:#f00;margin-bottom:20px;">
Below is what I need to get it work like above (but it doesn't):
</div>
<mat-slide-toggle>Slide me!</mat-slide-toggle>
</div>
module
declarations: [SelectResetExample, AppComponent],
bootstrap: [AppComponent],
index.html
<div class="mat-app-background basic-container"></div>
i moved styles to external resouces
Stackblitz Example

Ionic 2: unit test for component with ionic's markup/elements

I have a simple Angular 2 component for an Ionic 2 app. The component uses some Ionic's markup, such as:
<ion-card>
<h3>{{ rawcontent.name }}</h3>
<p *ngIf="rawcontent.description">{{ rawcontent.description }}</p>
</ion-card>
the component .ts is something like:
import { Component, Input } from '#angular/core';
import { NavController } from 'ionic-angular/';
import { Content } from '../../pages/content/content';
#Component({
selector: 'content-detail',
templateUrl: 'content-detail.html'
})
export class ContentDetailComponent {
#Input('data') rawcontent: any = {};
constructor(public nav: NavController) {
}
//other methods
}
I'm trying to write an unit test for it, but I got this error so far:
'ion-card' is not a known element:
1. If 'ion-card' is an Angular component, then verify that it is part of this module.
2. If 'ion-card' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component
to suppress this message.
I don't know what to do now. In this case, ion-card is an Angular component, I guess. So, what to do next? I think I have to change my beforeEach, addining some config. Can anyone help?
beforeEach(() => TestBed.configureTestingModule({
declarations: [ ContentDetailComponent ],
providers: [
{ provide: NavController, useClass: NavMock }
]})
);

You need to import ionicModule. Add this in configureTestingModule
imports: [
IonicModule,
],

This is a good starting blog for testing Ionic 2 apps.
You need to configure the app with Ionic module root in beforeEach:
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MyApp]
providers: [
],
imports: [
IonicModule.forRoot(MyApp)
]
}).compileComponents();
}));