Aurelia app “Hello World” not working at all

I am creating a Sharepoint framework webpart, and I am trying to use Aurelia as my JavaScript framework.

Basically I created a Sharepoint framework webpart, which when created with Yeoman, creates this folder structure.

  • Observe property on an array of objects for any changes
  • error when loading aurelia-validation plugin
  • Improving performance of Aurelia framework on mobile devices
  • How to inject dependencies in Aurelia without using ES6 class feature
  • Convert ES6 Class with Symbols to JSON
  • Aurelia: accessing Custom Element's custom functions or custom attributes
  • Then my files (just a simple hello 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 webpart:

    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 renders the HTML in the page, but without the message.

    I don’t see any error in the browser console.

    I installed Aurelia with NPM no jspm. Executing gulp serve does not show any compilation error.

    I also created a typings file “aurelia.d.ts” in the typings subfolder.

    I think that my main problem is in the index.html, as it has a reference to 2 JavaScript files, but I am not sure how to reference them because they are inside the NPM modules folder and I don’t think they are deployed when doing gulp serve.

    And by the way, here’s 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 @
    Shell.ts:141(anonymous function) @ SPModuleLoader.ts:178
    TraceLogger.ts:147 [OnPremSuiteNavDataSource] Failed to retrieve
    Hybrid SuiteNavData TraceLogger.ts:147 [SuiteNavManager]
    SuiteNavManager loadData Failed to 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 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 @
    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
    to retrieve SPO SuiteNavData TraceLogger.ts:145
    [ClientSideWebPartManager] SyntaxError: Unexpected token C in JSON at
    position 0TraceLogger._writeToConsole @
    TraceLogger.ts:145TraceLogger._log @
    TraceLogger.ts:117TraceLogger.logError @ TraceLogger.ts:42(anonymous
    function) @ ClientSideWebPartManager.ts:355 TraceLogger.ts:147
    [ClientSideWebPartManager] Successfully loaded modules for 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 to retrieve Hybrid
    SuiteNavData(…)OnPremSuiteNavDataSource._logAndThrowSuiteNavLoadingError
    @ OnPremSuiteNavDataSource.ts:65(anonymous function) @
    OnPremSuiteNavDataSource.ts:45 Beacon.js:372 Beacon: Logged to
    UserEngagement with properties:
    {“EngagementName”:”SPPages.SPThemeProvider.loadData.Start”,”Properties”:”{\”appver\”:\”\”}”,”Duration”:0,”LogType”:0,”ClientTime”:1478836974552,”Source”:”ClientV2Reliability”}

    enter image description here

  • How to force binding re-evaluate or re-rendering in Aurelia
  • aurelia-fetch-client.d.ts undefined symbols
  • Get access to Aurelia's Dependency Injection system without constructor injection
  • How to render linebreaks as <br> tags with Aurelia
  • <require> inside a globalResource component called with enhance in Aurelia
  • Aurelia attached triggers before repeat.for
  • One Solution collect form web for “Aurelia app “Hello World” not working at all”

    Without specifying an attribute to the aurelia-app, it loads by default app.html and app.js. So what you’d want to do is change it to:

    <div aurelia-app="main">
    

    So that loads main.js and actually starts aurelia.

    Here’s a link to the documentation about bootstrapping aurelia.