This question already asked but it doesn't work for me, am new in Angular 9.
I have admin and catelog folders in my Angular 9 project. For admin folder I try to load all admin-components, and catelog folder I try to load catelog-components.
CSS, js and images not loading in catelog check below image
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AuthGuard } from './admin/helper/auth.guard';
import { LoginComponent } from './admin/pages/login/login.component';
const adminModule = () => import('./admin/pages/pages.module').then(x => x.PagesModule);
const catelogPageModule = () => import('./catelog/pages/catelog.module').then(x => x.CatelogModule);
const routes: Routes = [
// catalog url
{ path: '', loadChildren:catelogPageModule },
//admin url
{ path: 'login', component: LoginComponent },
{ path: 'admin', loadChildren:adminModule, canActivate: [AuthGuard] },
// otherwise redirect to home
// { path: '**', redirectTo: 'home' }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
catelog.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { CatelogRoutingModule } from './catelog-routing.module';
import { HomeComponent } from './home/home.component';
import { CommonComponent } from './common/common.component';
import { AboutUsComponent } from './about-us/about-us.component';
#NgModule({
declarations: [
CommonComponent,
HomeComponent,
AboutUsComponent,
],
imports: [
CommonModule,
ReactiveFormsModule,
CatelogRoutingModule,
FormsModule
]
})
export class CatelogModule { }
catelog-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AboutUsComponent } from './about-us/about-us.component';
import { CommonComponent } from './common/common.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{
path: '', component:CommonComponent,
children:[
{ path: 'home', component: HomeComponent },
{ path: 'about-us', component: AboutUsComponent },
]
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CatelogRoutingModule { }
app\catelog\pages\common\common.component.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Title</title>
<!-- CSS here -->
<link href="/assets/catelog/assets/css/bootstrap.min.css">
</head>
<body>
<!-- header-area -->
<header>
<!-- menu-area -->
</header>
<!-- header-area-end -->
<!-- Main content -->
<router-outlet></router-outlet>
<!-- Main content -->
<!-- footer-area -->
<footer class="dark-bg pt-55 pb-80">
copyrights
</footer>
<!-- footer-area-end -->
<!-- JS here -->
<script src="/assets/catelog/assets/js/vendor/jquery-3.5.0.min.js"></script>
<script src="/assets/catelog/assets/js/main.js"></script>
</body>
</html>
My folder structure:
Admin folder CSS, js and images working properly, but catelog folder CSS, js and images not loading.
Please help me to short out this issue.
You shouldn't be putting whole <html><body>...</body> inside your component template. The common.component.html should look like:
<header>someHeader</header>
<router-outlet></router-outlet>
<footer>some data</footer>
So without <html>, <body>, <srcipts> etc.
If you need to load bootstrap.css - you can do it in global styles.scss file, and for loading js files you can use angular.json ( there is a place to place additional js over there )
You should follow what Panda already suggested but I will modify little bit the answer based on the css issue you are facing
Structure your project routes as per following
Main page
<html>
<body>
<header-comp/>
<app-comp></app-comp>
<footer-comp/>
</body>
</body>
At app component html
<router-outlet/>
At app component module
Add app component, add routes to two lazy loading modules home and admin plus extra route entry that redirects default route to home module
Now since home and admin are two modules each will have its own home page , that home page is is the default entry of the home/admin routing module with sub children routes to other module pages and its html looks like that
<router-outlet></router-outlet>
In the module home page component definition add the desired boatstrap css version
#component({
selector:'home-app-comp',
html:'<router-outlet/>',
styleUrl:[path to css file]
})
The whole idea is based on having some sort of nested routes where each module main page loads desired bootstrap version and acts as a parent container for the rest of the module pages
Related
My simple Angular Single Page application has two components. I have defined a route for each of these components. If I click on a link, corresponding component should be displayed in the view.
Router
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { CompAComponent } from './comp-a/comp-a.component';
import { CompBComponent } from './comp-b/comp-b.component';
const routes: Routes = [
{
path: 'componentA', component: CompAComponent
},{
path: 'componentB', component: CompBComponent
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
HTML
<div class="main-container">
<div class="nav-container">
<ul>
<li>componentA</li>
<li>componentB</li>
</ul>
</div>
<div class="component-container">
<router-outlet></router-outlet>
</div>
</div>
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 { CompAComponent } from './comp-a/comp-a.component';
import { CompBComponent } from './comp-b/comp-b.component';
#NgModule({
declarations: [
AppComponent,
CompAComponent,
CompBComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
This application is working but every time I click on a link, it is fetching all the JS files from the server. Shouldn't a single page application get all the required files from server during initial loading?
I added 'testApp' in the href since this application has a context path of 'textApp' in the head of index.html file like <base href="/testApp">
Angular needs to do some stuff behind the scenes to tell the browser how to handle links within the SPA. So you should use the attribute routerLink on your links instead of href so Angular knows which links are SPA-links.
<div class="main-container">
<div class="nav-container">
<ul>
<li><a routerLink="/componentA">componentA</a></li>
<li><a routerLink="/componentB">componentB</a></li>
</ul>
</div>
<div class="component-container">
<router-outlet></router-outlet>
</div>
</div>
More info: https://angular.io/guide/router-tutorial#control-navigation-with-ui-elements
I have two pages, home and player, and i want on the home page to nabvigate to the player page but without being with this format home/player
When i use routerLink="player", it got an error because the link goes to home/player, instead of just player. How can i make that happen?
app-routing module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import {AddPlayerComponent} from './pages/add-player/add-player.component';
import {RouterModule, Routes} from '#angular/router';
import {HomeComponent} from './pages/home/home.component';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'Player', component: AddPlayerComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
Try routerLink = "/Player. Notice how in your defined routing module the "Player" is capitalized, as well as the missing "/" in routerLink. See https://angular.io/api/router/RouterLink for more clarification
Try Adding <base href="/"> code in head of index.html page and correct the code to routerLink="/Player".
I've been at this problem for a few hours now. I have tried literally everything but I can't get it to work.
The next error keeps coming up:
zone.js:522 Unhandled Promise rejection: Template parse errors:
'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.
Here are my files, which I have reduced to the basic needs for routing:
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TafelComponent } from '../tafel/tafel.component';
import { MuurtafelComponent } from '../muurtafel/muurtafel.component';
const routes: Routes = [
{ path: 'tafel', component: TafelComponent },
{ path: 'muurtafel', component: MuurtafelComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
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 { TafelComponent } from './tafel/tafel.component';
import { MuurtafelComponent } from './muurtafel/muurtafel.component';
import { AppRoutingModule } from './app-routing/app-routing.module';
#NgModule({
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpModule
],
exports: [AppRoutingModule],
declarations: [
AppComponent,
TafelComponent,
MuurtafelComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<router-outlet></router-outlet>
<h1>
{{title}}
</h1>
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Industial Furniture</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<base href="/">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
Can someone help me with this? Could it be anything outside of the code? (Or is it that I'm overseeing something here?)
In your app.module.ts
#NgModule({
...,
imports: [
AppRoutingModule
],
exports: [AppRoutingModule], // Remove this line
...
})
You don't need to export here !
I didn't deeply delve into your code, but I got the same error after rename package + component name. I also checked all my code, but found nothing, I just tried stop CLI and restart. All compiled good and started working. Maybe this will help.
In your app.module.ts remove
exports: [AppRoutingModule],
Also kill the server then run ng serve again
Another note that I saw you use
HttpModule
instead
HttpClientModule
New version of angular already use HttpClientModule so try to use lastest version if you can
I am trying to create a static website using angular 5,i am using owl carousel as image slider.I have implemented routing, after clicking on home menu slider not showing, only showing when page are loading for first time.
Below is my code
navigation.component.html
<div class="mainmenu text-center floatleft">
<nav>
<ul>
<li><a routerLink="/home" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active">Home</a>
</li>
<li><a routerLink="/about" routerLinkActive="active">about</a></li>
<li>
<a routerLink="/contact" routerLinkActive="active">contact</a>
</li>
</ul>
</nav>
</div>
below is my
app-routing.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common'
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { NavigationComponent } from './navigation/navigation.component';
import { HomesliderComponent } from './homeslider/homeslider.component';
import { FooterComponent } from './footer/footer.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
// { path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
// { path: '**', redirectTo: '/home', pathMatch: 'full' }
];
#NgModule({
imports: [CommonModule, RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [HomeComponent, AboutComponent, ContactComponent, NavigationComponent, HomesliderComponent, FooterComponent];
Apart from this i have included owl-caurousel code on home-component.html page,i haven't used owl-caurousel npm
included all supporting css and js files in angular-cli.json
"styles": [
"styles.css",
"assets/owl-carousel/owl.carousel.css",
"assets/owl-carousel/owl.theme.css",
"assets/owl-carousel/owl.transitions.css",
"assets/template/tabcontent.css",
"assets/threeDslider/css/threeDstyles.css"
],
"scripts": [
"assets/owl-carousel/owl.carousel.js",
"assets/owl-carousel/slider.js",
"assets/threeDslider/js/modernizr.custom.53451.js"
],
Please suggest me any solution, any tutorial on creating a static website using angular 5 or some thing like this also will be helpful
already googled and finally posting here
Any help appreciated
Thanks
I have a project with file structure
app/
(all the files that get automatically built)
app-routing.module.ts
components/
layout/
top/
side/
banner/
pages/
home/
prehistory/
prehuman/
australopithecine/
homininia/
earlyHuman/
outOfAfrica/
agriculture/
ancient/
(several directories like in prehistory)
post-classical/
(several directories like in prehistory)
Each directory under pages/ was built in the CLI with ng g c ___ so that it has all the usual files. I'm trying to build the router so that it reflects the directory structure with child routers, so I have in app-routing.module.ts the following code. Note that since I'm at the early stages I haven't fully written out all the children and their sub-children, I just wanted to get a small part of it built and tested before building out the rest.
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './components/pages/home/home.component';
import { PrehistoryComponent } from './components/pages/prehistory/prehistory.component';
export const routes: Routes = [
{path:'', children: [
{path:'prehistory', component:PrehistoryComponent},
{path:'', component:HomeComponent},
]}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
In my AppComponent I used header and other tags to control CSS styles, but the important part is that there's a portion of the screen reserved for the header, for the side, and then the content which is the part that changes based on the address.
app.component.html
<header>
<app-top></app-top>
</header>
<aside>
<app-side></app-side>
</aside>
<content>
<router-outlet></router-outlet>
</content>
And the links are in the TopComponent.
top.component.html
<div><app-banner></app-banner></div>
<div id="breadcrumb">
<nav>
<a [routerLink]="['']" routerLinkActive="active">Home</a>
<a (mouseover)="onHover()" [routerLink]="['prehistory']" routerLinkActive="active">Prehistory</a>
</nav>
</div>
top.component.ts
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
#Component({
selector: 'app-top',
templateUrl: './top.component.html',
styleUrls: ['./top.component.css'],
})
export class TopComponent implements OnInit {
constructor(private route: ActivatedRoute) {
}
onHover = function() {
console.log(this.route.url._value[0]);
}
ngOnInit() {
}
}
When my browser navigates to /prehistory the page loads correctly but the console prints out "" indicating the root route URL. And when I've also tried logging to console the parent directory, it prints null, confirming that the activated route is representing the root directory even though the page has navigated away from it.
home.component.html
<p>
home works!
</p>
<router-outlet></router-outlet>
prehistory.component.html
<p>
prehistory works!
</p>
<router-outlet></router-outlet>
Using .forChild instead of .forRoot seems to break the page. I am wondering if maybe I need to use a service to pass information around? Like maybe I need a service to somehow collect the current route from the content tag and pass that over to the TopComponent? But I'm not sure how I would get a service that collects the route from the content tag.
I think the most important is to activate this property: useHash: true and then manage the path correctly with the name of each component.
Try changing to this code:
export const routes: Routes = [
{ path: 'home', component: HomeComponent},
{path:'children', component: [
{path:'prehistory', component:PrehistoryComponent},
{path:'**', component:HomeComponent},
]},
{ path: '**', pathMatch: 'full', redirectTo: 'home'}
];
#NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule]
})