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.
Related
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 am working on putting together a multi-step form. I am using the instructions here as an instruction guide:
https://www.cc28tech.com/angular-multi-step-wizard-part-1/
I am working with Angular 5.
As of now, I am doing a test whereby the main HTML component admin-reg-ques calls a sub-ordinate HTML component ques-navbar.
When I type: http://localhost:4200/admin/admin-reg-ques
I get the following error:
VM6056 core.js:1624 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'app-ques-navbar' is not a known element:
1. If 'app-ques-navbar' is an Angular component, then verify that it is part of this module.
2. If 'app-ques-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("
<div style="background:white">
<h1>stuff is in here</h1>
[ERROR ->]<app-ques-navbar></app-ques-navbar>
</div>
</body>"): ng:///AuthAdminModule/AdminRegQuesComponent.html#3:6
Error: Template parse errors:
'app-ques-navbar' is not a known element:
1. If 'app-ques-navbar' is an Angular component, then verify that it is part of this module.
2. If 'app-ques-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("
<div style="background:white">
<h1>stuff is in here</h1>
[ERROR ->]<app-ques-navbar></app-ques-navbar>
</div>
</body>"): ng:///AuthAdminModule/AdminRegQuesComponent.html#3:6
The file structure is as like the picture below:
QUESTIOBN: What am I doing wrong?
ques-navbar.component.html
<h1>navigation bar goes here </h1>
ques-navbar.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-ques-navbar',
templateUrl: './ques-navbar.component.html',
styleUrls: ['./ques-navbar.component.css']
})
export class QuesNavbarComponent implements OnInit {
// need for work with the Template = do not erase!
ngAfterViewInit() { document.getElementById('preloader').classList.add('hide'); }
constructor() { }
ngOnInit() {
}
}
admin-reg-ques.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-admin-reg-ques',
templateUrl: './admin-reg-ques.component.html',
styleUrls: ['./admin-reg-ques.component.css']
})
export class AdminRegQuesComponent implements OnInit {
// need for work with the Template = do not erase!
ngAfterViewInit() { document.getElementById('preloader').classList.add('hide'); }
constructor() { }
ngOnInit() {
}
}
admin-reg-ques.component.html
<body style="background-color: white">
<div style="background:white">
<h1>item is in here</h1>
<app-ques-navbar></app-ques-navbar>
</div>
</body>
SPECIAL NOTE
If I change admin-reg-ques.component.html to the following, I do not get the error:
<body style="background-color: white">
<div style="background:white">
<h1>item is in here</h1>
<!-- <app-ques-navbar></app-ques-navbar> -->
</div>
</body>
admin-reg-ques.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { QuesMainComponent } from './ques-main/ques-main.component';
import { QuesDoneComponent } from './ques-done/ques-done.component';
import { QuesAddressComponent } from './ques-address/ques-address.component';
import { QuesNavbarComponent } from './ques-navbar/ques-navbar.component';
import { QuesWorkflowComponent } from './ques-workflow/ques-workflow.component';
import { AdminRegQuesComponent } from './admin-reg-ques.component';
export const routes = [
{ path:'', redirectTo:'admin-reg-ques', pathMatch:'full' },
{ path: 'admin-reg-ques', component: AdminRegQuesComponent, pathMatch: 'full' },
];
#NgModule({
imports: [
CommonModule
],
declarations: [QuesMainComponent, QuesDoneComponent, QuesAddressComponent, QuesNavbarComponent, QuesWorkflowComponent]
})
export class AdminRegQuesModule { }
If the module AdminRegQuesModule is being imported by another module that needs to make your QuesNavbarComponent rendered then you need to export it in your AdminReqQuesModule.
#NgModule({
imports: [
CommonModule
],
declarations: [QuesMainComponent, QuesDoneComponent, QuesAddressComponent, QuesNavbarComponent, QuesWorkflowComponent],
exports: [QuesMainComponent, QuesDoneComponent, QuesAddressComponent, QuesNavbarComponent, QuesWorkflowComponent]
})
export class AdminRegQuesModule { }
This should make your components visible in other modules.
As you can see from the error, there is a reference to AuthAdminModule. Are you trying to inject the components within this module?
I have this very basic project:
https://stackblitz.com/edit/angular-rktmgc-ktjk3n?file=index.html
This is the code on: /index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="mat-app-background basic-container">
<br />
API reference for Angular Material slide-toggle<br /><br />
<select-reset-example>loading</select-reset-example>
<div style="margin-top:30px;">
<div style="color:#f00;margin-bottom:20px;">
Below is what I need to get it work like above (but it doesn't):
</div>
<mat-slide-toggle>Slide me!</mat-slide-toggle>
</div>
</div>
This is the code on: /app/select-reset-example.html
<mat-slide-toggle>Slide me!</mat-slide-toggle>
When loading the component: mat-slide-toggle through: select-reset-example it works, but when loading it directly on the index.html it doesn't.
My question is, how to configure the following /main.ts file in order to render the mat-slide-toggle directly on the index.html?
In case the scope be a problem, maybe is it possible to create a custom component which inherits from that mat-slide-toggle or MatSlideToggleModule class?
If possible, could you fork the project on stackblitz.com and give me the link
with a proper configuration?
import './polyfills';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { NgModule } from '#angular/core';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { MatSlideToggleModule } from '#angular/material';
import { SelectResetExample } from './app/select-reset-example';
import { HttpModule } from '#angular/http';
import { CdkTableModule } from '#angular/cdk/table';
#NgModule({
exports: [
MatSlideToggleModule,
]
})
export class DemoMaterialModule { }
#NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
DemoMaterialModule,
ReactiveFormsModule,
],
entryComponents: [SelectResetExample],
declarations: [SelectResetExample],
bootstrap: [SelectResetExample],
providers: []
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
This is the structure of the project:
Thanks!
Indeed there are several options which could be applied here.
Attempt 1
At first glance we can easily solve your problem by simply importing MatSlideToggle component and adding it to the bootstrap array:
import { MatSlideToggle } from '#angular/material';
#NgModule({
...
bootstrap: [SelectResetExample, MatSlideToggle ]
^^^^^^^^^^^^^^
cool, it was very easy!!!
})
export class AppModule { }
https://stackblitz.com/edit/angular-rktmgc-7h51hh?file=main.ts
Hmm, seems we've broken everything:).
Why?
Angular bootstraps SelectResetExample component. During this process it creates mat-slide-toggle that is part of select-reset-example.html template.
So now our html has two mat-slide-toggle tags.
And then angular bootstraps second component (MatSlideToggle) that will be applied to the first mat-slide-toggle. This way we can see that the first working slider lost text Slide me!.
Attempt 2
Let's change order of our bootstrapping components:
#NgModule({
...
bootstrap: [ MatSlideToggle, SelectResetExample ]
})
export class AppModule { }
https://stackblitz.com/edit/angular-rktmgc-mkm7ry?file=main.ts
The second slider works now but wait... We again lost the text.
The main reason of this is that angular can't process projectable nodes on bootstrapping component.
Attempt 3
Angular gives the opportunity to override bootstrapping process by writing code within ngDoBootstrap method of #NgModule. Let's try...
import { ApplicationRef, ComponentFactoryResolver, Injector, NgModuleRef } from '#angular/core';
#NgModule({
// we replaced bootstrap option with entryComponents
entryComponents: [SelectResetExample, MatSlideToggle],
})
export class AppModule {
constructor(
private resolver: ComponentFactoryResolver,
private ngModule: NgModuleRef<any>) {}
ngDoBootstrap(appRef: ApplicationRef) {
const factory = this.resolver.resolveComponentFactory(MatSlideToggle);
const target = document.querySelector('mat-slide-toggle');
const compRef = factory.create(
Injector.NULL,
[Array.from(target.childNodes)], // passing projectable nodes
target,
this.ngModule);
appRef.attachView(compRef.hostView);
appRef.bootstrap(SelectResetExample);
}
}
https://stackblitz.com/edit/angular-rktmgc-ncyebq?file=index.html
Here i am bootstrapping our components throught custom method ngDoBootstrap. And it works but...
What is this? Do I really need to know this?
I don't think so. There must be some other way out.
Attempt 4
in order not to complicate our live we should follow the design of angular framework. For that it would be better to have one root component. Let's create it:
app.component.ts
#Component({
selector: '.mat-app-background.basic-container',
templateUrl: './app.component.html',
})
export class AppComponent {
}
app.component.html
<br />
API reference for Angular Material slide-toggle<br /><br />
<select-reset-example>loading</select-reset-example>
<div style="margin-top:30px;">
<div style="color:#f00;margin-bottom:20px;">
Below is what I need to get it work like above (but it doesn't):
</div>
<mat-slide-toggle>Slide me!</mat-slide-toggle>
</div>
module
declarations: [SelectResetExample, AppComponent],
bootstrap: [AppComponent],
index.html
<div class="mat-app-background basic-container"></div>
i moved styles to external resouces
Stackblitz Example
Im trying to show a push notification on button click.
Im stuck with a angular promise error which says:
Cannot read property 'then' of undefined
Full error stack trace:
Uncaught Error: Error in ./AppComponent class AppComponent - inline template:17:2 caused by: Cannot read property 'then' of undefined
TypeError: Cannot read property 'then' of undefined
at PushNotificationComponent.show (notification.component.js:42)
at DebugAppView.View_AppComponent0.handleEvent_16 (/AppModule/AppComponent/component.ngfactory.js:129)
at DebugAppView.eventHandler (view.js:664)
at HTMLButtonElement.COMPONENT_REGEX (dom_renderer.js:489)
at ZoneDelegate.invokeTask (zone.js:367)
at Object.NgZone.forkInnerZoneWithAngularBehavior.inner.inner.fork.onInvokeTask (ng_zone.js:264)
at ZoneDelegate.invokeTask (zone.js:366)
at Zone.runTask (zone.js:166)
at HTMLButtonElement.cancelFn.invoke (zone.js:420)
I am using the the github link :
https://github.com/alexcastillo/ng2-notifications/blob/master/src/app/app.component.html
My app.module.ts is as:
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 { PushNotificationComponent } from 'ng2-notifications/src/app/components/notification.component';
#NgModule({
declarations: [
AppComponent,
PushNotificationComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
import {
Directive,
EventEmitter,
OnInit,
OnChanges,
OnDestroy,
Input,
Output
} from '#angular/core';
import '../style/app.scss';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
#Directive({
selector: 'push-notification'
})
export class AppComponent {
title: string = 'ng2-notifications';
description: string = 'Angular 2 Component for Native Push Notifications';
constructor() {
}
}
app.component.html
<header>
<h1 class="title">{{ title }}</h1>
</header>
<main>
<h2>{{ description }}</h2>
<img src="img/demo.gif">
<push-notification #notification title="ng2-notifications" body="Native Push Notifications in Angular 2" icon="<some_ulr>" closeDelay="2000" (load)="notification.show()"> //Problem Here!!
</push-notification>
<button (click)="notification.show()">Show Notification</button>
</main>
If i remove the line: (load)="notification.show() it seems fine, but it doesnt serve any purpose without a notification after button click!
Error is here:
Remove this code block from app.component.ts
#Directive({
selector: 'push-notification'
})
Note :
https://github.com/alexcastillo/ng2-notifications is coded with beta
version of angular, so find the newer version or different plugin.
Given Doc is also regarding to the beta version of angular
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.