NG6002: Appears in the NgModule.imports of AppModule, but itself has errors - upgrade

I am upgrading my angualr from 6 to 13.0.2.
When I do ng build , I get an error:
NG6002: Appears in the NgModule.imports of AppModule, but itself has errors 33 export class AdminModule { }
I am sure, Admin module imports doesn't include any components, all components are part of declarations: []
Not sure what the error is related to. I also upgarded angualr material to 13.0.2.
I tried to setenableIvy to false in tsconfig.app.json.
"angularCompilerOptions": {
"enableIvy" : false,
admin.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '#angular/core';
import { CommonModule } from '#angular/common';
import {MatRadioModule} from '#angular/material/radio';
import { ReactiveFormsModule, FormsModule } from '#angular/forms';
import { NgxSpinnerModule } from 'ngx-spinner';
import { MatNativeDateModule } from '#angular/material/core';
import { MaterialModule } from 'src/app/material/material.module';
#NgModule({
imports: [
CommonModule,
MaterialModule,
MatRadioModule,
ReactiveFormsModule,
FormsModule,
NgxSpinnerModule,
MatNativeDateModule
],
declarations: [AdminComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AdminModule { }
app.module.ts
#NgModule({
declarations: [AppComponent, LoginComponent, HomeComponent],
imports: [
AdminModule,
NgxSpinnerModule,
MatDialog,
NgxSliderModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
,
providers: [
],
bootstrap: [AppComponent],
})
export class AppModule {}

Related

'#ionic/storage-angular', data get delete after refresh

I am using angular in my ionic and I have followed everything based on this docs, so im using "#ionic/storage-angular", but my problem is when i refresh, data get deleted. Below is my code.
//app.module
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { IonicStorageModule } from '#ionic/storage-angular';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
IonicStorageModule.forRoot(),
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule
],
providers: [
{
provide: RouteReuseStrategy,
useClass: IonicRouteStrategy,
},
],
bootstrap: [AppComponent]
})
export class AppModule {}
//storage.service
import { Injectable } from '#angular/core';
import { Storage } from '#ionic/storage-angular';
#Injectable({
providedIn: 'root'
})
export class StorageService {
private _storage: Storage | null = null;
constructor(private storage: Storage){
this.init();
}
async init() {
// https://github.com/ionic-team/ionic-storage
// If using, define drivers here: await this.storage.defineDriver(/*...*/);
const storage = await this.storage.create();
this._storage = storage;
}
public set(key: string, value: any) {
this._storage?.set(key, value);
}
public get(key){
return this._storage?.get(key);
}
public clear(){
this._storage.clear();
}
}
//this is how i used the service
await this.storageService.set('loginUser',{id: user.id,userName: user.first_name});

routing not working when trying with new component in tour of heroes

src/app/app-routing.module.ts:12:113 - error TS1005: ',' expected.
{ path: 'newroutedisplay',component:NewRoutedisplayComponent} },
~
src/app/app-routing.module.ts:12:114 - error TS1128: Declaration or statement expected.
{ path: 'newroutedisplay',component:NewRoutedisplayComponent} this error is displayed
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { HeroesComponent } from './heroes/heroes.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import {NewRoutedisplayComponent} from './new-routedisplay/new-routedisplay.component';
const routes: Routes = [
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: 'detail/:id', component: HeroDetailComponent },
{ path: 'heroes', component: HeroesComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'newroutedisplay',component:NewRoutedisplayComponent} },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
this is my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { MessagesComponent } from './messages/messages.component';
import { AppRoutingModule } from './app-routing.module';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HttpClientModule } from '#angular/common/http';
import {CustomPipe} from './custom-pipe';
import { HeronewComponentComponent } from './heronew-component/heronew-component.component';
import {NewRoutedisplayComponent} from './new-routedisplay/new-routedisplay.component';
#NgModule({
declarations: [
AppComponent,
HeroesComponent,
HeroDetailComponent,
MessagesComponent,
DashboardComponent,
CustomPipe,
HeronewComponentComponent,
NewRoutedisplayComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Angular 6 Shared Modules and Sharing Services

I'm having an issue with my Angular 6 app that I'm breaking up into smaller modules. Originally everything was imported into AppModule, and it worked just fine, but it was a giant file and testing was overly complicated.
The issue I'm having is basically creating a shared-module for a few commonly used services across the app. ng build runs fine so it seems to build alright, but when I serve the app I get the error that "ConfigService.foo()" is not a function! I'm obviously doing something wrong to group shared services into a shared module.
Here's some code:
SharedModule
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '#angular/common/http';
import { Injectable, OnInit, NgModule } from '#angular/core';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import * as $ from 'jquery';
import { PipeModule } from './pipes/pipes.module';
import { ConfigService } from "./config.service";
#NgModule({
imports: [
PipeModule
],
declarations: [
],
exports: [
PipeModule
],
providers: [
ConfigService
]
})
export class SharedModule {
static forRoot() {
return {
ngModule: SharedModule,
providers: [
ConfigService, {
provide: ConfigService,
useValue: ConfigService
},
],
};
}
}
ConfigService
import {Injectable} from "#angular/core";
import {HttpClient, HttpHeaders, HttpParams, HttpResponse} from "#angular/common/http";
import {HttpObserve} from "#angular/common/http/src/client";
import {Observable, Subject, Observer, BehaviorSubject, throwError} from 'rxjs';
import {Config} from '../shared/config';
import { map, catchError} from 'rxjs/operators';
import * as _ from 'lodash';
#Injectable()
export class ConfigService {
constructor(private httpClient: HttpClient, private config: Config) {
this.config = new Config();
}
ngOnInit() { }
foo() {
console.log("Hack the planet!!! (confgurably)");
}
}
AppModule
import { BrowserModule } from '#angular/platform-browser';
import {APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NgModule, PipeTransform} from '#angular/core';
import {HttpClient, HttpClientModule} from "#angular/common/http";
import {AppRoutingModule} from './app-routing.module';
import {FormsModule} from "#angular/forms";
import { AppComponent } from './app.component';
import { BannerComponent } from './banner/banner.component';
import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
import { SearchComponent } from './search/search.component';
import { SharedModule } from './shared/shared.module';
#NgModule({
declarations: [
AppComponent,
BannerComponent,
BreadcrumbComponent,
SearchComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
AppRoutingModule,
SharedModule.forRoot()
],
providers: [
HttpClient
],
bootstrap: [AppComponent]
})
export class AppModule { }
What am I doing wrong with my Shared-Module and injectable services? For reference, I'm using Angularv6.
I just figured it out.
It turns out, when providing your own services in a module, you don't use
{ provide: ConfigService, useValue: ConfigService },
Instead, you simply list the services under providers in your exported module, like this:
export class SharedModule {
static forRoot() {
return {
ngModule: SharedModule,
providers: [
ConfigService
],
};
}
}
Cheers!

