Skip to main content
AI Assist is now on Stack Overflow. Start a chat to get instant answers from across the network. Sign up to save and share your chats.

Return to Question

added 4140 characters in body
Source Link
minizibi
minizibi
  • 671
  • 3
  • 15
  • 29

EDIT: according to answers I edited app.module.ts and added <router-outlet></router-outlet> to app.component.html.

app.module.ts:

import { AppComponent } from './app.component'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {Routes, RouterModule} from "@angular/router"; import { AdminComponent } from './Admin/admin.component'; import { MainpageComponent } from './Mainpage/mainpage.component'; const appRoutes: Routes = [ {path: 'admin', component: AdminComponent}, {path: '', component: MainpageComponent} ]; @NgModule({ declarations: [ MainpageComponent, AdminComponent, AppComponent ], imports: [ BrowserModule, RouterModule.forRoot( appRoutes, {enableTracing: true} ) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Now i see these errors:

compiler.js:485 Uncaught Error: Template parse errors: 'app-header' is not a known element: 1. If 'app-header' is an Angular component, then verify that it is part of this module. 2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-header></app-header> <div class="container"> <div class="row"> "): ng:///AppModule/MainpageComponent.html@0:0 'app-sidebar' is not a known element: 1. If 'app-sidebar' is an Angular component, then verify that it is part of this module. 2. If 'app-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <div class="row"> <div class="col-lg-3"> [ERROR ->]<app-sidebar></app-sidebar> </div> <div class="col-lg-9"> "): ng:///AppModule/MainpageComponent.html@4:10 'app-carousel' is not a known element: 1. If 'app-carousel' is an Angular component, then verify that it is part of this module. 2. If 'app-carousel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </div> <div class="col-lg-9"> [ERROR ->]<app-carousel></app-carousel> <app-bottompanel></app-bottompanel> </div> "): ng:///AppModule/MainpageComponent.html@7:8 'app-bottompanel' is not a known element: 1. If 'app-bottompanel' is an Angular component, then verify that it is part of this module. 2. If 'app-bottompanel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <div class="col-lg-9"> <app-carousel></app-carousel> [ERROR ->]<app-bottompanel></app-bottompanel> </div> </div> "): ng:///AppModule/MainpageComponent.html@8:8 'app-footer' is not a known element: 1. If 'app-footer' is an Angular component, then verify that it is part of this module. 2. If 'app-footer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </div> </div> [ERROR ->]<app-footer></app-footer> "): ng:///AppModule/MainpageComponent.html@12:0 at syntaxError (compiler.js:485) at TemplateParser.parse (compiler.js:24668) at JitCompiler._parseTemplate (compiler.js:34621) at JitCompiler._compileTemplate (compiler.js:34596) at eval (compiler.js:34497) at Set.forEach (<anonymous>) at JitCompiler._compileComponents (compiler.js:34497) at eval (compiler.js:34367) at Object.then (compiler.js:474) at JitCompiler._compileModuleAndComponents (compiler.js:34366)

This is how my structure looks like:

enter image description here

EDIT: according to answers I edited app.module.ts and added <router-outlet></router-outlet> to app.component.html.

app.module.ts:

import { AppComponent } from './app.component'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {Routes, RouterModule} from "@angular/router"; import { AdminComponent } from './Admin/admin.component'; import { MainpageComponent } from './Mainpage/mainpage.component'; const appRoutes: Routes = [ {path: 'admin', component: AdminComponent}, {path: '', component: MainpageComponent} ]; @NgModule({ declarations: [ MainpageComponent, AdminComponent, AppComponent ], imports: [ BrowserModule, RouterModule.forRoot( appRoutes, {enableTracing: true} ) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Now i see these errors:

compiler.js:485 Uncaught Error: Template parse errors: 'app-header' is not a known element: 1. If 'app-header' is an Angular component, then verify that it is part of this module. 2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-header></app-header> <div class="container"> <div class="row"> "): ng:///AppModule/MainpageComponent.html@0:0 'app-sidebar' is not a known element: 1. If 'app-sidebar' is an Angular component, then verify that it is part of this module. 2. If 'app-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <div class="row"> <div class="col-lg-3"> [ERROR ->]<app-sidebar></app-sidebar> </div> <div class="col-lg-9"> "): ng:///AppModule/MainpageComponent.html@4:10 'app-carousel' is not a known element: 1. If 'app-carousel' is an Angular component, then verify that it is part of this module. 2. If 'app-carousel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </div> <div class="col-lg-9"> [ERROR ->]<app-carousel></app-carousel> <app-bottompanel></app-bottompanel> </div> "): ng:///AppModule/MainpageComponent.html@7:8 'app-bottompanel' is not a known element: 1. If 'app-bottompanel' is an Angular component, then verify that it is part of this module. 2. If 'app-bottompanel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <div class="col-lg-9"> <app-carousel></app-carousel> [ERROR ->]<app-bottompanel></app-bottompanel> </div> </div> "): ng:///AppModule/MainpageComponent.html@8:8 'app-footer' is not a known element: 1. If 'app-footer' is an Angular component, then verify that it is part of this module. 2. If 'app-footer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </div> </div> [ERROR ->]<app-footer></app-footer> "): ng:///AppModule/MainpageComponent.html@12:0 at syntaxError (compiler.js:485) at TemplateParser.parse (compiler.js:24668) at JitCompiler._parseTemplate (compiler.js:34621) at JitCompiler._compileTemplate (compiler.js:34596) at eval (compiler.js:34497) at Set.forEach (<anonymous>) at JitCompiler._compileComponents (compiler.js:34497) at eval (compiler.js:34367) at Object.then (compiler.js:474) at JitCompiler._compileModuleAndComponents (compiler.js:34366)

This is how my structure looks like:

enter image description here

Source Link
minizibi
minizibi
  • 671
  • 3
  • 15
  • 29

Angular 4 basic routing

I'm trying to show different htmls for different urls. When user types basic url he should see maincomponent.html, when application recognizes there is additional /admin subpath it should show admin.html. Both are modules. As far as I know, Routes makes it possible. How can I achieve that?

app.module.ts:

 import { AppComponent } from './app.component'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {Routes, RouterModule} from "@angular/router"; import { AdminModule } from './Admin/admin.module'; import { MainpageModule } from './Mainpage/mainpage.module'; const appRoutes: Routes = [ {path: 'admin', component: AdminModule}, {path: '', component: MainpageModule} ]; @NgModule({ declarations: [ AppComponent ], imports: [ MainpageModule, AdminModule, BrowserModule, RouterModule.forRoot( appRoutes, {enableTracing: true} ) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

mainpage.module.ts

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {MainpageComponent} from './mainpage.component' import { HeaderComponent } from './Header/header.component'; import { FooterComponent } from './Footer/footer.component'; import { SidebarComponent } from './Sidebar/sidebar.component'; import { BottompanelComponent } from './Bottompanel/bottompanel.component' import { CarouselComponent } from './Carousel/carousel.component' @NgModule({ declarations: [ MainpageComponent, HeaderComponent, FooterComponent, SidebarComponent, BottompanelComponent, CarouselComponent ], imports: [CommonModule], entryComponents: [MainpageComponent], exports: [MainpageComponent], providers: [], bootstrap: [] }) export class MainpageModule {}

admin.module.ts:

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {AdminComponent} from './admin.component' @NgModule({ declarations: [ AdminComponent, ], imports: [CommonModule], exports: [AdminComponent], providers: [], bootstrap: [] }) export class AdminModule {}

However it doesn't works, I can't see anything, just blank site. This is my log output:

Router Event: NavigationStart platform-browser.js:367 NavigationStart(id: 1, url: '/') platform-browser.js:367 NavigationStart {id: 1, url: "/"} core.js:3687 Angular is running in the development mode. Call enableProdMode() to enable the production mode. platform-browser.js:380 Router Event: RoutesRecognized platform-browser.js:367 RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } ) platform-browser.js:367 RoutesRecognized {id: 1, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot} platform-browser.js:380 Router Event: GuardsCheckStart platform-browser.js:367 GuardsCheckStart(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } ) platform-browser.js:367 GuardsCheckStart {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot} platform-browser.js:380 Router Event: ChildActivationStart platform-browser.js:367 ChildActivationStart(path: '') platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot} platform-browser.js:380 Router Event: ActivationStart platform-browser.js:367 ActivationStart(path: '') platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot} platform-browser.js:380 Router Event: GuardsCheckEnd platform-browser.js:367 GuardsCheckEnd(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } , shouldActivate: true) platform-browser.js:367 GuardsCheckEnd {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true} platform-browser.js:380 Router Event: ResolveStart platform-browser.js:367 ResolveStart(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } ) platform-browser.js:367 ResolveStart {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot} platform-browser.js:380 Router Event: ResolveEnd platform-browser.js:367 ResolveEnd(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } ) platform-browser.js:367 ResolveEnd {id: 1, url: "/", urlAfterRedirects: UrlTree, state: RouterStateSnapshot} platform-browser.js:380 Router Event: ActivationEnd platform-browser.js:367 ActivationEnd(path: '') platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot} platform-browser.js:380 Router Event: ChildActivationEnd platform-browser.js:367 ChildActivationEnd(path: '') platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot} platform-browser.js:380 Router Event: NavigationEnd platform-browser.js:367 NavigationEnd(id: 1, url: '/', urlAfterRedirects: '/') platform-browser.js:367 NavigationEnd {id: 1, url: "/", urlAfterRedirects: "/"}