ERROR Error: Uncaught (in promise): Error: Type UserProfileComponent is part of the declarations of 2 modules: AdminLayoutModule and DemoLayoutModule! Please consider moving UserProfileComponent to a higher module that imports AdminLayoutModule and DemoLayoutModule. You can also create a new NgModule that exports and includes UserProfileComponent then import that NgModule in AdminLayoutModule and DemoLayoutModule.
Error: Type UserProfileComponent is part of the declarations of 2 modules: AdminLayoutModule and DemoLayoutModule! Please consider moving UserProfileComponent to a higher module that imports AdminLayoutModule and DemoLayoutModule. You can also create a new NgModule that exports and includes UserProfileComponent then import that NgModule in AdminLayoutModule and DemoLayoutModule.
demo layout
import { NgModule, Component } from '#angular/core';
import { RouterModule } from '#angular/router';
import { CommonModule } from '#angular/common';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { DemoLayoutRoutes } from './demo-layout.routing';
import { DemodashboardComponent } from '../../pages/demodashboard/demodashboard.component';
import { UserProfileComponent } from '../../pages/user-profile/user-profile.component';
import { ComponentsModule } from 'app/components/components.module';
import { AddComponent } from 'app/components/add/add.component';
import { DemoRetrieveComponent } from 'app/components/demoretrieve/demoretrieve.component';
import {
MatButtonModule,
MatInputModule,
MatRippleModule,
MatFormFieldModule,
MatTooltipModule,
MatSelectModule,
MatRadioModule,
MatStepperModule,
MatListModule,
MatDatepickerModule,
MatNativeDateModule,
MatIconModule,
} from '#angular/material';
import { FusionChartsModule } from 'angular-fusioncharts';
import { AnalysisComponent } from 'app/components/analysis/analysis.component';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import { UserProfileViewComponent } from 'app/components/user-profile-view/user-profile-view.component';
import { ReportEditComponent } from 'app/components/report-edit/report-edit.component';
import { ReportDeleteComponent } from 'app/components/report-delete/report-delete.component';
import { ReportViewComponent } from 'app/components/report-view/report-view.component';
FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);
#NgModule({
imports: [
CommonModule,
RouterModule.forChild(DemoLayoutRoutes),
FormsModule,
MatButtonModule,
MatRippleModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatTooltipModule,
ComponentsModule,
MatRadioModule,
MatStepperModule,
ReactiveFormsModule,
MatListModule,
MatDatepickerModule,
MatNativeDateModule,
MatIconModule,
FusionChartsModule,
HttpModule,
],
declarations: [
DemodashboardComponent,
UserProfileComponent,
AnalysisComponent,
AddComponent,
DemoRetrieveComponent,
UserProfileViewComponent,
ReportEditComponent,
ReportDeleteComponent,
ReportViewComponent,
]
})
export class DemoLayoutModule {}
import { Routes } from '#angular/router';
import { DemodashboardComponent } from '../../pages/demodashboard/demodashboard.component';
import { UserProfileComponent } from '../../pages/user-profile/user-profile.component';
import { AddComponent } from 'app/components/add/add.component';
import { DemoRetrieveComponent } from 'app/components/demoretrieve/demoretrieve.component';
import { UserProfileViewComponent } from 'app/components/user-profile-view/user-profile-view.component';
import { AnalysisComponent } from 'app/components/analysis/analysis.component';
import { ReportEditComponent } from 'app/components/report-edit/report-edit.component';
import { ReportDeleteComponent } from 'app/components/report-delete/report-delete.component';
import { ReportViewComponent } from 'app/components/report-view/report-view.component';
export const DemoLayoutRoutes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'dashboard', component: DemodashboardComponent },
{ path: 'Dashboard', component: DemodashboardComponent },
{ path: 'User-Profile', component: UserProfileComponent},
{ path: 'User-Profile-view', component: UserProfileViewComponent},
{ path: 'add', component: AddComponent },
{ path: 'demoretrieve', component: DemoRetrieveComponent },
{ path: 'analysis', component: AnalysisComponent },
{ path: 'report-edit', component: ReportEditComponent },
{ path: 'report-delete', component: ReportDeleteComponent },
{ path: 'report-view', component: ReportViewComponent },
];
admin layout
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { CommonModule } from '#angular/common';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { AdminLayoutRoutes } from './admin-layout.routing';
import { AdmindashboardComponent } from '../../pages/admindashboard/admindashboard.component';
import { UserProfileComponent } from '../../pages/user-profile/user-profile.component';
import { IconsComponent } from '../../pages/icons/icons.component';
import { UserAccessComponent } from 'app/pages/user-access/user-access.component';
import {
MatButtonModule,
MatInputModule,
MatRippleModule,
MatFormFieldModule,
MatTooltipModule,
MatSelectModule,
MatSlideToggleModule,
MatIconModule,
MatDatepickerModule,
MatNativeDateModule,
} from '#angular/material';
import { AdminEditUserDetailComponent } from 'app/pages/admin-edit-user-detail/admin-edit-user-detail.component';
import { UserProfileDeleteComponent } from 'app/components/user-profile-delete/user-profile-delete.component';
import { UserProfileEditComponent } from 'app/components/user-profile-edit/user-profile-edit.component';
import { UserProfileAddComponent } from 'app/components/user-profile-add/user-profile-add.component';
import { UserProfileViewComponent } from 'app/components/user-profile-view/user-profile-view.component';
import { HttpClientModule } from '#angular/common/http';
import { HttpModule } from '#angular/http';
#NgModule({
imports: [
CommonModule,
RouterModule.forChild(AdminLayoutRoutes),
FormsModule,
MatButtonModule,
MatRippleModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatTooltipModule,
MatSlideToggleModule,
MatIconModule,
MatDatepickerModule,
MatNativeDateModule,
ReactiveFormsModule,
HttpClientModule,
HttpModule,
],
declarations: [
AdmindashboardComponent,
IconsComponent,
UserAccessComponent,
AdminEditUserDetailComponent,
UserProfileDeleteComponent,
UserProfileEditComponent,
UserProfileAddComponent,
UserProfileViewComponent,
UserProfileComponent,
]
})
export class AdminLayoutModule {}
import { Routes } from '#angular/router';
import { AdmindashboardComponent } from '../../pages/admindashboard/admindashboard.component';
import { UserAccessComponent } from '../../pages/user-access/user-access.component';
import { UserProfileComponent } from '../../pages/user-profile/user-profile.component';
import { IconsComponent } from '../../pages/icons/icons.component';
import { AdminEditUserDetailComponent } from 'app/pages/admin-edit-user-detail/admin-edit-user-detail.component';
import { UserProfileDeleteComponent } from 'app/components/user-profile-delete/user-profile-delete.component';
import { UserProfileEditComponent } from 'app/components/user-profile-edit/user-profile-edit.component';
import { UserProfileAddComponent } from 'app/components/user-profile-add/user-profile-add.component';
import { UserProfileViewComponent } from 'app/components/user-profile-view/user-profile-view.component';
import { AdminuserService } from 'app/service/adminuser.service';
export const AdminLayoutRoutes: Routes = [
/* {
path: '',
children: [ {
path: 'dashboard',
component: AdmindashboardComponent
}]},
{ path: '', pathMatch: 'full', redirectTo: 'dashboard', component: AdmindashboardComponent },
{ path: 'Dashboard', component: AdmindashboardComponent },
{ path: 'User-Profile', component: UserProfileComponent},
{ path: 'User-Profile-delete', component: UserProfileDeleteComponent },
{ path: 'User-Profile-edit', component: UserProfileEditComponent },
{ path: 'User-Profile-view', component: UserProfileViewComponent},
{ path: 'Add-Users', component: UserProfileAddComponent },
{ path: 'User-Access', component: UserAccessComponent },
{ path: 'icons', component: IconsComponent },
{ path: 'Edit-User-Detail', component: AdminEditUserDetailComponent}
];
you can create all share module and then UserProfileComponent put it to ngmodule declarations array
#NgModule({
imports: [
CommonModule,
RouterModule,
FormsModule,
MatButtonModule,
MatRadioModule,
MatRippleModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatTooltipModule,
MatSlideToggleModule,
MatIconModule,
MatDatepickerModule,
MatNativeDateModule,
ReactiveFormsModule,
HttpClientModule,
HttpModule,
],
declarations: [
UserProfileComponent,
UserProfileViewComponent,
]
})
export class AllShareModule { }
then that all share module put it to AdminLayoutModule and DemoLayoutModule ngmodule imports array
Related
My input isn't accepted or something is off because my code is right.
in my item-detail.component.html is this code:
<StackLayout class="nt-form chat-wrapper" >
<StackLayout id="chat-form" orientation="horizontal" class="nt-input input-field form">
<TextField [(ngModel)]="usero" width="800px" class="-rounded-lg input" hint="Nachricht" style="background-color: #ffffff;"></TextField>
<button width="120px" class="-rounded-lg fa far fas fab" (tap)="sendMessage()" style="margin-left: 15px;" text=""></button>
</StackLayout>
</StackLayout>
and my item-detail.component.ts is this code:
import { DatePipe } from "#angular/common";
import { Component, OnInit } from "#angular/core";
import { ActivatedRoute } from "#angular/router";
import { FormatListNumbered } from "#material-ui/icons";
import { RouterExtensions } from "#nativescript/angular";
import { resolveFileNameFromUrl } from "#nativescript/core";
import { connectableObservableDescriptor } from "rxjs/internal/observable/ConnectableObservable";
import { ChatService, DataChat } from "../shared/chat.service";
import { FormControl } from '#angular/forms';
import { UserService, DataUser } from "../shared/user.service";
#Component({
selector: "ItemDetail",
styleUrls: ['item-detail.component.css'],
templateUrl: "./item-detail.component.html",
providers: [DatePipe]
})
export class ItemDetailComponent implements OnInit {
usero = "";
constructor(){};
sendMessage(): void{
console.log("usero", this.usero);
}
item-detail.module.ts is this:
import { NativeScriptFormsModule } from "#nativescript/angular";
import { NativeScriptCommonModule } from "#nativescript/angular/common";
import { ItemDetailComponent } from "./item-detail.component";
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
#NgModule({
imports: [
NativeScriptFormsModule,
NativeScriptCommonModule
],
declarations: [
ItemDetailComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class ItemDetailModule { }
and my app.module.ts is this:
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptFormsModule, NativeScriptModule } from "#nativescript/angular";
import { FormsModule} from '#angular/forms'
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { BrowserModule } from '#angular/platform-browser';
#NgModule({
bootstrap: [
AppComponent
],
imports: [
FormsModule,
BrowserModule,
NativeScriptModule,
NativeScriptFormsModule,
AppRoutingModule,
NativeScriptFormsModule
],
declarations: [
AppComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
So everythin that i should do is done. But for whatever reason it doesnt work the variable is empty.
For anyone getting on the same issue:
In the NativeScript docs is a good doc for TextField:
https://docs.nativescript.org/angular/ui/ng-components/text-field
So my textfield looks like this:
<TextField
(textChange)="onTextChange($event)"
width="800px"
class="-rounded-lg input"
hint="Nachricht"
style="background-color: #ffffff;"
></TextField>
and my ts like this:
onTextChange(args){
let textField = <TextField>args.object;
this.text = textField.text;
}
And if the Button is pressed this function is called:
sendMessage(): void{
console.log("textfield", this.text);
}
I'm using React Active with Redux on Expo and tried to run my project on Android and getting below error:
enter image description here
Versions:
Expo: 36.0.0
React: 16.9.0
React-Native: 36.0.0 SDK
Redux: 4.0.2
React-Redux: 5.1.1
App.js
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
// import Store from './src/redux/Store';
import configureStore from './src/redux/Store';
import AppNavigator from './src/navigation/AppNavigator'
const store = configureStore();
export default function App() {
return (
<Provider store={store}>
<AppNavigator></AppNavigator>
</Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
=============================================
AppNavigation.js
import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import Products from '../screens/Products';
import Checkout from '../screens/Checkout';
import Receipt from '../screens/Receipt';
import themes from '../styles/theme.style';
const AppNavigator = createStackNavigator({
Products: {
screens: Products
},
Checkout: {
screens: Checkout
},
Receipt: {
screens: Receipt
}
}, {
navigationOptions: {
headerStyles: {
backgroundColor: themes.BACKGROUND_COLOR,
paddingHorizontal: 10,
},
headerTintColor: '#fff'
}
}
);
export default AppNavigator;
========================================================
Product.js
import React, { Component } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import Product from '../components/Product';
import { addToCart } from '../redux/actions/CartActions';
import { fetchProducts } from '../redux/actions/ProductAction';
import Logo from '../components/Logo';
import Cart from '../components/Cart';
class Products extends React.Component {
static navigationOptions = ({navigation}) => {
return {
headerTitle: 'Products',
headerLeft: <Logo navigation={navigation}/>,
headerRight: <Cart navigation={navigation}/>
}
}
constructor(props) {
super(props);
}
componentWillMount = () => {
this.props.fetchProducts();
}
addItemsToCart = (product) => {
this.props.addToCart(product);
}
render() {
const { products, navigation } = this.props
return (
<View style={styles.container}>
<View style={styles.body}>
<FlatList
data={products}
renderItem={({item}) => <Product item={item} addItemsToCart={this.addItemsToCart} product={item}/>}
keyExtractor ={(item) => item.id}
ItemSeparatorComponent= {()=> <View style={{height:0.5, backgroundColor:'#34495e90'}}/> }/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
body: {
flex: 1,
justifyContent: 'center'
}
});
const mapStateToProps = (state) => ({
products: state.products.items
})
export default connect(mapStateToProps, {addToCart,fetchProducts})(Products);
I don't know wat is wrong here, I tried with multiple options but no luck. Any suggestions will be appreciated.
Run command:
expo-cli start
Check where you are importing from.
import {createStackNavigator } from 'react-navigation/stack';
This is my dashboard.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import {JwtModule} from '#auth0/angular-jwt';
import {AuthService} from '../services/auth.service';
import {dashboardComponent} from './dashboard.component';
import { foodPollComponent } from '../modules/foodPoll/foodPoll.component';
import { dashboardModuleRoutingModule } from './dashboard.routing.module';
#NgModule({
imports: [
CommonModule, dashboardModuleRoutingModule
],
declarations: [
dashboardComponent,
foodPollComponent
],
providers: [JwtModule, AuthService]
})
export class dashboardModule { }
This is my dashboard.routing.module.ts
import { NgModule } from '#angular/core';
import { Routes,
RouterModule } from '#angular/router';
import { dashboardComponent } from './dashboard.component';
import { foodPollComponent } from '../modules/foodPoll/foodPoll.component';
const routes: Routes = [
{
path: 'dashboard',
component:dashboardComponent
},
{
path: 'dashboard/:id',
component: dashboardComponent,
children: [
{
path: 'foodPoll',
component: foodPollComponent,
outlet: "details"
}
]
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class dashboardModuleRoutingModule {}
This is my dashboard.component.html
<div class="dashboard">
<header>Random header text</header>
<router-outlet name="details"></router-outler>
</div>
But when I change from localhost:4200/dashboard to localhost:4200/dashboard/foodPoll, nothing renders in the router outlet view. The view still remains the same as dashboard page.
Where I am doing wrong? Any help would be appreciated.
Thanks
path: 'dashboard/:id',
component: dashboardComponent,
children: [
{
path: 'foodPoll',
component: foodPollComponent,
outlet: "details"
}
]
dashboardComponent would be on url: "dashboard/...anything.../"
foodPollComponent would be on url: "dashboard/...anything.../foodPoll"
:id - is dynamic parameter for dashboardComponent
i'm getting an error while i'm running my app.
my app build like this :
the app-component should navigate to the app-routes and from there to the pages-component .
the pages-component template is 'router-outlet' and it navigates to the pages-routes that is navigate between the views.
i did it like this :
Main app-component :
import { Component } from "#angular/core";
import { PagesComponent } from '~/pages/pages.component'
#Component({
selector: "ns-app",
template: "<router-outlet></router-outlet>"
})
export class AppComponent { }
Main app-routes :
import { PagesComponent } from "~/pages/pages.component";
import { LoginComponent } from "~/pages/login/login.component";
import { RegisterComponent } from "~/pages/register/register.component";
import { AuthGuard } from "~/#shared/services/auth-guard.service";
import { TaskListComponent } from "~/pages/task-list/task-list.component";
export const AUTH_PROVIDERS = [
AuthGuard
];
export const APP_ROUTES = [
{ path: "", redirectTo: "/pages", pathMatch: "full" },
{ path: "**", redirectTo: "" },
];
pages-component :
import { OnInit, Component } from "#angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { Router } from "#angular/router";
#Component({
moduleId: module.id,
selector: "pages",
template: "<router-outlet></router-outlet>"
})
export class PagesComponent implements OnInit {
constructor(private routerExtensions: RouterExtensions, private router:
Router) {
}
ngOnInit(): void {
}
}
pages-routes :
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { ModuleWithProviders } from "#angular/core";
import { PagesComponent } from "~/pages/pages.component";
import { LoginComponent } from "~/pages/login/login.component";
import { RegisterComponent } from "~/pages/register/register.component";
import { AuthGuard } from "~/#shared/services/auth-guard.service";
import { TaskListComponent } from "~/pages/task-list/task-list.component";
const PAGES_ROUTES = [
{path: "pages", component: PagesComponent, children: [
{ path: "login", component: LoginComponent },
{ path: "register", component: RegisterComponent },
{ path: "task-list", canActivate: [AuthGuard], component:
TaskListComponent },
{ path: "", redirectTo: "/task-list", pathMatch: "full" },
]
},
];
//, canActivate:[AuthGuard]
export const PagesRoutingModule: ModuleWithProviders =
NativeScriptRouterModule.forRoot(PAGES_ROUTES);
the error I've got :
The Error Screenshot
what do you think can be the problem ? am i missing something?
thank you !
My Angular application is working properly, but I am keep getting Karma error when I run ng test command. I have attached app component, spec, module and html along with package.json file. Error looks like this:
Failed: No provider for ChildrenOutletContexts!
Error: No provider for ChildrenOutletContexts!
at injectionError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:39523:90)
at noProviderError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:39561:12)
at ReflectiveInjector_.webpackJsonp.../../../core/#angular/core.es5.js.ReflectiveInjector_._throwOrNull (http://localhost:9876/_karma_webpack_/vendor.bundle.js:41003:19)
at ReflectiveInjector_.webpackJsonp.../../../core/#angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (http://localhost:9876/_karma_webpack_/vendor.bundle.js:41042:25)
at ReflectiveInjector_.webpackJsonp.../../../core/#angular/core.es5.js.ReflectiveInjector_._getByKey (http://localhost:9876/_karma_webpack_/vendor.bundle.js:40974:25)
at ReflectiveInjector_.webpackJsonp.../../../core/#angular/core.es5.js.ReflectiveInjector_.get (http://localhost:9876/_karma_webpack_/vendor.bundle.js:40843:21)
at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/vendor.bundle.js:47827:25)
at NgModuleRef_.webpackJsonp.../../../core/#angular/core.es5.js.NgModuleRef_.get (http://localhost:9876/_karma_webpack_/vendor.bundle.js:48909:16)
at resolveDep (http://localhost:9876/_karma_webpack_/vendor.bundle.js:49412:45)
at createClass (http://localhost:9876/_karma_webpack_/vendor.bundle.js:49276:32)
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
title = 'app';
}
app.component.html
Dashboard
User
<router-outlet></router-outlet>
app.component.spec.ts
import { TestBed, async } from '#angular/core/testing';
import { RouterModule, Routes } from '#angular/router';
import { FormsModule } from '#angular/forms';
import { APP_BASE_HREF } from '#angular/common';
import { AppComponent } from './app.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';
describe('AppComponent', () => {
const routes: Routes = [
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
},
{
path: 'dashboard',
component: DashboardComponent,
},
{
path: 'user',
loadChildren: 'app/modules/user/user.module#UserModule'
}
];
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterModule,
FormsModule
],
declarations: [
AppComponent,
DashboardComponent
],
providers: [
{ provide: APP_BASE_HREF, useClass: routes }
]
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it('should have as title app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app');
}));
it('should render title in a h1 tag', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!!');
}));
});
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';
const routes: Routes = [
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
},
{
path: 'dashboard',
component: DashboardComponent,
},
{
path: 'user',
loadChildren: 'app/modules/user/user.module#UserModule'
}
];
#NgModule({
declarations: [
AppComponent,
DashboardComponent,
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent],
exports: [RouterModule]
})
export class AppModule { }
package.json
...
"dependencies": {
"#angular/animations": "^4.0.0",
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"#angular/cli": "1.2.1",
"#angular/compiler-cli": "^4.0.0",
"#angular/language-service": "^4.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3",
....
Based on the clue provided by #John, I imported RouterTestingModule instead of importing RouterModule and APP_BASE_HREF. So, the following modification in app.component.spec.ts worked!
import { TestBed, async } from '#angular/core/testing';
import { FormsModule } from '#angular/forms';
import { RouterTestingModule } from '#angular/router/testing';
import { AppComponent } from './app.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
FormsModule
],
declarations: [
AppComponent,
DashboardComponent
]
}).compileComponents();
}));