How to hide ionic 4 Tabs just for login page

I'm working on a project with tabs in it but it should only appear after user login.
The tabs works just fine when its route in app.routing.module.ts is like this:
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
But when I use login like this:
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'home', loadChildren: './tabs/tabs.module#TabsPageModule' }
It doesnt work.
app.routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'home', loadChildren: './tabs/tabs.module#TabsPageModule' },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
tabs.routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'home',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/home/(MyPlaces:MyPlaces)',
pathMatch: 'full'
},
{
path: 'MyPlaces',
outlet: 'MyPlaces',
loadChildren: '../MyPlaces/MyPlaces.module#MyPlacesPageModule'
},
{
path: 'Messages',
outlet: 'Messages',
loadChildren: '../Messages/Messages.module#MessagesPageModule'
}
]
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule { }
Import the TabsPageModule and put it on app.module.ts to the imports: [...].
This works for me.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule, 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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TabsPageModule } from './tabs/tabs.module';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, TabsPageModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
After so many attempts I found that this approach will never work like that at least for now the only way for this to work is to not use lazy loading the code will be like that:
app.routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { TabsPage } from './tabs/tabs.page'
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'home', component: TabsPage },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TabsPageModule } from './tabs/tabs.module';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
TabsPageModule
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
Notice importing TabsPageModule.
tabs.routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TabsPage } from './tabs.page';
import { MyPlacePage } from '../MyPlaces/MyPlaces.Page';
import { MessagesPage } from '../Messages/Messages.Page';
const routes: Routes = [
{
path: 'home',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/home/(MyPlaces:MyPlaces)',
pathMatch: 'full'
},
{
path: 'MyPlaces',
outlet: 'MyPlaces',
component: MyPlacePage
},
{
path: 'Messages',
outlet: 'Messages',
component: MessagesPage
}
]
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule { }
tabs.module.ts
import { IonicModule } from '#ionic/angular';
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { TabsPageRoutingModule } from './tabs.router.module';
import { TabsPage } from './tabs.page';
import { MyPlacesPageModule } from '../MyPlaces/MyPlaces.module';
import { MessagesPageModule } from '../Messages/Messages.module';
#NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
TabsPageRoutingModule,
MyPlacesPageModule,
MessagesPageModule
],
declarations: [TabsPage]
})
export class TabsPageModule {}
Notice also that you need to work with href to link tabs page not routerLiknk.
I found a way to do this with lazy loading. In the page which contains the tabs we add a new variable which is a class and updated when the navigation changes:
<ion-tabs [class]="'url' + currentUrl">
</ion-tabs>
This class is updated in the .ts file:
import {Router,Event,NavigationEnd} from '#angular/router';
#Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
public notificationCount = 0;
public currentUrl: string;
constructor(private router: Router) {
this.router.events.subscribe((event: Event) => {
if (event instanceof NavigationEnd) {
console.log('loading finished', event);
this.currentUrl = event.url.split('/').join('-')
}
});
}
In this way you can hide the tabbar using css in your global.scss
ion-tabs {
&.url-home-tournaments-main-play,
&.url-home-tournaments-main-play-score {
ion-tab-bar {
display: none;
}
}
}

Whereto with `disableDeprecatedForms(),provideForms()` in RC5?

Without deactivating the old forms with (in RC4 > it was a part of bootstrapping process)
disableDeprecatedForms(),
provideForms()
I cannot render data (got over observables) e.g. in a select boxes (options/*ngFor).
Where can I deactivate the old forms in RC5?
(OverviewComponent below has the form with select boxes)
That's the new main.ts:
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
That's the new app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { APP_BASE_HREF } from '#angular/common';
import { RouterModule } from '#angular/router';
import { HttpModule } from '#angular/http';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { routes } from './app.routes';
import {
OverviewComponent,
} from './forms/index';
#NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot(routes),
],
declarations: [
AppComponent,
OverviewComponent,
BasisdateneingabeComponent
],
providers: [{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
}],
bootstrap: [AppComponent]
})
export class AppModule { }
According to this, disableDeprecatedForms() still exists in RC5 but has been deprecated. Your problems are probably coming from the fact that your application is using the RC4 forms API. The best solution would be to update your forms to RC5 avoid further problems with new releases.
In lieu of that, you should be able to find a fix here (Bootstrapping has changed a little bit since that was written). There is a DeprecatedFormsModule that you can use. In your app.module, import it and add it to the imports array. Like so:
//...
import {DeprecatedFormsModule} from '#angular/common';
#NgModule({
//...
imports: [
//....
DeprecatedFormsModule
],
//...
})