In my endeavor to construct a wizard using Angular2's router, I stumbled upon the suggestion of having a main bootstrap file by Angular2, which then bootstraps all the app components. However, as I am unable to create a Single Page Application (SPA), I desire for each page to independently bootstrap its own components.
Upon running the application, an error regarding routerLink
presents itself:
"EXCEPTION: Template parse errors: Can't bind to 'routerLink' since it isn't a known native property ("For="#wizard of Wizards" [selected]="SelectedWizard == wizard" [value]="wizard.name" [ERROR ->][routerLink]="'' + wizard.path + ''">{{wizard.name}} "
Here is the code snippet from my page component:
/// <reference path="angular2/typings/browser.d.ts" />
/// <reference path="angular2/core.d.ts" />
/// <reference path="angular2/router.d.ts" />
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {Wizard1} from './wizard1';
import {Wizard2} from './wizard2';
import {Step1} from './step1';
import {Step2} from './step2';
import {Step3} from './step3';
import {Step4} from './step4';
import {Step5} from './step5';
//Rest of the code here ...
Wizard1
/// <reference path="angular2/core.d.ts" />
/// <reference path="angular2/router.d.ts" />
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';
//Rest of the code here ...
Wizard2
/// <reference path="angular2/core.d.ts" />
/// <reference path="angular2/router.d.ts" />
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';
//Rest of the code here ...
All steps are similar to this, in their own .ts files
/// <reference path="angular2/core.d.ts" />
/// <reference path="angular2/router.d.ts" />
import {Component} from 'angular2/core';
import {RouteConfig} from 'angular2/router';
//Rest of the code here ...
Encountering any issues or difficulties with this setup?
Environment
- Visual Studio 2015 update 1
- ASP.NET 5 and MVC 6
- DNX 4.5.1 and 5.0
- Angular2 Typescript