Angular 6 No NgModule metadata found for 'myModule' - lazy-loading

It looks like problem with my 'lazy loading'
When I'm trying ng serve, I got this error:
ERROR in No NgModule metadata found for 'ModuleA'.
And compilation is waiting. Then if I edit and save file modulea.module.ts it works. But this trick doesn't work with ng build (there is now 'watch' mode) I hope you know what I'm talking about :D
So how can I fix it?
My folders structure:
src/
app/
views/
moduleA/
componenets/
modulea.module.ts
modulea-routing.module.ts
moduleB/
componenets/
moduleb.module.ts
moduleb-routing.module.ts
... app components etc
app.module.ts
app.routing.ts
My app routing
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
export const routes: Routes = [
{
path: 'modulea',
children: [
{
path: '',
loadChildren: './views/moduleA/modulea.module#ModuleAModule'
},
]
},
{
path: 'moduleb',
children: [
{
path: '',
loadChildren: './views/moduleB/moduleb.module#ModuleBModule'
},
]
},
];
Module A:
import { NgModule } from '#angular/core';
import { ModuleARouting } from './modulea-routing.module';
#NgModule({
imports: [
ModuleARouting
],
})
export class ModuleAModule { }
Module B:
import { NgModule } from '#angular/core';
import { ModuleBRouting } from './moduleb-routing.module';
#NgModule({
imports: [
ModuleBRouting
],
})
export class ModuleBModule { }
Module A and B routing files loading another module:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{
path: '',
data: {
title: 'ModuleA'
},
children: [
{
path: '',
redirectTo: 'module-a-a'
},
{
path: 'module-a-a',
loadChildren: './components/module-a-a.module#ModuleAAModule'
},
]
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ModuleARouting {}
And finally ModuleAA loads components
EDIT
I can edit any file (when compile is fail and waiting) to pass it done.

I had the same issue and was and error on module name . So check all names , routing names, component names and module names of the module that the error is happening.

Related

More than one component matched on this element

I'm trying to use prime-ng's p-dialog with a p-footer but I keep getting error:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: Footer,Footer ("g header="Terminate" icon="pi pi-exclamation-triangle" [(visible)]="termBoolean">
[ERROR ->]<p-footer></p-footer>
</p-dialog>
</div>
html:
<p-dialog header="Terminate" icon="pi pi-exclamation-triangle" [(visible)]="termBoolean">
<p-footer></p-footer>
</p-dialog>
I believe it has to be something with my imports/exports. I have an application thisApp.module.ts where I have some imports. I then import that module to my app.module.ts.
My application's thisApp.module.ts:
import {
ConfirmDialogModule, DialogModule
} from "primeng/primeng";
export const myImports = [
ConfirmDialogModule
DialogModule
];
#NgModule({
declarations: [ComponentOne],
imports: [
myImports
],
providers: []
})
export class MyModule { }
my app.module.ts:
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { DialogModule } from 'primeng/dialog';
#NgModule({
imports: [
MyModule,
ConfirmDialogModule,
DialogModule
],
declarations: [
AppComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

ionic 4 translateModule for two pages will cause ERROR RangeError: Maximum call stack size exceeded

I am creating my app project with ionic 4.
In the past, i.e. ionic 3, I can import TranslateModule.forChild() for every page module.ts. But with ionic 4, if two pages get loading TranslateModule.forChild(), it will cause Maximum call stack size exceeded. If I delete one of them, it will works fine without stack size but just that page cannot translate any more.
Actually, my ionic version is 5.4.6.
Here are my codes:
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { TranslateModule, TranslateLoader } from '#ngx-translate/core';
import { TranslateHttpLoader } from '#ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '#angular/common/http';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent],
exports: [ TranslateModule ]
})
export class AppModule {}
**home.module.ts**
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { IonicModule } from '#ionic/angular';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { HomePage } from './home.page';
import { TranslateModule } from '#ngx-translate/core';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
]),
TranslateModule.forChild()
],
declarations: [HomePage]
})
export class HomePageModule {}
**auth.module.ts**
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { IonicModule } from '#ionic/angular';
import { AuthPage } from './auth.page';
import {TranslateModule} from '#ngx-translate/core';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
TranslateModule.forChild()
],
declarations: [AuthPage]
})
export class AuthPageModule {}
I just pass the same issue and solved it, you should treat all your pages as LazyLoad just as you're actually doing in the home.module:
RouterModule.forChild([
{
path: '',
component: HomePage
}
]),
So in your auth.module the imports declaration must contain the RouterModule too:
RouterModule.forChild([
{
path: '',
component: AuthPage
}
])
...
That should do the trick and avoid the stack size exceeded. If you're using something as a SharedModule, I suggest you to add the TranslateModule in it to make it easier in your app structure:
import { TranslateModule } from '#ngx-translate/core';
#NgModule({
declarations: [],
imports: [
...
TranslateModule,
],
exports: [
...
TranslateModule,
]
})
export class SharedModule { }
Then in any of your next pages modules, just import the SharedModule and it's done:
imports: [
...
SharedModule,
]
Hope it helps!

