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 ?
Related
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 { }
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!
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
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.
I'm trying to use the Angular flash message module as shown in this post:
https://www.npmjs.com/package/angular-flash-message
However, I get this error:
> compiler.js:485 Uncaught Error: Template parse errors:
> 'flash-messages' is not a known element:
>
> 1. If 'flash-messages' is an Angular component, then verify that it is part of this module.
> 2. If 'flash-messages' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component
> to suppress this message. ("<app-navbar></app-navbar><div
> class="container">[ERROR
> ->]<flash-messages></flash-messages><router-outlet></router-outlet> </div>"): ng:///AppModule/AppComponent.html#2:8
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { Routes, RouterModule } from '#angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { ProfileComponent } from './components/profile/profile.component';
import { RegisterComponent } from './components/register/register.component';
import { ValidateService } from './services/validate.service';
import {FlashMessageModule} from 'angular-flash-message'
#NgModule({
declarations: [
AppComponent,
NavbarComponent,
LoginComponent,
HomeComponent,
DashboardComponent,
ProfileComponent,
RegisterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule,
FormsModule,
FlashMessageModule
],
providers: [ValidateService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<app-navbar></app-navbar>
<div class="container">
<flash-messages></flash-messages>
<router-outlet></router-outlet>
</div>
registration.component.ts
import { Component, OnInit } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { ValidateService } from '../../services/validate.service';
import { FlashMessage } from 'angular-flash-message';
#Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
name: String;
username: String;
email: String;
password: String;
constructor(
private validateService: ValidateService,
private flashMessage: FlashMessage
) { }
ngOnInit() {
}
onRegisterSubmit(){
const user = {
name: this.name,
username: this.username,
email: this.email,
password: this.password
}
//Required fields
if(!this.validateService.validateRegister(user)){
//fill in all fields
this.flashMessage.info("Incorrect!")
return false;
}
if(!this.validateService.validateEmail(user.email)){
//email incorrect
return false;
}
}
}
I'm trying to display a flash message after validating the user's input.
I'm new to Angular and MEAN apps and this is actually an app shown in a tutorial using Angular 2.
Can someone help me out? Thanks!
I'm not sure if the
import {FlashMessageModule} from 'angular-flash-message'
works properly. I would suggest using
import {FlashMessageModule} from 'angular2-flash-messages'`.
Their documentation is here: https://www.npmjs.com/package/angular2-flash-messages
I went through the angular-flash messages docs, angular2-flash-message docs (without the 's' at the end), and also angular2-flash-messages (with the 's' at the end), and the only one that worked for me was the last one.
Also, in addition to your imports, I've also found that it helps to make sure you have #angular/common installed, just in case:
npm install #angular/common --save
Hope this helps
ooh i think it shouldn't be
ERRONEOUS
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes),
AngularFireModule.initializeApp(fireBase),
FlashMessagesModule
],
it should be
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes),
AngularFireModule.initializeApp(fireBase),
FlashMessagesModule.forRoot()
],
I too had the same problem and solved it by adding FlashMessageModule.forRoot() in my imports