I am currently attempting to add routing to my Angular 2 project. All of the components work, but when I add 'appRoutes' to my imports on app.module.ts , an error gets thrown saying
Uncaught TypeError: Cannot set property 'stack' of undefined
Here is my code:
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { appRoutes } from './app.router';
import { AppComponent } from './app.component';
import { NavigationComponent } from './navigation/navigation.component';
import { AboutComponent } from './about/about.component';
import { ResumeComponent } from './resume/resume.component';
import { WorkComponent } from './work/work.component';
import { BlogComponent } from './blog/blog.component';
import { HomeComponent } from './home/home.component';
#NgModule({
declarations: [
AppComponent,
NavigationComponent,
AboutComponent,
ResumeComponent,
WorkComponent,
BlogComponent,
HomeComponent
],
imports: [
appRoutes,
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent, NavigationComponent, AboutComponent,
ResumeComponent, WorkComponent, BlogComponent, HomeComponent]
})
export class AppModule { }
app.router.ts
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ResumeComponent } from './resume/resume.component';
import { WorkComponent } from './work/work.component';
import { BlogComponent } from './blog/blog.component';
import { HomeComponent } from './home/home.component';
export const appRoutes: Routes =[
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'about', component: AboutComponent },
{ path: 'resume', component: ResumeComponent },
{ path: 'work', component: WorkComponent },
{ path: 'blog', component: BlogComponent },
{ path: 'home', component: HomeComponent }
];
export const routes: ModuleWithProviders = RouterModule.forRoot(appRoutes);
Any help would be appreciated. The page works until I add the appRoutes import, then it just sits on Loading...
You should not need ModuleWithProviders. Remove that from:
export const routes: ModuleWithProviders = RouterModule.forRoot(appRoutes);
i.e.
export const routes: RouterModule.forRoot(appRoutes);
and see if it works. (Also clean up by removing the import).
I was able to find the solution to my own problem. I deleted every component from bootstrap: [...] besides the AppComponent, but kept the other components in the declarations and it fixed the problem.
Related
This question already has answers here:
'router-outlet' is not a known element
(24 answers)
Closed 8 months ago.
I have tried to include all imports to the necessary files,But I have got the following error while compiling. How could I solve it?
I have generated four differnet commonents Menu,home,contact,and about.Additional to this thare are also Header component that will later help to contain the memu bar to switch between the differnt components.And also footer component.The app-routing.ts and routes.ts files are also attached with this file,which helps for routing purpose.
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the
'#NgModule.schemas' of this component to suppress this message. ("<app-header></app-header>
[ERROR ->]<router-outlet></router-outlet>
<app-footer></app-footer>"): ng:///AppModule/AppComponent.html#1:0
at syntaxError (compiler.js:1021)
at TemplateParser.push../node_modules/#angular/compiler/fesm5 /compiler.js.TemplateParser.parse (compiler.js:14830)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24018)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24005)
at compiler.js:23948
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23948)
at compiler.js:23858
at Object.then (compiler.js:1012)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)
routes.ts file
import { Routes } from '#angular/router';
import { MenuComponent } from '../menu/menu.component';
import { DishdetailComponent } from '../dishdetail/dishdetail.component';
import { HomeComponent } from '../home/home.component';
import { AboutComponent } from '../about/about.component';
import { ContactComponent } from '../contact/contact.component';
export const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'menu', component: MenuComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
app-routing.module.ts file
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes } from '#angular/router';
import { routes } from './routes';
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [ RouterModule ],
declarations: []
})
export class AppRoutingModule { }
app.module.ts file
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatToolbarModule } from '#angular/material/toolbar';
import {MatListModule} from '#angular/material/list';
import {MatGridListModule} from '#angular/material/grid-list';
import {MatCardModule} from "#angular/material/card";
import {MatButtonModule} from "#angular/material/Button";
import { FlexLayoutModule } from '#angular/flex-layout';
import 'hammerjs';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { FooterComponent} from './footer/footer.component';
import { HeaderComponent} from './header/header.component';
import { DishdetailComponent } from './dishdetail/dishdetail.component';
import { HomeComponent } from './home/home.component'
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import {DishService} from './services/dish.service';
import {RouterModule} from '#angular/router';
import { AppRoutingModule } from './app-routing/app-routing.module';
#NgModule({
declarations: [
AppComponent,
MenuComponent,
DishdetailComponent,
HeaderComponent,
FooterComponent,
HomeComponent,
AboutComponent,
ContactComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FlexLayoutModule,
MatToolbarModule,
MatGridListModule,
MatCardModule,
MatButtonModule,
MatListModule,
AppRoutingModule,
RouterModule
],`
`providers: [
DishService
],`
`bootstrap: [AppComponent]`
`})`
export class AppModule { }
app.component.html file
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
I see you are missing app-routing.module.ts inside the imports of AppModule
#NgModule({
imports: [
CommonModule,
routingModule
],
})
export class AppModule{ }
I noticed that in your app.module.ts file you have back ticks ``` in inappropriate places somewhere around providers & bootstrap array. I copied & pasted this from your own code so you can see it better:
...MatListModule,
AppRoutingModule,
RouterModule
],`
`providers: [
DishService
],`
`bootstrap: [AppComponent]`
`})`
export class AppModule { }
Do this:
Remove all the back ticks in the app.module.ts file like I have done below and restart your terminal. This should solve any problems you are having.
...MatListModule,
AppRoutingModule,
RouterModule
],
providers: [
DishService
],
bootstrap: [AppComponent]
})
export class AppModule { }
I copied and pasted your code and worked on the files you provided information about. With the back ticks removed, your code works fine here on my laptop. Here's the result in the gif below, route works properly & no errors in the console. Example with just home & menu components.
Final result:
I removed all other things that didn't relate to routing from your code so that it would be easier to detect errors. Here's my folder structure.
Folder structure:
And here are the contents of my files:
route.ts file:
import { Routes } from '#angular/router';
import { MenuComponent } from './menu/menu.component';
import { HomeComponent } from './menu/home.component';
export const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'menu', component: MenuComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
app.module.ts file:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { HomeComponent } from './menu/home.component';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '#angular/router';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
MenuComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts file:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
template: `
<router-outlet></router-outlet>
`
})
export class AppComponent {
}
app-routing.module.ts:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes } from '#angular/router';
import { routes } from './routes';
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [ RouterModule ],
declarations: []
})
export class AppRoutingModule { }
menu.component.ts:
import { Component } from '#angular/core';
#Component({
template: '<h1>Menu Component</h1>'
})
export class MenuComponent {
}
home.component.ts:
import { Component } from '#angular/core';
#Component({
template: '<h1>Home Component</h1>'
})
export class HomeComponent {
}
Like I said, once I removed those unnecessary back ticks from the app.module.ts, your code worked fined with no errors.
I have started everything from scratch.Then my issue was fixed.I don't exactly know where is my problem.But,probably I have made routes file in separate folder.Making routes file in app-routing folder, fixed my issue.
I'm beginner in Angular 9. I'm following an online video tutorial to excercise on angular, but my code (same of the tutorial) had a problem and I don't know of to figure out.
Actually, tutorial put routing stuffs all inside app.module.ts, but I use app-routing.module.ts to separate concerns.
When I launch 'ng serve --open', page still blank with the following error:
core.js:6185 ERROR NullInjectorError: R3InjectorError(AppModule)[ActivatedRoute -> ActivatedRoute -> ActivatedRoute]:
NullInjectorError: No provider for ActivatedRoute!
at NullInjector.get (http://localhost:4200/vendor.js:16926:27)
at R3Injector.get (http://localhost:4200/vendor.js:30642:33)
at R3Injector.get (http://localhost:4200/vendor.js:30642:33)
at R3Injector.get (http://localhost:4200/vendor.js:30642:33)
at NgModuleRef$1.get (http://localhost:4200/vendor.js:47971:33)
at Object.get (http://localhost:4200/vendor.js:45804:35)
at getOrCreateInjectable (http://localhost:4200/vendor.js:20704:39)
at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:34541:12)
at NodeInjectorFactory.BookComponent_Factory [as factory] (http://localhost:4200/main.js:733:153)
at getNodeInjectable (http://localhost:4200/vendor.js:20849:44)
Actually I had this problem since I use providers. Is it hard to understand, because of console doesn't give any class line code. However I'm trying to describe here useful classes that should use it by following, if more classes needs, I will do that:
--app.module.ts--
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BookComponent } from './components/book/book.component';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { BooklistComponent } from './components/booklist/booklist.component';
import { BookEditComponent } from './components/book-edit/book-edit.component';
import { TreeComponent } from './components/tree/tree.component';
import { NgInitDirective } from './directive/ng-init/ng-init.directive';
// for angular firebase #https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md
import { AngularFireModule } from '#angular/fire';
import { AngularFirestore } from '#angular/fire/firestore';
import { environment } from '../environments/environment';
// import our service (that uses firebase)
import { CartService } from './services/cart/cart.service'
import { HttpModule } from '#angular/http';
#NgModule({
declarations: [
AppComponent,
BookComponent,
BooklistComponent,
BookEditComponent,
TreeComponent,
NgInitDirective
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
AngularFireModule.initializeApp(environment.firebase), // have a look in firebase.ts
AngularFireModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
--app-routing.module.ts--
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { BookComponent } from './components/book/book.component';
import { BookEditComponent } from './components/book-edit/book-edit.component';
import { BooklistComponent } from './components/booklist/booklist.component';
const routes: Routes = [
{ path: 'books/:title', component: BookComponent},
{ path: 'books/:title/edit', component: BookEditComponent},
{ path: 'books', component: BooklistComponent},
{
path: '',
redirectTo: 'books/',
pathMatch: 'full'
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
--book.component.ts--
import { Component, OnInit, Input, Output, EventEmitter } from '#angular/core';
import { BookModel } from '../../models/book/book.model';
import { CurrencyPipe } from '#angular/common';
import { ActivatedRoute } from '#Angular/router'
import { CartService } from '../../services/cart/cart.service';
#Component({
selector: 'book',
templateUrl: './book.component.html',
styleUrls: ['./book.component.css']
})
export class BookComponent implements OnInit {
#Input() book: BookModel;
#Output() addToCart: EventEmitter<BookModel> = new EventEmitter();
constructor(private route: ActivatedRoute, private cs: CartService) {
route.params.subscribe(res => {
this.book = BookModel.find(res['title']);
});
}
ngOnInit(): void {
}
sendToCart() {
this.addToCart.emit(this.book);
// the following method is added in cart.service.ts
this.cs.add(this.book);
}
// methods
votesCounter() {
return this.book.upvotes;
}
upvote() {
return this.book.upvotes++;
}
}
As I use app-routing.module.ts, there is a quite difference in app.module of tutorial (that puts also routing stuffs inside it):
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestore } from 'angularfire2/firestore';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
import { BookComponent } from './components/book/book.component';
import { BookListComponent } from './components/book-list/book-list.component';
import { BookEditComponent } from './components/book-edit/book-edit.component';
import { TreeComponent } from './components/tree/tree.component';
import { NgInitDirective } from './directive/ng-init/ng-init.directive';
import { CartService } from './services/cart/cart.service';
const bookRoutes: Routes = [
{ path: 'books/:title', component: BookComponent },
{ path: 'books/:title/edit', component: BookEditComponent },
{ path: 'books', component: BookListComponent },
{
path: '',
redirectTo: 'books/',
pathMatch: 'full'
}
]
#NgModule({
declarations: [
AppComponent,
BookComponent,
BookListComponent,
BookEditComponent,
TreeComponent,
NgInitDirective
],
imports: [
RouterModule.forRoot(bookRoutes),
BrowserModule,
FormsModule,
ReactiveFormsModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I tryed with solutions given from similar questions, but it doesn't work.
You have a typing error,
change #Angular/router with #angular/router in book.component.ts
I have a Simple Angular 2 App with a Module(InformationPagesModule module) that contains two lazy load components (Info1 Component and Info2 Component). I want to load that components when entering the following routes in the browser:
http://localhost:4200/info1 - Loads the Info1Component
http://localhost:4200/info2 - Loads the Info2Component
here the interest classes:
app.component.html
<router-outlet></router-outlet>
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { InformationPagesModule } from './information-pages/information-pages.module';
#NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
SharedModule,
InformationPagesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule, Router } from '#angular/router';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{path:'', component: HomeComponent},
{path:'info1', loadChildren: './information-pages/information-pages.module#InformationPagesModule'},
{pathMatch:'full', path:'info2', loadChildren: './information-pages/information-pages.module#InformationPagesModule'},
{ path: '**', redirectTo: '' }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
information-pages.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { InformationPagesRoutingModule } from './information-pages-routing.module';
import { Info1Component } from './info1/info1.component';
import { Info2Component } from './info2/info2.component';
#NgModule({
imports: [
CommonModule,
InformationPagesRoutingModule
],
declarations: [Info1Component, Info2Component]
})
export class InformationPagesModule { }
information-pages-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { Info1Component } from './info1/info1.component';
import { Info2Component } from './info2/info2.component';
const routes: Routes = [
{path:'info1', component: Info1Component},
{path:'info2', component: Info2Component}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class InformationPagesRoutingModule { }
My question is, why when entering some of the routes / info1 or / info2, a blank page is displayed?
How should I configure the routes in my application so that it works?
Many Thanks!
In your app-routing.module.ts you want to declare one parent route to all routes of one lazy loaded module. That means you might want to map all routes starting with /info to your information-pages-routing.module.ts. The routes to your components (info1 and info2) you'll declare inside the lazy loaded module.
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule, Router } from '#angular/router';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path:'', component: HomeComponent },
{ path: 'info', loadChildren: './information-pages/information-pages.module#InformationPagesModule' },
{ path: '**', redirectTo: '' }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
The file information-pages-routing.module.ts stays the same
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { Info1Component } from './info1/info1.component';
import { Info2Component } from './info2/info2.component';
const routes: Routes = [
{path:'info1', component: Info1Component},
{path:'info2', component: Info2Component}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class InformationPagesRoutingModule { }
You'll now be able to access the Info1Component by the route /info/info1 and the Info2Component by the route /info/info2. If you wish to access your compoents by the routes /info1 and /info2 you can either create two lazy loaded modules or just redirect /info1 to /info/info1
You might also consider loading child modules like this:
{ path: 'info', loadChildren: () => import('./information-pages/information-pages.module').then(m => m.InformationPageModule) }
Rather than
{ path: 'info', loadChildren: './information-pages/information-pages.module#InformationPagesModule' }
For more information please refer to the official documentation https://angular.io/guide/lazy-loading-ngmodules
Use this way instead of using module level routing, use AppRoutingModule for routing your components.
import { NgModule } from '#angular/core';
import { Routes, RouterModule, Router } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { Info1Component } from './info1/info1.component';
import { Info2Component } from './info2/info2.component';
const routes: Routes = [
{path:'', component: HomeComponent},
{path:'info1', component: Info1Component},
{path:'info2', component: Info2Component},
{ path: '**', redirectTo: '' }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
If you use this information-pages-routing.module.ts is not required any more.
I have a problem and I don't know what I'm not seeing.
I have equis Modules
ComponentsHomeModule, a file where I have a component that I would like to share
import { NgModule } from '#angular/core';
import { ElementComponent } from './element/element.component';
import { CommonModule } from '#angular/common';
#NgModule({
imports: [CommonModule],
declarations: [ElementComponent],
exports: [ElementComponent],
})
export class ComponentsHomeModule {}
In this case, the component is ElementComponent, that's the component I want to share.
Then I have my ElementsModule where I want to use the ElementComponent
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ElementsRoutingModule } from './elements-routing.module';
import { ElementsComponent } from './elements.component';
import { ComponentsHomeModule } from '../../components/components-home.module';
#NgModule({
imports: [CommonModule, ComponentsHomeModule, ElementsRoutingModule],
declarations: [ElementsComponent],
})
export class ElementsModule {}
an then inside the ElementsComponent I'm trying to render the ElementComponent but when I make in my html
ElementsComponent html:
<app-element></app-element>
In the console I see the error of
ERROR in src/app/home/pages/elements/elements.component.html:15:7 - error TS8001: 'app-element' is not a known element:
1. If 'app-element' is an Angular component, then verify that it is part of this module
I don't know where is the error because if I have my component imported and exported into the ComponentsHomeModule and then I'm importing that module all should work.
By the way I tried with import the ComponentsHomeModule into the App.Module and nothing and the Module where I'm using the ComponentsHomeModule is used in a lazy load:
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home.component';
import { ElementsRoutingModule } from './pages/elements/elements-routing.module';
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{
path: '',
redirectTo: 'elements',
},
{
path: 'elements',
loadChildren: () => ElementsRoutingModule,
}
],
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class HomeRoutingModule {}
SOLVED::
The problem was in the importing of the lazy loading.
I was importing the RoutingMoudule instead of only the module
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home.component';
import { ElementsModule } from './pages/elements/elements.module';
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{
path: '',
redirectTo: 'elements',
},
{
path: 'elements',
loadChildren: () => ElementsModule,
}
],
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class HomeRoutingModule {}
Your ElementsComponent is part of ElementsModule, so if you want to use ElementsComponent in ComponentsHomeModule then you need to exports ElementsComponent form ElementsModule, not from ComponentsHomeModule.
Hey I've just tried to set up lazy loading of modules in my application but I'm getting this error I was following a tutorial but obviously they didnt get the same errors
my set up is as follows
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule, Routes, ActivatedRoute, ParamMap } from '#angular/router';
import { HttpClientModule } from '#angular/common/http';
import { environment } from '../environments/environment';
import { ServiceWorkerModule } from '#angular/service-worker';
import { OurWorkModule } from './our-work/our-work.module';
import { ourWorkRouting } from './our-work/our-work-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { FooterComponent } from './shared/footer/footer.component';
import { WhatWeDoComponent } from './what-we-do/what-we-do.component';
import { HeaderComponent } from './shared/header/header.component';
import { OurProcessComponent } from './our-process/our-process.component';
import { OurTechnologyComponent } from './our-technology/our-technology.component';
import { GetInTouchComponent } from './get-in-touch/get-in-touch.component';
export const ROUTES: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'what-we-do', component: WhatWeDoComponent},
{ path: 'our-work', loadChildren: 'app/our-work/our-work.module#OurWorkModule' },
{ path: 'our-technology', component: OurTechnologyComponent},
{ path: 'get-in-touch', component: GetInTouchComponent },
{ path: '**', redirectTo: ''}
];
#NgModule({
declarations: [
AppComponent,
HomeComponent,
FooterComponent,
WhatWeDoComponent,
HeaderComponent,
OurProcessComponent,
OurTechnologyComponent,
GetInTouchComponent,
HeaderHomeComponent,
],
imports: [
BrowserModule,
LazyLoadImageModule,
RouterModule.forRoot(ROUTES),
FormsModule,
HttpModule,
HttpClientModule,
ourWorkRouting,
OurWorkModule,
environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : [],
],
providers: [EmailService],
bootstrap: [AppComponent]
})
export class AppModule { }
our-work-module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes, ActivatedRoute, ParamMap } from '#angular/router';
import { OurWorkComponent } from './our-work.component';
#NgModule({
imports: [
CommonModule,
RouterModule
],
declarations: [
OurWorkComponent,
]
})
export class OurWorkModule {}
our-work-routing.module.ts
import { Routes, RouterModule } from '#angular/router';
import { OurWorkComponent } from './our-work.component';
const ourWorkRoutes: Routes = [
{ path: '', component: OurWorkComponent }
];
export const ourWorkRouting = RouterModule.forChild(ourWorkRoutes);
this is the first time Ive tried to lazyload a module or set up a feature module so any help would be appreciated!
Thanks
Here's how my lazy loaded module looks, hope it helps you
import { NgModule, ApplicationRef, APP_BOOTSTRAP_LISTENER, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { APP_BASE_HREF, CommonModule } from '#angular/common';
import { Http, HttpModule } from "#angular/http";
import { RouterModule } from '#angular/router';
import { FormsModule } from '#angular/forms';
import { OurWorkComponent } from './our-work.component';
#NgModule({
declarations: [
OurWorkComponent
],
imports: [
CommonModule,
FormsModule,
HttpModule,
RouterModule.forChild([
{ path: '', component: OurWorkComponent }
])
],
providers : [
//add services and other providers
],
schemas: [ NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA ]
})
export class FeaturedModule { }
I think you didn't add you ourWorkRouting in your our-work-module.ts