Failed connection handshake and 500 error when refreshing page - Abp Zero with Angular and .Net Core

When I log into the application, angular changes the ulr to https://baseurl/app/home and the home page renders correctly. If I refresh the page I get a server (500) error. if I remove the /app/home part in the address bar and refresh, the page reloads without issues.
In the logs on the server side I find this:
Fail: Microsoft.AspNetCore.SignalR.HubConnectionContext[5]
Failed connection handshake.
I am running the angular client and the .net core application on two different servers, and CORS is set up correctly and the client app is able to connect to the api. The app works fine except when i refresh a page with an angular route.
The problem does not occur when I run the application locally on my development machine.
I have not changed any routing or signalr related code in the original Abp Zero template.
On server:
.NetCore 2.2
Abp Zero v 4.8
services.AddSignalR() is called in the startup.cs file and
app.UseSignalR(routes =>
{
routes.MapHub("/signalr");
});
is also called in the startup.cs file from the Configuration method. All this is standard tempate code.
In Angular client:
#aspnet/signalr v 1.1.4
The unchanged SignalRAspNetCoreHelper of which the initSignalR() is called in OnInit in the app.component.ts file:
import { AppConsts } from '#shared/AppConsts';
import { UtilsService } from '#abp/utils/utils.service';
export class SignalRAspNetCoreHelper {
static initSignalR(): void {
const encryptedAuthToken = new UtilsService().getCookieValue(AppConsts.authorization.encrptedAuthTokenName);
abp.signalr = {
autoConnect: true,
connect: undefined,
hubs: undefined,
qs: AppConsts.authorization.encrptedAuthTokenName + '=' + encodeURIComponent(encryptedAuthToken),
remoteServiceBaseUrl: AppConsts.remoteServiceBaseUrl,
startConnection: undefined,
url: '/signalr'
};
jQuery.getScript(AppConsts.appBaseUrl + '/assets/abp/abp.signalr-client.js');
}
}
The app-routing.module.ts is also unchanged:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { AppRouteGuard } from '#shared/auth/auth-route-guard';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { UsersComponent } from './users/users.component';
import { TenantsComponent } from './tenants/tenants.component';
import { RolesComponent } from 'app/roles/roles.component';
import { ChangePasswordComponent } from './users/change-password/change-password.component';
#NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: AppComponent,
children: [
{ path: 'home', component: HomeComponent, canActivate: [AppRouteGuard] },
{ path: 'users', component: UsersComponent, data: { permission: 'Pages.Users' }, canActivate: [AppRouteGuard] },
{ path: 'roles', component: RolesComponent, data: { permission: 'Pages.Roles' }, canActivate: [AppRouteGuard] },
{ path: 'tenants', component: TenantsComponent, data: { permission: 'Pages.Tenants' }, canActivate: [AppRouteGuard] },
{ path: 'about', component: AboutComponent },
{ path: 'update-password', component: ChangePasswordComponent }
]
}
])
],
exports: [RouterModule]
})
export class AppRoutingModule { }
root-routing.module.ts (also unchanged):
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{ path: '', redirectTo: '/app/home', pathMatch: 'full' },
{
path: 'account',
loadChildren: 'account/account.module#AccountModule', // Lazy load account module
data: { preload: true }
},
{
path: 'app',
loadChildren: 'app/app.module#AppModule', // Lazy load account module
data: { preload: true }
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class RootRoutingModule { }
Any ideas as to what is wrong? As I haven't changed anything, I wonder if the issue is with the environments/configurations?
in case anyone stumbled upon this question:
The problem does not occur when I run the application locally on my development machine.
The problem is related to the production server, the request is not being forwarded into your angular application properly
IIS
basically you need to install the url-rewrite and then configure a web.config file for the front-end site web.config configuration link 1 link 2
Apachi
link 1 link 2

Nativescript angular - module that contains dataform exits in ios without error! lazy loading module

I am developing nativescript-angular app that contains dataform in a module and calling this module using in lazy loading technique. Life is beautiful in Android, but the application exits immediately when I open this module in ios wihtout any error log!
The code is very simple and forward, I can't see where is the problem!
test.component.ts
import { Component, OnInit } from "#angular/core";
import { ActivatedRoute } from "#angular/router";
import { RadDataForm, DataFormEventData } from "nativescript-ui-dataform";
import { UserAddress } from "../../shared/data-services/address";
#Component({
selector: "test",
moduleId: module.id,
templateUrl: "./test.component.html",
styleUrls:["./test.component.css"]
})
export class TestComponent implements OnInit {
private _userAddress: UserAddress;
constructor() {
}
ngOnInit() {
this._userAddress = new UserAddress();
}
get userAddress(): UserAddress {
return this._userAddress;
}
}
test.component.html
<ActionBar class="action-bar">
<NavigationButton [nsRouterLink]="['../../home']" android.systemIcon="ic_menu_back"></NavigationButton>
<Label class="action-bar-title" text="Test"></Label>
</ActionBar>
<ScrollView tkExampleTitle tkToggleNavButton>
<StackLayout>
<RadDataForm tkExampleTitle tkToggleNavButton [source]="userAddress">
</RadDataForm>
</StackLayout>
</ScrollView>
Routing of this module
signup-routing.module.ts
import { NgModule } from "#angular/core";
import { Routes } from "#angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { ItemsComponent } from "./test/test.component";
export const COMPONENTS = [ItemsComponent ];
const routes: Routes = [
{ path: "", redirectTo: "testInfo" },
{ path: "testInfo", component: testComponent }
];
#NgModule({
imports: [NativeScriptRouterModule.forChild(routes)], // set the lazy loaded routes using forChild
exports: [NativeScriptRouterModule]
})
export class SignupRoutingModule {}
Then we have
signup.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { COMPONENTS, SignupRoutingModule } from "./signup-routing.module";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
#NgModule({
imports: [
NativeScriptCommonModule, // for rednering actionbar with lazy laoding
NativeScriptFormsModule,
SignupRoutingModule,
NativeScriptUIDataFormModule
],
declarations: [
...COMPONENTS
],
// providers: [SignupService],
schemas: [
NO_ERRORS_SCHEMA
]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class SignupModule { }
And the module is called using lazy loading in the basic routing file like this:
{ path: "signup", loadChildren: "~/app/signup/signup.module#SignupModule", outlet: "homeTab" }
Help is appreciated!
CODE ON GitHub
https://github.com/lighttiger/lazy

import Routes [ts] 'types' can only be used in a .ts file.While they are already in app.module.ts

Here is part of my code along with error showing.While build is successfully created.As for your information I am developing a MEAN Stack application which evolve use of Angular 5 as it's ui component.
Here are code and error
import { AppComponent } from './app.component';
import { BookComponent } from './book/book.component';
import { FormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { RouterModule, Routes } from '#angular/router';
const appRoutes : Routes = [
{
path: 'books',
component: BookComponent,
data: { title: 'Book List' }
},
{ path: '',
redirectTo: '/books',
pathMatch: 'full'
}
];
#NgModule({
declarations: [
AppComponent,
BookComponent
],
imports: [
BrowserModule,
HttpClientModule,FormsModule,RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
As you can see I have import the Routermodule && Routes.
Please see the pic which shows visual studio editor commiting reponse .
I am almost surprised because Angular use AOT compilation which fails here.Could you please try ?