We Keep Coding

Why i take 404 error when i reload the page

I used fuse template to build an angular project. I made it but when i reload the page website are broken. This is the mistake output:
Server Error
404 - File or directory not found.
The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.

check the app.module.ts and add HashLocationStrategy
import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy, HashLocationStrategy} from '#angular/common';
import {MyApp} from './myapp';
bootstrap(MyApp, [
ROUTER_PROVIDERS,
{provide: LocationStrategy, useClass: HashLocationStrategy}
]);

Here is my app.module.ts code=>
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { ExtraOptions, PreloadAllModules, RouterModule } from '#angular/router';
import { MarkdownModule } from 'ngx-markdown';
import { FuseModule } from '#fuse';
import { FuseConfigModule } from '#fuse/services/config';
import { FuseMockApiModule } from '#fuse/lib/mock-api';
import { CoreModule } from 'app/core/core.module';
import { appConfig } from 'app/core/config/app.config';
import { mockApiServices } from 'app/mock-api';
import { LayoutModule } from 'app/layout/layout.module';
import { AppComponent } from 'app/app.component';
import { appRoutes } from 'app/app.routing';
const routerConfig: ExtraOptions = {
preloadingStrategy : PreloadAllModules,
scrollPositionRestoration: 'enabled'
};
#NgModule({
declarations: [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(appRoutes, routerConfig),
// Fuse, FuseConfig & FuseMockAPI
FuseModule,
FuseConfigModule.forRoot(appConfig),
FuseMockApiModule.forRoot(mockApiServices),
// Core module of your application
CoreModule,
// Layout module of your application
LayoutModule,
// 3rd party modules that require global configuration via forRoot
MarkdownModule.forRoot({})
],
bootstrap : [
AppComponent,
],
})
export class AppModule
{
}

Error trying to use a shared module in Angular 9 make my components cant recognise my material module

I have created a shared module to modularize my app so in case i want to use for example a Material component i can have it in other module by import it, the problem is when i do that give this kind of error If 'mat-menu' is an Angular component, then verify that it is part of this module. How can i solve it?.In the past without the shared module it worked perfectly but now no, and Its required to be with the shared module because its for homework
Below i will let my three modules
App Module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//My imports
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { UsersDashboardComponent } from './components/users-dashboard/users-dashboard.component';
import { AdminDashboardComponent } from './components/admin-dashboard/admin-dashboard.component';
import { RouterModule } from '#angular/router';
import { HttpClientModule} from '#angular/common/http';
import { HomeAdminComponent } from './auth/home-admin/home-admin.component';
import { HomeComponent } from './auth/home/home.component';
import { CoreModule } from './../app/core/core.module';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AdminDashboardComponent,
UsersDashboardComponent,
HomeAdminComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule,
BrowserAnimationsModule,
RouterModule,
HttpClientModule,
CoreModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Auth Module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { SharedModule } from '../shared/shared.module';
import { AuthRoutingModule } from './auth-routing.module';
import { HomeComponent } from 'src/app/auth/home/home.component';
import { HomeAdminComponent } from 'src/app/auth/home-admin/home-admin.component';
#NgModule({
declarations: [HomeComponent,HomeAdminComponent],
imports: [
CommonModule,
AuthRoutingModule,
SharedModule,
],
})
export class AuthModule { }
Shared module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { MaterialModule } from 'src/app/shared/material/material.module';
import { ReactiveFormsModule } from '#angular/forms';
#NgModule({
declarations: [],
imports: [
CommonModule,
MaterialModule,
ReactiveFormsModule
],
exports: [
MaterialModule,
ReactiveFormsModule
]
})
export class SharedModule { }

To avoid this problem you need to Add SharedModule as an import in all the FeatureModules where your components reside as declarations. Same like you have done in AuthModule. And also all the material modules imported into the MaterialModule should be exported in exports.

I solve it putting the SharedModule into the imports of the AppModule

