I have created an ionic app using npm as normally and following the readme.txt file to assign the theme in the app I have generated errors:-
Error-1
C:/Users/cc/Eklavya1/src/app/app.module.ts
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { Camera } from '#ionic-native/camera';
import { MyApp } from './app.component';
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { Camera } from '#ionic-native/camera';
import { MyApp } from './app.component';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
var config = {
backButtonText: '',
backButtonIcon: 'ios-arrow-back',
iconMode: 'ios',
mode:'ios',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
pageTransition: 'ios',
};
#NgModule({
declarations: [
MyApp,
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp,config),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
],
providers: [
StatusBar,
SplashScreen,
Camera,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Cannot find module 'ionic2-rating'.
C:/Users/cc/Eklavya1/src/pages/lesson-details/lesson-details.module.ts
import { LessonDetailsPage } from './lesson-details';
import { Ionic2RatingModule } from 'ionic2-rating';
lesson-detail.module.ts-->
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LessonDetailsPage } from './lesson-details';
import { Ionic2RatingModule } from 'ionic2-rating';
#NgModule({
declarations: [
LessonDetailsPage,
],
imports: [
IonicPageModule.forChild(LessonDetailsPage),Ionic2RatingModule
],
})
export class LessonDetailsPageModule {}
C:/Users/cc/Eklavya1/src/pages/lessons/lessons.module.ts
import { LessonsPage } from './lessons';
import { Ionic2RatingModule } from 'ionic2-rating';
#NgModule({
lesson.module.ts-->
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LessonsPage } from './lessons';
import { Ionic2RatingModule } from 'ionic2-rating';
#NgModule({
declarations: [
LessonsPage,
],
imports: [
IonicPageModule.forChild(LessonsPage),Ionic2RatingModule
],
})
export class LessonsPageModule {}
Cannot find module '#ionic-native/camera'.
C:/Users/cc/Eklavya1/src/pages/profile/profile.ts
import { NavController, ActionSheetController } from 'ionic-angular';
import { Camera, CameraOptions } from '#ionic-native/camera';
profile.ts-->
import { Component } from '#angular/core';
import { IonicPage, NavController, ActionSheetController } from 'ionic-angular';
import { Camera, CameraOptions } from '#ionic-native/camera';
#IonicPage()
#Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class ProfilePage {
name="Adam G Smith";
current_job="Assistant Professor of Science";
email="Adam.g#gmail.com";
address="2 Floor,Building 4";
phone="91234 56789";
code='1';
password="123456789";
jobs="Assistant Professor of Science 2011 \n,Professor of Physics 2009
\n,Assistant Professor of Science 2011 \n,Professor of Physics 2009";
flag=true;
btn_text='Update';
btn_color="color1";
img='assets/img/profile.png';
constructor(public navCtrl: NavController, public actionSheetCtrl: ActionSheetController, public camera: Camera) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ProfilePage');
}
update(){
if(this.flag==false){
this.flag =true;
this.btn_text="Update";
this.btn_color="color1";
}
else{
this.flag =false;
this.btn_text="Save";
this.btn_color="color2";
}
}
// gallery
// ActionSheet for change user picture
selectImage() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Modify your Picture',
buttons: [
{
text: 'Gallery',
handler: () => {this.get_camera(1);}
},{
text: 'Camera',
handler: () => {this.get_camera(2);}
},{
text: 'Cancel',
role: 'cancel',
handler: () => {}
}
]
});
actionSheet.present();
}
get_camera(source) {
const options: CameraOptions = { quality: 100,destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE
,allowEdit:true,targetWidth:512,targetHeight:512,correctOrientation:true}
if(source==1){
options.sourceType= this.camera.PictureSourceType.PHOTOLIBRARY
}
else {
options.sourceType= this.camera.PictureSourceType.CAMERA
}
this.camera.getPicture(options).then((imageData) => {
this.img='data:image/jpeg;base64,' + imageData;
}, (err) => {});
}
}
Apparently you don't have the follwing libraries in node_modules: ionic2-rating & #ionic-native/camera
Install them with following commands:
$ npm install --save ionic2-rating
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save #ionic-native/camera
Related
I have an Angular app which requires session authorization from an OIDC service. With the normal/happy path, a separate NodeJS/Express app checks for session authorization and redirects to the OIDC authorization/authentication service and attaches the relevant headers. If everything passes, the middleware routes to the Angular app.
At a point though, the Angular app runs with a token that is expired. The Angular app gets the username and at that point I could check for expiration. However, if it is expired, I need the Angular way to react to the error condition by re-routing the whole Angular app to the relevant middleware page. Because the indicator will go to a component nested within the app, I don't know how to get the little component to redirect the bigger/encompassing app.
I'm not an Angular person, so I don't even know what part of Angular to look up. Because of my lack of knowledge, I'm including source files that might or might not be relevant.
header.component.ts is where it gets the username and could return a bad token indicator
import { Component, OnInit } from '#angular/core';
import { ProfileService } from '../../../core/services/profile.service';
#Component({
selector: 'header-comp',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
userName: string = 'No Session';
constructor(private profileService: ProfileService) { }
ngOnInit() {
this.onDisplayUserLogged();
}
onDisplayUserLogged() {
this.profileService.getUsername().subscribe(data => {
this.userName = 'Welcome: ' + data;
});
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { APP_BASE_HREF } from '#angular/common';
import { Router } from '#angular/router';
//Services
import { ProfileService } from './core/services/profile.service';
import { FinanceService } from './core/services/finance.service';
import { CmasService } from './core/services/cmas.service';
import { SoftlayerService } from './core/services/softlayer.service';
import { DashboardService } from './core/services/dashboard.service';
import { LowDollarExceptionService } from './core/services/lowDollarException.service';
//Components
import { AppComponent } from './app.component';
import { CmasComponent } from './modules/cmas/cmas.component';
import { SoftlayerComponent } from './modules/softlayer/softlayer.component';
import { FinanceComponent } from './modules/finance/finance.component';
import { ErrorComponent } from './modules/error/error/error.component';
import { LowDollarExceptionComponent } from './modules/lowDollarException/lowDollarException.component'
import { MenuComponent } from './shared/layout/menu/menu.component';
import { BasicComponent } from './shared/modals/basic/basic.component';
import { HeaderComponent } from './shared/layout/header/header.component';
import { PreProcessedPipe } from './shared/components/file-listing/file-listing.component';
import { ProcessedPipe } from './shared/components/softlayer-file-list/softlayer-file-list.component';
//Routing
import { AppRoutingModule } from './app-routing.module';
//Libs
import { AuthInterceptor } from 'auth-lib';
import { TermsComponent } from './modules/terms/terms.component';
import { FileListingComponent } from './shared/components/file-listing/file-listing.component';
import { ConfirmCancelComponent } from './shared/modals/confirm-cancel/confirm-cancel.component';
import { ErrorDisplayComponent } from './shared/components/error-display/error-display.component';
import { AboutComponent } from './modules/about/about.component';
import { ResultsComponent } from './modules/cmas/results/results.component';
import { SoftlayerFileListComponent } from './shared/components/softlayer-file-list/softlayer-file-list.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';
import { ReviewResultsComponent } from './modules/softlayer/review-results/review-results.component';
import { InvoiceDetailsComponent } from './modules/dashboard/invoice-details/invoice-details.component';
import { FormsModule } from '#angular/forms';
import { LowDollarNewRecordComponent } from './modules/lowDollarException/lowDollarNewRecord.component';
#NgModule({
declarations: [
AppComponent,
CmasComponent,
FinanceComponent,
ErrorComponent,
MenuComponent,
BasicComponent,
HeaderComponent,
TermsComponent,
FileListingComponent,
PreProcessedPipe,
ProcessedPipe,
ConfirmCancelComponent,
ErrorDisplayComponent,
AboutComponent,
ResultsComponent,
SoftlayerComponent,
SoftlayerFileListComponent,
DashboardComponent,
ReviewResultsComponent,
InvoiceDetailsComponent,
LowDollarExceptionComponent,
LowDollarNewRecordComponent
],
imports: [BrowserModule, HttpClientModule, AppRoutingModule, FormsModule],
providers: [
ProfileService,
FinanceService,
CmasService,
SoftlayerService,
DashboardService,
LowDollarExceptionService,
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
deps: [Router],
multi: true,
},
{ provide: APP_BASE_HREF, useValue: '/sprint-cost-recovery' },
],
bootstrap: [AppComponent],
})
export class AppModule {}
app.component.ts
import { Component, OnInit } from '#angular/core';
import { Observable } from 'rxjs';
import listadeTerms from '../assets/config/properties.json';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
constructor() {}
ngOnInit() {
this.openOverlay();
}
openOverlay() {
var sheet = document.createElement('style');
sheet.innerHTML =
'.ds-full-width {visibility: hidden;} .usabilla_live_button_container{visibility: hidden;}';
document.body.appendChild(sheet);
if (document.getElementById('termsDialog')) {
var overlayElement = document.querySelector('#termsDialog');
overlayElement.classList.add('ds-open');
document
.querySelector('#termsDialogCloseBtn')
.addEventListener('click', load);
}
function load() {
var div = document.getElementById('termsDialog');
sheet.innerHTML = '.usabilla_live_button_container{visibility: true;}';
var parent = div.parentElement;
parent.removeChild(div);
var node = sheet.parentNode;
node.removeChild(sheet);
}
}
}
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
// Components
import { CmasComponent } from './modules/cmas/cmas.component';
import { FinanceComponent } from './modules/finance/finance.component';
import { ErrorComponent } from './modules/error/error/error.component';
import { AboutComponent } from './modules/about/about.component';
import { SoftlayerComponent } from './modules/softlayer/softlayer.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';
import { LowDollarExceptionComponent } from './modules/lowDollarException/lowDollarException.component';
import { LowDollarNewRecordComponent } from './modules/lowDollarException/lowDollarNewRecord.component';
const appRoutes: Routes = [
{ path: 'finance', component: FinanceComponent },
{ path: 'cmas-process', component: CmasComponent },
{ path: 'about', component: AboutComponent },
{ path: 'softlayer-process', component: SoftlayerComponent },
{ path: 'cost-dashboard', component: DashboardComponent },
{ path: 'low-dollar', component: LowDollarExceptionComponent },
{ path: 'low-dollar/create', component: LowDollarNewRecordComponent },
{ path: 'error/auth', component: ErrorComponent, data: { forbidden: true } },
{ path: '', redirectTo: '/finance', pathMatch: 'full' },
{
path: 'error/badgateway',
component: ErrorComponent,
data: { badgateway: true },
},
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
The way to achieve this in Angular is through the Route Guards. At a high level, it was like so:
Create the route guards. It returns a true or false depending on a condition it checks.
Add the canActivate parameter to the routes that need to be checked for authentication, e.g.:
const appRoutes: Routes = [
{ path: 'finance', component: FinanceComponent, canActivate: [AuthGuard] },
{ path: 'cmas-process', component: CmasComponent, canActivate: [AuthGuard] },
If the user is not authenticated, the redirect (to the login page for example) is specified in the route guard:
#Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivateChild {
constructor(
private authService: AuthService,
private logger: NGXLogger,
private router: Router
) {}
canActivateChild(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> {
return this.authService.isLoggedIn().pipe(
map(isLoggedIn => {
if (!isLoggedIn) {
return this.router.parseUrl('/login');
}
return true;
})
);
}
}
I have angular universal + pwa + ngx-translate app and now I have a little glitch/bug. When i load my app i can see for like 300-500ms all untranslated texts (keys) like common.back, common.nextand then they change to translation values like next and back.
How to load translation before page load on angular universal ?
This is my setup :
app.module :
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
imports: [
...
TransferHttpCacheModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
...
]
app.server.module :
import { NgModule } from '#angular/core';
import { ServerModule, ServerTransferStateModule } from '#angular/platform-server';
import { BrowserModule } from '#angular/platform-browser';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
#NgModule({
imports: [
AppModule,
ServerModule,
ServerTransferStateModule,
BrowserModule.withServerTransition({ appId: 'autorent' }),
],
bootstrap: [AppComponent],
})
export class AppServerModule { }
app.browser.module :
import { NgModule } from '#angular/core';
import { BrowserModule, BrowserTransferStateModule } from '#angular/platform-browser';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '#angular/service-worker';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
imports: [
AppModule,
BrowserModule.withServerTransition({ appId: 'autorent' }),
BrowserTransferStateModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
BrowserAnimationsModule
],
bootstrap: [AppComponent],
})
export class AppBrowserModule { }
If you need another info, which I doubt, just write in comments and I will provide.
I am working on Angular with v 5 app. I am doing API fetching and using https://angular.io/guide/http document. But I am unable to see anything in my view.
How can I fix this problem with document provided data?
My folder structure:
https://imgur.com/A03KtDy
There isn't any bug in terminal:
https://imgur.com/a/AEKxv
No issues in console:
https://imgur.com/JaPTvXZ
File: app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { HttpClientModule } from '#angular/common/http';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { ConfigService } from './services/config.service';
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'dashboard', component: DashboardComponent },
];
#NgModule({
declarations: [
AppComponent,
NavbarComponent,
HomeComponent,
DashboardComponent
],
imports: [
BrowserModule,
HttpClientModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
// other imports here
],
providers: [ConfigService],
bootstrap: [AppComponent]
})
export class AppModule { }
file: config.service.ts
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Config } from './config';
import { Observable } from 'rxjs/Observable';
#Injectable()
export class ConfigService {
constructor(private http: HttpClient) { }
configUrl : 'http://localhost:3000/api/get';
getConfig() {
return this.http.get<Config>(this.configUrl)
}
}
file: dashboard.component.ts
import { Component, OnInit } from '#angular/core';
import { ConfigService } from '../../services/config.service';
import { Config } from '../../services/config';
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
constructor(private configService : ConfigService) { }
ngOnInit() { }
config: Config;
showConfig() {
this.configService.getConfig()
// clone the data object, using its known Config shape
.subscribe(data => this.config = { ...data });
}
}
file: dashboard.component.html
<ul class="list-group" *ngFor="let config of configs">
<li class="list-group-item list-group-item-dark">{{config.name}}</li>
</ul>
file: config.ts
export interface Config {
name : string
}
I don't see in your code, that you call showConfig() method.
Maybe you forget to add call to ngOnInit() method?
ngOnInit() {
this.showConfig();
}
Env:
Angular2-webpack bolierplate : https://github.com/preboot/angular2-webpack
nodejs 6.3.1 / npm 3.10.3
When I run a karma test an error occurs but It seems works well while server running.
SUMMARY:
✔ 2 tests completed
✖ 1 test failed
FAILED TESTS:
Home Component
✖ should ...
Chrome 55.0.2883 (Mac OS X 10.12.2)
Error: Template parse errors:
'my-searchbar' is not a known element:
1. If 'my-searchbar' is an Angular component, then verify that it is part of this module.
2. If 'my-searchbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message. ("d="go_mypage" href="/mypage"><img src="/img/mypage-thin.png"></a>
<div class="fold" id="wrapper">
[ERROR ->]<my-searchbar></my-searchbar>
<span>Home Works!</span>
</div>"): HomeComponent#2:2
...
I have looked at several stack overflow questions or other websites related with this error but They were not very helpful.
app.module.ts
import { NgModule, ApplicationRef } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { MypageComponent } from './mypage/mypage.component';
import { HomeModule } from './home/home.module';
import { ApiService } from './shared';
import { routing } from './app.routing';
import { removeNgStyles, createNewHosts } from '#angularclass/hmr';
#NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule,
routing,
HomeModule
],
declarations: [
AppComponent,
MypageComponent
],
providers: [
ApiService
],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(public appRef: ApplicationRef) {}
hmrOnInit(store) {
console.log('HMR store', store);
}
hmrOnDestroy(store) {
let cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
// recreate elements
store.disposeOldHosts = createNewHosts(cmpLocation);
// remove styles
removeNgStyles();
}
hmrAfterDestroy(store) {
// display new elements
store.disposeOldHosts();
delete store.disposeOldHosts;
}
}
app.component.html
<main>
<router-outlet></router-outlet>
</main>
./home/home.component.html
<a class="route" id="go_mypage" href="/mypage"><img src="/img/mypage-thin.png"></a>
<div class="fold" id="wrapper">
<my-searchbar></my-searchbar>
<span>Home Works!</span>
</div>
./home/home.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { HomeComponent } from './home.component';
import { SearchbarComponent } from './searchbar.component';
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule
],
declarations: [
HomeComponent,
SearchbarComponent
],
exports: [
HomeComponent,
SearchbarComponent
]
})
export class HomeModule { }
--Update--
./home/searchbar.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-searchbar',
templateUrl: './searchbar.component.html',
styleUrls: ['./style/searchbar.component.scss']
})
export class SearchbarComponent {
searchWord: string;
searchTag: string[];
onKey(event: any) {
console.log(event.key);
}
}
home.component.spec.ts
// This shows a different way of testing a component, check about for a simpler one
import { Component } from '#angular/core';
import { TestBed } from '#angular/core/testing';
import { HomeComponent } from './home.component';
describe('Home Component', () => {
const html = '<my-home></my-home>';
beforeEach(() => {
TestBed.configureTestingModule({declarations: [HomeComponent, TestComponent]});
TestBed.overrideComponent(TestComponent, { set: { template: html }});
});
it('should ...', () => {
const fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
expect(fixture.nativeElement.children[0].textContent).toContain('Home Works!');
});
});
#Component({selector: 'my-test', template: ''})
class TestComponent { }
The error/warning is explanatory, so pretty much what it says there:
You have created a custom element, <my-searchbar></my-searchbar> which is not a known Angular 2 element, and to suppress the warning add it to schemas in NgModule like so:
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
I am using NgModule in angular2, 2.0.0-rc.5 but I got the error shim.js:4035 Unhandled promise rejection Error: Cannot match any routes: ''(…). How can I resolve this error.Please help me here is my code.
app/base/app.component.html
<router-outlet></router-outlet>
app/base/app.component.ts
import { Component } from '#angular/core';
import { ROUTER_DIRECTIVES } from '#angular/router';
import { EventService } from '../shared/service/event-service';
#Component({
moduleId: module.id,
selector: 'owb-workbench-app',
templateUrl: 'app.component.html',
providers: [EventService],
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
}
app/base/app.module.ts
import { provide } from '#angular/core';
import {CommonModule, APP_BASE_HREF} from "#angular/common";
import { disableDeprecatedForms, provideForms } from '#angular/forms/index';
import { enableProdMode } from '#angular/core';
import { bootstrap } from '#angular/platform-browser-dynamic';
import { LocationStrategy, HashLocationStrategy } from '#angular/common';
import { HTTP_PROVIDERS, HttpModule } from '#angular/http';
import { HttpClient } from '../shared/http/base.http';
import { EventService } from '../shared/service/event-service';
import { routing } from './app.routes';
import { DashboardComponent } from '../dashboard/dashboard.component'
import { appRoutingProviders } from './app.routes'
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { NKDatetime } from 'ng2-datetime/ng2-datetime';
#NgModule({
imports: [ BrowserModule, FormsModule,HttpModule,CommonModule,routing,appRoutingProviders],
declarations: [ AppComponent, NKDatetime,DashboardComponent],
exports: [NKDatetime],
bootstrap: [ AppComponent ],
providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: APP_BASE_HREF, useValue: '<%= APP_BASE %>' },
HTTP_PROVIDERS,EventService,HttpClient]
})
export class AppModule {
}
app/base/app.routes.ts
import { provideRouter, RouterConfig,RouterModule,Routes } from '#angular/router';
import { ModuleWithProviders } from '#angular/core';
import { DashboardRoutes } from '../dashboard/index';
export const routes: RouterConfig = [
...DashboardRoutes
];
export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
app/base/main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
app/dashboard/dashboard.component.html
<h1>Hello World Welcome</h1>
app/dashboard/dashboard.component.ts
import { Component } from '#angular/core';
import { ROUTER_DIRECTIVES } from '#angular/router';
import { TopNavComponent } from '../shared/topnav/topnav';
import { SidebarComponent } from '../shared/sidebar/sidebar';
import { RightNavComponent } from '../shared/rightnav/rightnav';
#Component({
moduleId: module.id,
selector: 'dashboard-app',
templateUrl: 'dashboard.component.html',
directives: [ ROUTER_DIRECTIVES, TopNavComponent, SidebarComponent, RightNavComponent ]
})
export class DashboardComponent {}
app/dashboard/dashboard.routes.ts
import { DashboardComponent } from './index';
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { GridViewComponent } from './+gridview/gridview.component'
const appRoutes: Routes = [
{
path: 'dashboard',
component: DashboardComponent
}
];
export const appRoutingProviders: any[] = [
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
app/dashboard/index.ts
/**
* This barrel file provides the export for the lazy loaded DashboardComponent.
*/
export * from './dashboard.component';
export * from './dashboard.routes';
You have to import your routes into the app.module.ts like this. I believe you also need to provide an empty route. In this case, home is my default route, you would change it to be dashboard if that's what your default is.
export const appRoutes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', loadChildren: './app/home/home.module#HomeModule' },
];
export const appRoutingProviders: any[] = [];
My app.module.ts (notice the RouterModule.forRoot(appRoutes) import):
#NgModule({
imports: [ BrowserModule, RouterModule.forRoot(appRoutes), SharedModule.forRoot() ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [ appRoutingProviders ]
})
export class AppModule {}