I am using angular, and I have this two script here inside index.html, theses scripts are used in the navbar component ( this navebar is inside "shared module" ,
in app.module :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
//modules
import { SharedModule } from './shared/shared.module';
#NgModule({
declarations: \[
AppComponent
\],
imports: \[
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
SharedModule,
\],
providers: \[\],
bootstrap: \[AppComponent\]
})
export class AppModule { }
in app.routing.module
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { FeaturesComponent } from './features/features.component';
const routes: Routes = \[
{
path: 'feature',
component: FeaturesComponent,
loadChildren: () =\> import('./features/features.module').then(m =\> m.FeaturesModule) },
\];
#NgModule({
imports: \[RouterModule.forRoot(routes)\],
exports: \[RouterModule\]
})
export class AppRoutingModule { }
in features module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FeaturesRoutingModule } from './features-routing.module';
import { FeaturesComponent } from './features.component';
mport { SharedModule } from '../shared/shared.module';
//component
import { DashboardComponent } from './dashboard/dashboard.component';
#NgModule({
declarations: \[
FeaturesComponent,
DashboardComponent
\],
imports: \[
CommonModule,
FeaturesRoutingModule,
SharedModule
\]
})
export class FeaturesModule { }
so when i use <app-navbar></app-navbar> in app.component.html everything works fine
bu when i use <app-navbar></app-navbar> in features.component.html the script used in the navbar is not working like i can see the navbar and all but the script declared in the index is not working
I want the <app-navbar> in my features module
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 {}
Error
compiler.js:215 Uncaught Error: Template parse errors:
Can't bind to 'ngbCollapse' since it isn't a known property of 'div'. ("][ngbCollapse]="isHidden">
I have a NavbarComponent and a FooterComponent that I want to move into the SharedModule, to keep the root app.module cleaner.
app.module
import { AdminComponent } from './admin/admin.component';
// import { NavbarComponent } from './navbar/navbar.component';
// import { FooterComponent } from './footer/footer.component';
// Modules
import { DashboardModule } from './dashboard/dashboard.module';
import { HomeModule } from './home/home.module';
#NgModule({
declarations: [
AppComponent,
LoginComponent,
RegisterComponent,
PasswordResetComponent,
ResetPasswordComponent,
AdminComponent,
// NavbarComponent,
// FooterComponent,
share.module
However, once I moved those components into here, and update their paths correctly ./ -> ../ the app breaks.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { NavbarComponent } from '../navbar/navbar.component';
import { FooterComponent } from '../footer/footer.component';
import { TermsComponent } from './terms.component';
import { PageNotFoundComponent } from './not-found.component';
import { PrivacyPolicyComponent } from './privacy-policy.component';
#NgModule({
imports: [
CommonModule
],
declarations: [
NavbarComponent,
FooterComponent,
TermsComponent,
PageNotFoundComponent,
PrivacyPolicyComponent
]
})
export class SharedModule { }
navbar.component.ts
import { Component, OnInit } from '#angular/core';
import { AuthService } from '../auth.service';
import { environment } from '../../environments/environment';
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
isHidden = true;
oauthUrl = this.authService.generateOauthUrl();
constructor(public authService: AuthService) { }
ngOnInit() {
}
logout() {
sessionStorage.clear();
}
}
Then a couple of lines with the [ngbCollapse] in navbar.component.html
<div *ngIf="!authService.isLoggedIn()" class="collapse navbar-collapse" id="navbarSupportedContent" [ngbCollapse]="isHidden">
I think this has something to do with the relative paths, any ideas?
To use ng-bootstrap components and directives in Angular templates, you need to import the NgbModule. In your case, you should import it in the SharedModule. Also, in order to use the shared components in other parts of the application, you should export them from the SharedModule and import the SharedModule in the modules when the components are to be used.
shared.module.ts
...
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
imports: [
CommonModule,
NgbModule
],
declarations: [
NavbarComponent,
FooterComponent,
TermsComponent,
PageNotFoundComponent,
PrivacyPolicyComponent
],
exports: [
NavbarComponent,
FooterComponent,
TermsComponent,
PageNotFoundComponent,
PrivacyPolicyComponent
]
})
export class SharedModule { }
app.module.ts
import { SharedModule } from './shared/shared.module';
...
#NgModule({
imports: [
SharedModule,
...
],
...
})
Note: if you want to use ng-bootstrap components and directives in templates outside of the SharedModule, you should add NgbModule to the exports of the SharedModule.
To work with ng-bootsrap you should add this dependency first :
ng add #ng-bootstrap/ng-bootstrap
source: https://ng-bootstrap.github.io/#/home
then imporst the module as follows :
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
imports: [
CommonModule,
NgbModule
],
...
I want to use Owl Carousel slider in my Angular page. I have installed Owl Carousel and imported all needed code. However, I get this error when I run the file:
Unexpected value 'undefined' imported by the module 'AppModule' angular js 6
Can anyone kindly find the error for me?
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { HeaderComponent } from './header/header.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';
import { AppRoutingModule } from './app-routing.module';
import {OwlCarousel} from 'angular-owl-carousel2';
import { SlickModule } from 'ngx-slick';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
HeaderComponent,
NavbarComponent,
FooterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
OwlCarousel,
SlickModule.forRoot()
//RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
In angular 1.4 i was using ng6 boilerplate and it was generating an awesome structure, like:
app
common
components
services
etc...
Now i'm trying to learn angular2 with typescript. I'm using Angular CLI.
And i wanna port some of structure from angular 1.4: i mean to separate, for example, select-component from customer-component etc.
And i created such structure:
components - is a module, customer is a module, list - is a component.
How in my app.component.html i can use list-component? Like:
<app-customer-list></app-customer-list>
I have troubles with importing modules & components.
I do it in a such way:
**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 { AppComponent } from './app.component';
import { ComponentsModule } from './components/components.module';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ComponentsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
--
**components.module.ts**
import { NgModule } from '#angular/core';
import { CustomerModule } from './customer/customer.module';
#NgModule({
imports: [
CustomerModule
],
declarations: []
})
export class ComponentsModule { }
--
**customer.module.ts**
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CustomerComponent } from './customer.component';
import { ListComponent } from './list/list.component';
#NgModule({
imports: [
CommonModule
]
declarations: [CustomerComponent, ListComponent]
})
export class CustomerModule { }
--
**list.component.ts**
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-customer-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
What i do wrong? How can i correctly import them?
You are forgetting to export your components/modules in those modules that you are sharing with other modules:
**customer.module.ts**
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CustomerComponent } from './customer.component';
import { ListComponent } from './list/list.component';
#NgModule({
imports: [
CommonModule
]
declarations: [CustomerComponent, ListComponent],
exports: [CustomerComponent, ListComponent]
})
export class CustomerModule { }
**components.module.ts**
import { NgModule } from '#angular/core';
import { CustomerModule } from './customer/customer.module';
#NgModule({
imports: [
CustomerModule
],
exports: [CustomerModule]
declarations: []
})