I am creating a Sharepoint framework web part and I am trying to use Aurelia as my JavaScript infrastructure.
I basically created the web part of the Sharepoint structure, which when created with Yoman creates this structure.
Then my files (just a welcome world):
app.html
<template> ${message} </template>
app.js
export class App { message = 'hello world'; }
main.ts
import {Aurelia} from '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 the helloworld web part:
import { BaseClientSideWebPart, IPropertyPaneSettings, IWebPartContext, PropertyPaneTextField } from '@microsoft/sp-client-preview'; import styles from './HelloWorld.module.scss'; import * as strings from 'helloWorldStrings'; import { IHelloWorldWebPartProps } from './IHelloWorldWebPartProps'; import { configure } from './main'; import * as systemjs from 'systemjs'; import {Aurelia} from '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 get propertyPaneSettings(): IPropertyPaneSettings { return { pages: [ { header: { description: strings.PropertyPaneDescription }, groups: [ { groupName: strings.BasicGroupName, groupFields: [ PropertyPaneTextField('description', { label: strings.DescriptionFieldLabel }) ] } ] } ] }; } }
The code displays HTML on the page, but without a message.
I do not see errors in the browser console.
I installed Aurelia with NPM no jspm. Running gulp serve does not show compilation errors.
I also created the typing file "aurelia.d.ts" in the typing subfolder.
I think my main problem is index.html, since it refers to 2 JavaScript files, but I'm not sure how to link them, because they are in the NPM modules folder, and I don't think that they are deployed when executed gulp serve .
And by the way, here is my 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 the console:
FetchProvider.ts: 30 GET 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 @ function. Shell1start @ Shell.start @ Shell.start @ function. Shell_start @ Shell.start @ Shell.start @ function. Shell SPModuleLoader.ts: 178 TraceLogger.ts: 147 [OnPremSuiteNavDataSource] Failed to get Hybrid SuiteNavData TraceLogger.ts: 147 [SuiteNavManager] SuiteNavManager loadData Failed to get 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 GET 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 @ Service.Scenery @ Service.Scope.WebFunction4 @ ServicePerfect ts: 333ClientSideWebPartManager.fetchWebParts @ ClientSideWebPartManager.ts: 327CanvasStore._fetchWebParts @ CanvasStore.ts: 509CanvasStore @ CanvasStore.ts: 93Canvas @ Canvas.ts: 59Page.componentDidMount @ Page.x: 28. (Anonymous function) @ index.js: 153notifyAll @ react.js: 869close @ react.js: 12870closeAll @ react.js: 15699perform @ react.js: 15646batchedMountComponentIntoNode @ react.js: 10882perform @ react.js: 15633batchedUp : 8456batchedUpdates @ react.js: 13706_renderNewRootComponent @ react.js: 11076ReactMount__renderNewRootComponent @ response.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] Error loading SuiteNavManager for extracting SPO SuiteNavData TraceLogger.ts: 145 [ClientSideWebPartManager] SyntaxError: Unexpected C token in JSON on position 0TraceLogger._writeToConsole @ TraceLogger.ts: 145TraceLogger._log @ TraceLogger.ts: 117TraceLogger.logError @ TraceLogger.ts: 42 (anonymously function) @ ClientSideWebPartManager.ts: 355 TraceLogger.tsWebManager [141] [Successfully] parts 7fb7d3c1-c91b-4038-8e2b-2c7dc5376161 TraceLogger.ts: 147 [BaseClientSideWebPart] Created web part: 568966e1-6496-4915-927f-ce874bbe7d27 OnPremSuiteNavDataSource.No failed: failed to receive: 65 failed to receive: ...) OnPremSuiteNavDataSource._logAndThrowSuiteNavLoadingError @ OnPremSuiteNavDataSource.ts: 65 (anonymous function) @ OnPremSuiteNavDataSource.ts: 45 Beacon.js: 372 Beacon: Recorded UserEngagement with properties: {"EngagePameNames "Properties": "{\" appver \ ": \" \ "}", "Duration": 0, "LOGTYPE": 0, "ClientTime": 1478836974552, "Source": "ClientV2Reliability"}
