I try to use Lazyload routes but nested. But i still get the error that it do not find the module in the 2 level route.
Here is my construct:
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 { routing } from './app.routes';
import { AppComponent } from './app.component';
import { RouterModule } from '#angular/router';
#NgModule({
declarations: [
AppComponent,
AuthComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing
],
exports: [RouterModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routes.ts
import { Router, RouterModule} from '#angular/router';
import { AuthGuard } from './Auth/Services/auth-guard.service';
import { AuthComponent } from './Auth/auth.component';
export const routing = RouterModule.forRoot([
{ path: '', redirectTo: "portal", pathMatch: 'full'},
{ path: 'portal', loadChildren: './Portal/portal.module#PortalModule'},
{ path: '**', redirectTo: "portal"}
])
Portal/portal.module.ts:
import { NgModule } from '#angular/core';
import { routing } from './portal.routes';
import { PortalComponent } from './portal.component';
import { FormsModule,ReactiveFormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { CommonModule } from '#angular/common';
#NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
routing
],
exports: [ RouterModule ],
declarations: [
PortalComponent
],
providers: [
]
})
export class PortalModule { }
Portal/portal.routes.ts:
import { Router, RouterModule} from '#angular/router';
import { PortalComponent } from './portal.component';
export const routing = RouterModule.forChild([
{ path: '', redirectTo: "reports"},
// This Part doesn't work
{ path: 'reports', component: PortalComponent, loadChildren: './Portal/Test/test.module#TestModule'},
// --
{ path: '**',component: PortalComponent, pathMatch: 'full'}
])
Portal/Test/test.module.ts:
import { NgModule } from '#angular/core';
import { routing } from './test.routes';
import { TestComponent } from './test.component';
import { FormsModule,ReactiveFormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { CommonModule } from '#angular/common';
#NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
routing
],
exports: [ RouterModule ],
declarations: [
TestComponent
],
providers: [
]
})
export class TestModule { }
Portal/Test/test.routes:
import { Router, RouterModule} from '#angular/router';
import { TestComponent } from './test.component';
export const routing = RouterModule.forChild([
{ path: '', redirectTo: "reports"},
{ path: 'reports', component: TestComponent},
])
My error:
EXCEPTION: Uncaught (in promise): Error: Cannot find module './Portal/Test/test.module'.
Error: Cannot find module './Portal/Test/test.module'.
My Question is now why he do not find the Module ?
I tried also other Paths but this i the only one which can really work i think.
What i need to do to fix or is angular 2 not able to do this ?
(The error is just testet with ng serve not with build | Testet with Chrome)
Not sure if this could help but the way I do modules is to name every module file index.ts and just specify the path to the folder when referencing them. I have never had any issues with modules not being found. Have a look at https://github.com/AngularClass/angular2-webpack-starter/tree/master/src/app for an example in how to load async modules.
This issue was on the old #angular/router i updated now to the 3.2.0 befor i had 3.1.0
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 have an angular application with a login component
this component is under app/main/login
I want to go to it from app.component.html via the button
Here is my app-routing.module code
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { LoginComponent } from './main/login/login.component';
const routes: Routes = [
{ path: 'main', children: [{ path: 'login', component: LoginComponent }] },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
Here is how I try to use route <button mat-raised-button class="btn-default" [routerLink]="['/main/login']">Log in</button>
Here is app.module.ts code
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {MatButtonModule} from '#angular/material/button';
import {MainModule} from './main/main.module'
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MatButtonModule,
MainModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
and here is main.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { LoginComponent } from './login/login.component';
#NgModule({
declarations: [LoginComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [],
})
export class MainModule {}
When I click the button, the URL changing to http://localhost:4200/main/login but the view not changed.
How I can fix this?
Looking at your code it seems that you are trying to load component using lazy-loading technique.
So in AppRoutingComponent.ts file, instead of what your code replace it with :
const routes: Routes = [
{ path: 'main', loadChildren: '(path to main module)/main.module#MainModule' },
];
In layman terms this just tells the parent routing module to load the main.module when main path is encountered
Now In Main.module, configure child routes as:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { LoginComponent } from './login/login.component';
const routes: Routes = [
{ path: 'login', component: LoginComponent }
];
#NgModule({
declarations: [LoginComponent],
imports: [
BrowserModule,
RouterModule.forChild(routes) // Register routes for child module via forChild function instead of for Root
],
providers: [],
bootstrap: [],
})
export class MainModule {}
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 maked my angular-app. All good works. But for deploy to server I getting error:
Uncaught (in promise): Error: Cannot match any routes. URL Segment:
'myUrl/app.aspx'
After build prod my app doesn't work either (I set base href and all files load, but I getting warning Unhandled Navigation Error).
I make difficult routing for my app.
I using submodules for routing. And I think the problem related with APP_BASE_HREF or wrong routing for my app/submodules.
My example:
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule } from "#angular/common/http";
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { NbThemeModule, NbLayoutModule, NbSidebarModule, NbButtonModule, NbTabsetModule, NbCardModule } from '#nebular/theme';
import { NbEvaIconsModule } from '#nebular/eva-icons';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '#angular/router';
import { MainModule } from './components/main/main.module';
import { AddModule } from './components/add/add.module';
import { APP_BASE_HREF } from '#angular/common';
#NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
NbThemeModule.forRoot({ name: 'default' }),
NbLayoutModule,
NbEvaIconsModule,
NbSidebarModule.forRoot(),
NbButtonModule,
NbTabsetModule,
NbCardModule,
AppRoutingModule,
MainModule,
AddModule,
HttpClientModule,
],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
bootstrap: [AppComponent]
})
export class AppModule { }
I don't have providers: [{ provide: APP_BASE_HREF, useValue: '/' }] and all good works. But for deploy I geted error message:
Please provide a value for the APP_BASE_HREF token or add a base
element to the document.
I add APP_BASE_HREF and error disappeared.
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{
path: '',
loadChildren: './components/main/main.module#MainModule'
},
{
path: 'event',
loadChildren: './components/event/event.module#EventModule'
},
{
path: 'add',
loadChildren: './components/add/add.module#AddModule'
},
{
path: 'archive',
loadChildren: './components/archive/archive.module#ArchiveModule'
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
main-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { ViewEventsComponent } from './view-events/view-events.component';
const routes: Routes = [
{
path: '',
component: ViewEventsComponent,
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MainRoutingModule { }
event-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { EventPageComponent } from './event-page/event-page.component';
const routes: Routes = [
{
path: ':id',
component: EventPageComponent,
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class EventRoutingModule { }
And I noticed:
after build app - generated files of module: archive and event, but don't generated file for main-module.
I solved this problem with fixed in app-routing.module.ts. A added { useHash: true }:
#NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule],
})
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