javascript - Aurelia app "Hello World" not working at all -

i creating sharepoint framework webpart, , trying use aurelia javascript framework.

basically created sharepoint framework webpart, when created yeoman, creates folder structure.

then files (just simple hello world):

app.html

<template>   ${message} </template> 

app.js

export class app {   message = 'hello world'; } 

main.ts

import {aurelia} 'aurelia-framework';  export function configure(aurelia) {   aurelia.use     .standardconfiguration()     .developmentlogging();    aurelia.start().then(a => a.setroot()); } 

index.html

 <div aurelia-app>     <h1>loading...</h1>     <h2> ftw </h2>     <script src="jspm_packages/system.js"></script>     <script src="config.js"></script>     <script>       system.import('aurelia-bootstrapper');     </script>    </div> 

and helloworld webpart:

import {   baseclientsidewebpart,   ipropertypanesettings,   iwebpartcontext,   propertypanetextfield } '@microsoft/sp-client-preview';  import styles './helloworld.module.scss'; import * strings 'helloworldstrings'; import { ihelloworldwebpartprops } './ihelloworldwebpartprops'; import { configure } './main'; import * systemjs 'systemjs'; import {aurelia} 'aurelia-framework';  export default class helloworldwebpart extends baseclientsidewebpart<ihelloworldwebpartprops> {    public constructor(context: iwebpartcontext) {     super(context);   }    public render(): void {     if (this.renderedonce === false) {       this.domelement.innerhtml = require('./index.html');     }   }    protected propertypanesettings(): ipropertypanesettings {     return {       pages: [         {           header: {             description: strings.propertypanedescription           },           groups: [             {               groupname: strings.basicgroupname,               groupfields: [                 propertypanetextfield('description', {                   label: strings.descriptionfieldlabel                 })               ]             }           ]         }       ]     };   } } 

the code renders html in page, without message.

i don't see error in browser console.

i installed aurelia npm no jspm. executing gulp serve not show compilation error.

i created typings file "aurelia.d.ts" in typings subfolder.

i think main problem in index.html, has reference 2 javascript files, not sure how reference them because inside npm modules folder , don't think deployed when doing gulp serve.

and way, here's config.json:

{   "entries": [     {       "entry": "./lib/webparts/helloworld/helloworldwebpart.js",       "manifest": "./src/webparts/helloworld/helloworldwebpart.manifest.json",       "outputpath": "./dist/hello-world.bundle.js"     }   ],   "externals": {     "@microsoft/sp-client-base": "node_modules/@microsoft/sp-client-base/dist/sp-client-base.js",     "@microsoft/sp-client-preview": "node_modules/@microsoft/sp-client-preview/dist/sp-client-preview.js",     "@microsoft/sp-lodash-subset": "node_modules/@microsoft/sp-lodash-subset/dist/sp-lodash-subset.js",     "office-ui-fabric-react": "node_modules/office-ui-fabric-react/dist/office-ui-fabric-react.js",     "react": "node_modules/react/dist/react.min.js",     "react-dom": "node_modules/react-dom/dist/react-dom.min.js",     "aurelia": "node_modules/aurelia-framework/dist/aurelia-framework.js",     "systemjs" : "node_modules/systemjs/dist/systemjs/system.js"   },   "localizedresources": {     "helloworldstrings": "webparts/helloworld/loc/{locale}.js"   } } 

errors in console:

