This question has been asked before,
but none of the answers seems to help me.
I can't route to different pages on angular, instead, it just appends at the end of my homepage the HTML of the desired component. Here is my code:
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { ToggleFullscreenDirectiveDirective } from './toggle-fullscreen-directive.directive';
import { HttpClientModule } from '#angular/common/http';
import { AnnouncementsComponent } from './announcements/announcements.component';
import { AdminComponent } from './admin/admin.component';
import { RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { ToggleFullscreenDirectiveDirective } from './toggle-fullscreen-directive.directive';
import { HttpClientModule } from '#angular/common/http';
import { AnnouncementsComponent } from './announcements/announcements.component';
import { AdminComponent } from './admin/admin.component';
import { RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
#NgModule({
declarations: [
AppComponent,
ToggleFullscreenDirectiveDirective,
AnnouncementsComponent,
AdminComponent
],
imports: [
BrowserModule,
HttpClientModule,
RouterModule.forRoot([
{ path: '', component: AppComponent },
{ path: 'admin', component: AdminComponent }
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
...My custom html
<router-outlet></router-outlet>
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular Bootstrap Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<app-root>Loading...</app-root>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Based on other answers the problem might be with imports,
I tried to remove some that I used on the code, like the toggle fullscreen, another possibility is that there might be a console error which I checked and there is no problem. can anyone help me?
I am lost!
Thanks
App.component is rendered and it's the container for all other components. So don't include it in routing,
So what you have to do is copy your code from App.component and add that code to a new component (called home.component)
Then configure routing as follows.
RouterModule.forRoot([
{ path: '', component: HomeComponent},
{ path: 'admin', component: AdminComponent }
])
app.component.html
<router-outlet></router-outlet>
home.component.html
...My custom html
Based on your routes, try to change your routerModule to:
RouterModule.forRoot([
{ path: '', redirectTo: '/admin', pathMatch: 'full' },
{ path: 'admin', component: AdminComponent }
])
By the way, when you create a forRoot router, Angular looks for a <router-outlet> selector in your bootstrap component from your application (app.component.html usually). There's no need to specify your app.component with forRoot configuration!
Related
This question already has answers here:
Upgrading to angular-6.x gives "Uncaught ReferenceError: global is not defined"
(9 answers)
Angular 7: Uncaught ReferenceError: global is not defined when adding package
(5 answers)
Closed 3 years ago.
I just ran ng serve -o and only see my index.html file displayed in the angular app I just started modifying. The page just says hello for now:
// index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Appclient</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>hello</app-root>
</body>
</html>
The app.component.html has this:
world
<app-header></app-header>
<router-outlet></router-outlet>
The app.component.ts is below:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'startlistsclient';
}
I am not sure what I am missing.
The console error is:
ReferenceError: global is not defined
index.js:43
Webpack 18
you need to use #angular/route in app.module.ts
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
const routes: Routes = [
{ path: 'hello', component: HelloComponent }
];
#NgModule({
imports: [ BrowserModule, FormsModule, RouterModule.forRoot(routes) ],
exports: [ RouterModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
and <app-header></app-header> this should be defined.
check working demo
Sorry, as I mentioning this. I am new to angular 6. I have seen this link https://www.npmjs.com/package/angular-timelinejs3?activeTab=readme, and when I try to do it in angular 6. I stuck in the middle as they said "Add dependency to timeline your angular module: ngTimeline" that means which one ?.
I installed angular-timelinejs3. Added css and javascript to index.html.When i put
directive:
in app.component.html.And how can i import the ng-timeline js3 in angular.I got the error.Template parse error.can anyone please help me in this?
In Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Trial</title>
<link rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
<script src="/node_modules/angular/angular.js"></script>
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
In app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
//import { NgTimelineModule } from 'ng-timeline';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
In app.component.html
<timeline control="timeline" height="80vh" options="options"></timeline >
In app.component.ts
import { Component, OnInit } from '#angular/core';
//import 'ng-timeline';
//import 'angular-timelinejs3';
//import * as timeline from 'ng-timeline';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit(): void {
}
}
this Angular-timelinejs3 package only supports Angular JS. Support for Angular 2+ is missing. Please find the alternate timeline package which supports Angular 2+.
I have a directory component that displays basic content. The page template used by directory component is located in projectname/src/index.html. index.html is the default parent template used by all new components.
I created a new main.html in projectname/src that is supposed to be used by the new component
/src/main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
main/main.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
directory/directory.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-directory',
templateUrl: './directory.component.html',
styleUrls: ['./directory.component.css']
})
export class DirectoryComponent implements OnInit {
}
src/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MyAngularApp</title>
<base href="/">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
src/main.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MyAngularApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
</body>
</html>
src/app/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 { DirectoryComponent } from './directory/directory.component';
import { RouterModule, Routes } from "#angular/router";
import 'rxjs/Rx';
import { MainComponent } from './main/main.component';
// Each route is an object
export const APP_ROUTES: Routes = [
//{ path: '', component: MainComponent },
{ path: 'homedev', component: HomedevComponent },
{ path: 'directory', component: DirectoryComponent },
];
#NgModule({
declarations: [
AppComponent
DirectoryComponent,
MainComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(APP_ROUTES)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
What I want to happen is for main component to use src/main.html template.
Do you have any idea how to do this? Thanks.
This is not how it works. You cannot replace the root HTML template. That one does not change. What you can do if replace stuff within your app-root component in the index.html.
If you need to have two separate entry points (html files), I believe you need to create two separate applications and serve them from different folders. But I cannot think of any situation in which you would ever need to do something like this. After all, it is called SPA for a reason...
Angular routing is not working.. here is the code
routs.ts: routing url definitions file.
import {BlankComponent} from "../layouts/blank.component";
export const routes=[
{
path:'',
component:BlankComponent,
children:[
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: '../pages/dashboard/dashboard.module#DashboardModule' }
]
},
{ path: '**', redirectTo: 'home' }
]
routes.module.ts: routing module
import {NgModule} from "#angular/core";
import {RouterModule} from "#angular/router";
import { routes } from './routes';
#NgModule({
imports:[RouterModule.forRoot(routes)],
exports:[RouterModule,]
})
export class RoutesModule{
constructor(){
}
}
Layout module:
import {NgModule} from "#angular/core";
import { RouterModule } from '#angular/router';
import {BlankComponent} from "./blank.component";
import {TopnavComponent} from "./topnav.component";
#NgModule({
declarations:[BlankComponent,TopnavComponent],
exports:[BlankComponent,TopnavComponent,RouterModule],
imports:[]
})
export class LayoutsModule{}
BlankComponent:
import {Component} from "#angular/core";
#Component({
selector:"sig-blank",
templateUrl:'./blank.component.html'
})
export class BlankComponent{}
App module:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import {LayoutsModule} from './layouts/layouts.module'
import {RoutesModule} from "./routes/routes.module"
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
LayoutsModule,
RoutesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
blank.component.html
<div class="wrapper">
<section>
<div class="container">
<router-outlet></router-outlet>
</div>
</section>
</div>
app.component.html
<router-outlet></router-outlet>
This is the code i used in my project. but the routing is not working .
What is the wrong in my code. actually i have markup in my ./blank.component.html which i not included in the question. now the page displaying is the content in app.component.html only
You need to give the component name at {path:'home',component:ComponentName,loadChildren: '../pages/dashboard/dashboard.module#DashboardModule'}
I have a one main page and I want to separate header body and footer. Because in other page I wont be needed header.
_layout.cshtml
<!DOCTYPE html>
<html>
<head>
<base href="/" />
</head>
<body>
<main-app></main-app>
</body>
</html>
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { HttpModule, JsonpModule } from '#angular/http';
import { ModuleWithProviders } from '#angular/core';
import { AppComponent} from "./app.component";
import { EqualValidator } from "./Validation/equal.validator.directive";
import { LoginComponent } from "./Components/login.Component";
import { HomeComponent } from "./Components/home.component";
import { DashBoardComponent } from "./Components/dashBoard.Component";
import { FooterComponent } from "./Components/footer.Component";
const appRoutes: Routes = [
{ path: '', redirectTo: 'Home/Index', pathMatch: 'full' },
{ path: 'Account/Login', component: LoginComponent },
{ path: 'Home/Index', component: HomeComponent,children:[
{path: '',component: FooterComponent,outlet: 'footer'}]},
{ path: 'DashBoard/Index', component: DashBoardComponent}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
#NgModule({
imports: [BrowserModule, FormsModule, HttpModule, routing],
declarations: [AppComponent, LoginComponent, HomeComponent, DashBoardComponent, EqualValidator,FooterComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
If I remove the child routing the application works good. I have added the forChild() root also but the footer component is not been loaded.
Here I found the working sample
https://plnkr.co/edit/sgGDpti43GPM5cHntPpu?p=preview
But I am facing the Cannot match any routes: '' error
home.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'Home-app',
template: `
<br>
<br>
<br>
my home!!!!
<br>
<br>
<br>
<router-outlet name="footer"></router-outlet>
`
})
export class HomeComponent {
}
footer.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'Footer-app',
templateUrl: '<p>Copy rights emakitri 2017</p>'
})
export class FooterComponent {
constructor() {
console.log("test");
}
}