I would recommend to create your own custom Components build on top whatever module you are using (in your case it is angular material) inside the shared module and then export these components and import your shared module in any other modules then, use these components, this will help you in the future if you decided to use another library instead of angular material or if you want to build some custom design.

Unexpected value 'undefined' imported by the module 'AppModule' at syntaxError

I am Beginner and following tutorials, in which i am working in angular with firebase. I use HTML table which was working fine but after using angular-4-data-table i got following error
Unexpected value 'undefined' imported by the module 'AppModule' in console and with this error
This is my app.module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {RouterModule} from '#angular/router';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { FormsModule} from '#angular/forms';
import { CustomFormsModule } from 'ng2-validation';
import { DataTableModule } from 'angular-4-data-table';
#NgModule({
declarations: [
AppComponent,
BsNavbarComponent,
HomeComponent,
ProductsComponent,
ShoppingCartComponent,
CheckCheckoutComponent,
OrderSucessComponent,
MyOrderComponent,
AdminProductsComponent,
AdminOrdersComponent,
LoginComponent,
ProductFormComponent
],
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
NgbModule.forRoot()
],
providers: [
AuthService,
AuthGaurd,
AdminAuthGuard,
UserService,
CategoryService,
ProductsComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
and this is Import in component
import { Component, OnInit, OnDestroy } from '#angular/core';
import { ProductService } from 'src/app/product.service';
import { Subscription } from 'rxjs';
import { Product } from 'src/app/models/product';
import { DataTableResource } from 'angular-4-data-table';
I also watched previously asked questions on this forum but did not work for me.

Your AppModule the decorator NgModule.
A typical ngModule looks like this:
#NgModule({
declarations: [...],
imports: [...]
})
export class AppModule{}
Pay attention that the imports that look like
import { BrowserModule } from '#angular/platform-browser'; are meant to "include" the modules from different files but without a declaration like the one above you cannot use them in the current NgModule.
In the end, your AppModule should look like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {RouterModule} from '#angular/router';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { FormsModule} from '#angular/forms';
import { CustomFormsModule } from 'ng2-validation';
import { DataTableModule } from 'angular-4-data-table';
#NgModule({
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule
....
],
declarations: [....]
})
export class AppModule{}

I was facing same problem with Angular-4-Data-table
Actually i was using a higher version of angular which was not working with angular-4-data-table so i try this and upgrade
npm install angular5-data-table --save
In App Module i use
import {DataTableModule} from 'angular5-data-table';
And same in component
import { DataTableResource } from 'angular5-data-table';
it worked for me hopefully it will work for you.

imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
NgbModule.forRoot(),
]
problem is in last comma remove comma after NgbModule.forRoot()

Function calls are not supported in decorators but