fetchprovider.ts:30 https://softwares-macbook-pro.local:4321/sites/workbench/_api/microsoft.sharepoint.portal.suitenavdata.getsuitenavdata?v=2&locale=undefined 404 (not found)fetchprovider.fetch @ fetchprovider.ts:30basichttpclient.fetchcore @ basichttpclient.ts:68httpclient._fetchwithinstrumentation @ httpclient.ts:183httpclient.fetch @ httpclient.ts:141httpclient.get @ httpclient.ts:154onpremsuitenavdatasource.loaddata @ onpremsuitenavdatasource.ts:42suitenavmanager._loadsuitenavfromserver @ suitenavmanager.ts:148suitenavmanager._getsuitenavmodel @ suitenavmanager.ts:129suitenavmanager.loadsuitenav @ suitenavmanager.ts:106(anonymous function) @ shell.ts:164shell._startapplication @ shell.ts:145shell.start @ shell.ts:141(anonymous function) @ spmoduleloader.ts:178 tracelogger.ts:147 [onpremsuitenavdatasource] failed retrieve hybrid suitenavdata tracelogger.ts:147 [suitenavmanager] suitenavmanager loaddata failed retrieve hybrid suitenavdata fetchprovider.ts:30 post https://softwares-macbook-pro.local:4321/sites/workbench/_api/contextinfo 405 (method not allowed)fetchprovider.fetch @ fetchprovider.ts:30digestcache.fetchdigest @ digestcache.ts:73httpclient.fetch @ httpclient.ts:129httpclient.post @ httpclient.ts:167sposuitenavdatasource.loaddata @ sposuitenavdatasource.ts:41suitenavmanager._loadsuitenavfromserver @ suitenavmanager.ts:153suitenavmanager._getsuitenavmodel @ suitenavmanager.ts:129suitenavmanager.loadsuitenav @ suitenavmanager.ts:106(anonymous function) @ shell.ts:164shell._startapplication @ shell.ts:145shell.start @ shell.ts:141(anonymous function) @ spmoduleloader.ts:178 fetchprovider.ts:30 https://softwares-macbook-pro.local:4321/sites/workbench/_api/web/getclientsidewebparts 404 (not found)fetchprovider.fetch @ fetchprovider.ts:30basichttpclient.fetchcore @ basichttpclient.ts:68httpclient._fetchwithinstrumentation @ httpclient.ts:183httpclient.fetch @ httpclient.ts:141httpclient.get @ httpclient.ts:154(anonymous function) @ clientsidewebpartmanager.ts:335servicescope.whenfinished @ servicescope.ts:174(anonymous function) @ clientsidewebpartmanager.ts:333clientsidewebpartmanager.fetchwebparts @ clientsidewebpartmanager.ts:327canvasstore._fetchwebparts @ canvasstore.ts:509canvasstore @ canvasstore.ts:93canvas @ canvas.ts:59page.componentdidmount @ page.tsx:28target.(anonymous function) @ index.js:153notifyall @ react.js:869close @ react.js:12870closeall @ react.js:15699perform @ react.js:15646batchedmountcomponentintonode @ react.js:10882perform @ react.js:15633batchedupdates @ react.js:8456batchedupdates @ react.js:13706_rendernewrootcomponent @ react.js:11076reactmount__rendernewrootcomponent @ react.js:12353_rendersubtreeintocontainer @ react.js:11150render @ react.js:11170react_render @ react.js:12353spwebpartworkbench.onrender @ spwebpartworkbench.tsx:44clientsideapplication.render @ clientsideapplication.ts:83(anonymous function) @ shell.ts:165shell._startapplication @ shell.ts:145shell.start @ shell.ts:141(anonymous function) @ spmoduleloader.ts:178 tracelogger.ts:147 [suitenavmanager] suitenavmanager loaddata failed retrieve spo suitenavdata tracelogger.ts:145 [clientsidewebpartmanager] syntaxerror: unexpected token c in json @ position 0tracelogger._writetoconsole @ tracelogger.ts:145tracelogger._log @ tracelogger.ts:117tracelogger.logerror @ tracelogger.ts:42(anonymous function) @ clientsidewebpartmanager.ts:355 tracelogger.ts:147 [clientsidewebpartmanager] loaded modules webpart 7fb7d3c1-c91b-4038-8e2b-2c7dc5376161 tracelogger.ts:147 [baseclientsidewebpart] constructed web part: 568966e1-6496-4915-927f-ce874bbe7d27 onpremsuitenavdatasource.ts:65 uncaught (in promise) error: failed retrieve hybrid suitenavdata(…)onpremsuitenavdatasource._logandthrowsuitenavloadingerror @ onpremsuitenavdatasource.ts:65(anonymous function) @ onpremsuitenavdatasource.ts:45 beacon.js:372 beacon: logged userengagement properties: {"engagementname":"sppages.spthemeprovider.loaddata.start","properties":"{\"appver\":\"\"}","duration":0,"logtype":0,"clienttime":1478836974552,"source":"clientv2reliability"}

without specifying attribute aurelia-app, loads default app.html , app.js. you'd want change to:

<div aurelia-app="main"> 

so loads main.js , starts aurelia.

here's link documentation bootstrapping aurelia.