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...
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
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!
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+.
Angular.io newb here (I know AngularJS!). My app was rendering stuff before, but now it's compiling, but rendering nothing.
I have the following index.html file:
<html lang="en">
<head>
<meta charset="utf-8">
<title>SumanChromeExtension</title>
<base href="/dist/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-header></app-header>
<app-root></app-root>
<app-footer></app-footer>
</body>
</html>
the following main.ts file:
import {enableProdMode} from '#angular/core';
import {platformBrowserDynamic} from '#angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import {AppModule} from './app.module';
import {environment} from './environments/environment';
declare var chrome;
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
window.addEventListener('message', function (ev: Event) {
console.log('extension received event:', ev);
});
the following app.module.ts file:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import {MatButtonModule, MatCheckboxModule} from '#angular/material';
import { AppHeader } from './app/header/header.component';
import { AppComponent } from './app/pages/home/app.component';
#NgModule({
declarations: [
AppHeader,
AppComponent
],
imports: [
MatButtonModule,
MatCheckboxModule,
BrowserModule,
BrowserAnimationsModule,
],
providers: [],
bootstrap: [
AppHeader,
AppComponent
]
})
export class AppModule { }
app.component.ts looks like:
import {Component} from '#angular/core';
declare var chrome;
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Suman Test Generator';
constructor() {
console.log('constructor was called.');
}
}
and header.component.ts looks like:
import {Component} from '#angular/core';
declare var chrome;
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class AppHeader {
title = 'Suman Test Generator 4';
constructor() {
console.log('constructor was called.');
}
}
it was rendering stuff before, but now the rendered html looks like:
So nothing is being rendered. I am sure it's a simple problem, anyone know? Like I said it is building without any errors, so.
Actually I checked the console, and I have these errors:
compiler.js:24660 Uncaught Error: Template parse errors:
Can't bind to 'mdMenuTriggerFor' since it isn't a known property of 'button'. ("
<span>App Name</span>
<span class="example-spacer"></span>
<button md-button [ERROR ->][mdMenuTriggerFor]="appMenu">
<md-icon>menu</md-icon>
Menu
"): ng:///AppModule/AppHeader.html#6:22
'md-icon' is not a known element:
1. If 'md-icon' is an Angular component, then verify that it is part of this module.
2. If 'md-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("
<span class="example-spacer"></span>
<button md-button [mdMenuTriggerFor]="appMenu">
[ERROR ->]<md-icon>menu</md-icon>
Menu
</button>
"): ng:///AppModule/AppHeader.html#7:6
'md-toolbar' is not a known element:
1. If 'md-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'md-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("
<div>
[ERROR ->]<md-toolbar color="primary">
<span>App Name</span>
<span class="example-spacer"></span>
"): ng:///AppModule/AppHeader.html#3:2
There is no directive with "exportAs" set to "mdMenu" ("
</button>
</md-toolbar>
<md-menu [ERROR ->]#appMenu="mdMenu">
<button md-menu-item> Settings</button>
<button md-menu-item> Contact</but"): ng:///AppModule/AppHeader.html#11:11
'md-menu' is not a known element:
1. If 'md-menu' is an Angular component, then verify that it is part of this module.
2. If 'md-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("
</button>
</md-toolbar>
[ERROR ->]<md-menu #appMenu="mdMenu">
<button md-menu-item> Settings</button>
<button md-menu-item> Con"): ng:///AppModule/AppHeader.html#11:2
at syntaxError (compiler.js:485)
at TemplateParser.webpackJsonp.../../../compiler/esm5/compiler.js.TemplateParser.parse (compiler.js:24660)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._parseTemplate (compiler.js:34471)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34446)
at compiler.js:34347
at Set.forEach (<anonymous>)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34347)
at compiler.js:34217
at Object.then (compiler.js:474)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34216)
The first problem is that everything needs to be in scope of app-root. All your components and modules must be children of root. You will need to include the components in the app.module.ts and you will need to provide the DOM elements inside the app.component.html. The next problem is that md was replaced by mat a while ago, so you're using outdated Material items inside your html.
If you're looking to use Angular - Material in your projects here's a github repo that uses Angular 5, Material 2, and Flex-Layout: https://github.com/zbagley/ngx-flex-material-template. It also has a separate header, body, and footer as contained components in a similar fashion to how you were hoping to implement them.
This question already has answers here:
Angular2 Exception: Can't bind to 'routerLink' since it isn't a known native property
(12 answers)
Closed 6 years ago.
yes, this is probably the hundredth time some one experiences this problem, but no solution worked for me...
I am using angular 2.0.0 rc and nothing will work, I guess I am missing something, but I have no idea what
this are my files, they all transpile correctly, and yes I tried using the not deprecated route, and yes I did it according to the documentation, both don't work.
app.component.ts
import { Component, OnInit } from '#angular/core';
import {Routes, Router, ROUTER_DIRECTIVES} from '#angular/router';
import {LoginComponent} from './login/login.component';
import {HomeComponent} from './home/home.component';
#Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<nav>
<a [routerLink]="['/login']">login</a>
<a [routerLink]="['/home']">home</a>
</nav>
<router-outlet></router-outlet>
`, directives: [ROUTER_DIRECTIVES]
})
#Routes([
{ path: '/login', component: LoginComponent},
{ path: '/home', component: HomeComponent},
])
export class AppComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
this.router.navigate(['/home']);
}
}
main.ts
import { bootstrap } from '#angular/platform-browser-dynamic';
import { ROUTER_PROVIDERS } from '#angular/router';
import { AppComponent } from './components/app.component';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
the rest of the files are pretty much a copy paste from the tutorial, so I won't spam with more code...
Update, I will add that for some reason npm logs don't send a GET request to #angular/routes-deprecated/... but they do send it to other modules.
however it is included in the package.json and systemjs.config.js
I think I know what the problem is, I am not sure what is causing it though
as you see there is no routes folder in the chrome assets. Therefore it makes sense it won't know it - however the node_modules in the project files is there, it is specified in the systemjs.config.js just like any other module...
They have deprecated the RC2 router: http://angularjs.blogspot.com.au/2016/06/improvements-coming-for-routing-in.html
I used the 3.0.0-alpha.7 version.
Based on their example I also made an app.routes.ts file:
import { provideRouter, RouterConfig } from '#angular/router';
import { FooComponent, BarComponent, BazComponent } from './components/bunchOComponents.ts'
export const routes: RouterConfig = [
{ path: 'foo', component: FooComponent },
{ path: 'bar', component: BarComponent },
{ path: 'baz', component: BazComponent }
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
I then used this in my main.ts file:
import { bootstrap } from '#angular/platform-browser-dynamic';
import { AppComponent } from './components/appcomponent.ts';
import { APP_ROUTER_PROVIDERS } from './app.routes';
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS
])
.catch(err => console.error(err));
HTH
Since RC.0 angular changed the router to a new implementation, which means that a lot of the examples available online are of the old router.
If you are using #RouteConfig it's the old router.
And it's that one that is available at #angular/router-deprecated
The new router uses #Routes and is available from #angular/router
Otherwise the importing of the ROUTER_DIRECTIVES and ROUTER_PROVIDERS are the same.
Other changes that are significant between the releases are.
the new router doesn't support named routes.
Routes
Before:
import {RouteConfig} from '#angular/router-deprecated';
#RouteConfig([
{path: '/myroute/:id', component: MyRoute, name: 'MyRoute'}
])
After:
import {Routes} from '#angular/router';
#Routes([
{ path: '/myroute/:id`, component: MyRoute }
])
routerLink
The routerLink directive also changed, and doesn't take an object as a second parameter to specify path variables such as id
Before:
<a routerLink="['MyRoute', {id: 1}]">Link</a>
After:
<a routerLink="['/myroute', 1]">Link</a>
Angular needs the [...] around the property name to indicate that it is a binding it needs to resolve. The [...] in the value is only to make Angular parse the assigned value as array.
<a [routerLink]="['/login']">login</a>
<a [routerLink]="['/home']">home</a>
This doesn't explain the error message you get because the error message indicates binding to a property that doesn't exist, while my correction is to make Angular actually do the binding.