Description
I wrote an angular library SxfedModule and use it in a different angular applications. when I packaged my application with the library, evenything works fine without --prod.
Reproduction Steps
Use this library in a new angular application which is generated by the angular cli by calling SxfedModule .forRoot() in the app.module.ts.
NgModule of the library:
import { NgModule, ModuleWithProviders } from '#angular/core';
import { SxfedformModule } from './component/sxfedform/sxfedform.module';
export const ElChildModules: any = {
SxfedformModule,
}
export const ELMODULES_GROUP: any[] = [
SxfedformModule,
]
#NgModule({
imports: [
SxfedformModule.forRoot(),
],
exports: ELMODULES_GROUP,
})
class SxfedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SxfedModule,
providers: [],
};
}
}
export {
SxfedModule,
};
NgModule of the application:
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-
browser/animations';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { ElModule } from 'element-angular';
import { SxfedModule } from 'sxfed-angular-ui';
import { RouterModule } from '#angular/router';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { appRoutes } from './app.routes';
#NgModule({
declarations: [
AppComponent,
LoginComponent,
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
ElModule.forRoot(),
SxfedModule.forRoot(),
RouterModule,
RouterModule.forRoot(appRoutes),
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
Try ng build --prod
Error
ERROR in Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'SxfedModule' was called.
🌍 Your Environment
Angular CLI: 7.2.3
Node: 8.11.1
OS: win32 x64
Angular: 7.2.2
Thank you for reading my problem.
Please help me, thank you.

Ionic build browser --prod --release showing error when I build for PWA

My app.module.ts file is:
import { IonTextAvatarComponent } from '../components/ion-text-avatar/ion-text-avatar';
import { ProgressBarComponent } from '../components/progress-bar/progress-bar';
import { FlashCardComponent } from '../components/flash-card/flash-card';
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { IonicStorageModule } from '#ionic/storage';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
im
import { ContentPage } from '../pages/content/content';
import { TrainingPage } from '../pages/training/training';
import { AuthProvider } from '../providers/auth/auth';
import { TrainingContentPage } from '../pages/training-content/training-content';
import { DataProvider } from '../providers/data/data';
import { HttpModule, Http } from '#angular/http';
import { HttpClientModule } from '#angular/common/http';
import { SanitizePipe } from '../pipes/sanitize/sanitize';
// import { TextAvatarDirective } from '../directives/text-avatar/text-avatar';
// import { IonTextAvatar } from 'ionic-text-avatar';
// import { NavController } from 'ionic-angular';
#NgModule({
declarations: [
MyApp,
HomePage,
ProgressBarComponent,
TrainingContentPage,
QuizPage,
FlashCardComponent,
SanitizePipe,
IonTextAvatarComponent
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
HttpModule,
HttpClientModule,
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
TrainingContentPage,
QuizPage,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthProvider,
IonicStorageModule,
DataProvider,
HttpModule,
Http,
HttpClientModule,
]
})
export class AppModule {}
When i run ionic build browser --prod --release its showing:
[WARN] ionic build is for building web assets and takes no arguments. See ionic build --help.
Ignoring argument browser. Perhaps you meant ionic cordova build browser?
Running app-scripts build: --prod
[18:38:29] build prod started ...
[18:38:29] clean started ...
[18:38:29] clean finished in less than 1 ms
[18:38:29] copy started ...
[18:38:29] deeplinks started ...
[18:38:29] deeplinks finished in 46 ms
[18:38:29] ngc started ...
[18:38:32] typescript error
Type ProgressBarComponent in C:/Users/SAGAR/Desktop/MyApp/src/components/progress-bar/progress-bar.ts
is part of the declarations of 2 modules: AppModule in
C:/Users/SAGAR/Desktop/MyApp/src/app/app.module.ts and ComponentsModule in
C:/Users/SAGAR/Desktop/MyApp/src/components/components.module.ts! Please consider moving
ProgressBarComponent in C:/Users/SAGAR/Desktop/MyApp/src/components/progress-bar/progress-bar.ts to a
higher module that imports AppModule in C:/Users/SAGAR/Desktop/MyApp/src/app/app.module.ts and
ComponentsModule in C:/Users/SAGAR/Desktop/MyApp/src/components/components.module.ts. You can also
create a new NgModule that exports and includes ProgressBarComponent in
C:/Users/SAGAR/Desktop/MyApp/src/components/progress-bar/progress-bar.ts then import that NgModule in
AppModule in C:/Users/SAGAR/Desktop/MyApp/src/app/app.module.ts and ComponentsModule in
C:/Users/SAGAR/Desktop/MyApp/src/components/components.module.ts.
Error: The Angular AoT build failed. See the issues above
at C:\Users\SAGAR\Desktop\MyApp\node_modules\#ionic\app-scripts\dist\aot\aot-compiler.js:237:55
at step (C:\Users\SAGAR\Desktop\MyApp\node_modules\#ionic\app-scripts\dist\aot\aot-compiler.js:32:23)
at Object.next (C:\Users\SAGAR\Desktop\MyApp\node_modules\#ionic\app-scripts\dist\aot\aot-compiler.js:13:53)
at fulfilled (C:\Users\SAGAR\Desktop\MyApp\node_modules\#ionic\app-scripts\dist\aot\aot-compiler.js:4:58)
at <anonymous>
[18:38:32] copy finished in 3.73 s

I finally figured out the solution by myself. By removing componetModule.ts.