Aplikacja Aurelia "Hello World" w ogóle nie działa

Question

Tworzę webpart programu Sharepoint i próbuję użyć Aurelia jako mojej struktury JavaScript.

Zasadniczo stworzyłem webpart programu Sharepoint, który po utworzeniu z Yeomanem tworzy ten folder structure.

Wtedy moje pliki (tylko proste 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()); 
} 

indeks .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> 

A webpart helloworld:

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 
       }) 
       ] 
      } 
      ] 
     } 
     ] 
    }; 
    } 
} 

Kod renderuje HTML na stronie, ale bez wiadomości.

Nie widzę żadnego błędu w konsoli przeglądarki.

Zainstalowałem Aurelia z NPM bez jspm. Wykonywanie gulp serve nie pokazuje żadnego błędu kompilacji.

Utworzyłem także plik typograficzny "aurelia.d.ts" w podfolderze typings.

Myślę, że moim głównym problemem jest index.html, ponieważ ma odniesienie do 2 plików JavaScript, ale nie jestem pewien, jak się do nich odwoływać, ponieważ znajdują się w folderze modułów NPM i nie sądzę są wdrażane podczas wykonywania gulp serve.

A tak przy okazji, oto moja 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" 
    } 
} 

Błędy w konsoli:

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"}

Answer 1

Bez określania atrybutu do aurelia-app, ładuje przez domyślne app.html i app.js. Więc czego chcesz zrobić, to zmienić go do:

<div aurelia-app="main"> 

tak, że obciążenia main.js i faktycznie rozpoczyna Aurelia.

Here's a link to the documentation o ładowaniu aureli.