Aurelia应用程序“ Hello World”根本不起作用

我正在创建一个Sharepoint框架Webpart，并且尝试使用Aurelia作为我的JavaScript框架。

基本上，我创建了一个Sharepoint框架Web部件，使用Yeoman创建该Web部件时，将创建此文件夹结构。

然后是我的文件（只是一个简单的问候世界）：

app.html

<template>
  ${message}
</template>

app.js

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

主要

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>

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

该代码在页面中呈现HTML，但没有消息。

我在浏览器控制台中看不到任何错误。

我安装了Nure no jspm的Aurelia。执行gulp serve不会显示任何编译错误。

我还在类型子文件夹中创建了类型文件“ aurelia.d.ts”。

我认为我的主要问题是在index.html中，因为它引用了2个JavaScript文件，但是由于它们位于NPM modules文件夹中，因此我不知道如何引用它们，并且我认为它们在部署时不会部署在做gulp serve。

顺便说一下，这是我的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"
  }
}

控制台中的错误：

FetchProvider.ts：30 GET https：//softwares-macbook-pro.local：4321 / sites / workbench / _api / Microsoft.SharePoint.Portal.SuiteNavData.GetSuiteNavData？v = 2＆Locale = undefined404（未找到）FetchProvider.fetch @ FetchProvider.ts：30BasicHttpClient.fetchCore @ BasicHttpClient.ts：68HttpClient._fetchWithInstrumentation @ HttpClient.ts：183HttpClient.fetch @ HttpClient.ts：141HttpClient.get @ HttpClient.ts：154OnPremSuiteNavDataSource.DataData @Data .ts：42SuiteNavManager._loadSuiteNavFromServer @ SuiteNavManager.ts：148SuiteNavManager._getSuiteNavModel @ SuiteNavManager.ts：129SuiteNavManager.loadSuiteNav @ SuiteNavManager.ts：106（匿名函数）@ Shell.ts：164Shell._startApplication @ Shell.ts：145Shell.start @ Shell .ts：141（匿名函数）@ SPModuleLoader.ts：178 TraceLogger.ts：147 [OnPremSuiteNavDataSource]无法检索混合SuiteNavData TraceLogger.ts：147 [SuiteNavManager] SuiteNavManager loadData无法检索混合SuiteNavData FetchProvider.ts：30 POSThttps：//softwares-macbook-pro.local：4321 / sites / workbench / _api / contextinfo 405（不允许使用方法）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（匿名函数） ：164Shell._startApplication @ Shell.ts：145Shell.start @ Shell.ts：141（匿名函数）@ SPModuleLoader.ts：178 FetchProvider.ts：30 GET https：//softwares-macbook-pro.local：4321 / sites /工作台/ _api / web / GetClientSideWebParts404（未找到）FetchProvider.fetch @ FetchProvider.ts：30BasicHttpClient.fetchCore @ BasicHttpClient.ts：68HttpClient._fetchWithInstrumentation @ HttpClient.ts：183HttpClient.fetch @ HttpClient.ts：141HttpClient.get @ HttpClient.ts：154（匿名函数） @ ClientSideWebPartManager.ts：335ServiceScope.whennished @ ServiceScope.ts：174（匿名函数）@ ClientSideWebPartManager.ts：333ClientSideWebPartManager.fetchWebParts @ ClientSideWebPartManager.ts：327CanvasStore._fetchWebParts @ CanvasStore.ts：509CanvasStore @ CanvasStore.ts.93Canvas ：59Page.componentDidMount @ Page.tsx：28target。（匿名函数）@ index.js：153notifyAll @ react.js：869close @ react.js：12870closeAll @ react.js：15699perform @ react.js：15646batchedMountComponentIntoNode @ react.js： 10882执行@ 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：44ClientSide.Applicationx（ts：44.ClientClient ）@ Shell.ts：165Shell._startApplication @ Shell.ts：145Shell.start @ Shell.ts：141（匿名函数）@ SPModuleLoader.ts：178 TraceLogger.ts：147 [SuiteNavManager] SuiteNavManager loadData无法检索SPO SuiteNavData TraceLogger。 ts：145 [ClientSideWebPartManager]语法错误：JSON中的意外令牌C在位置0TraceLogger._writeToConsole @ TraceLogger.ts：145TraceLogger._log @ TraceLogger.ts：117TraceLogger.logError @ TraceLogger.ts：42（匿名函数）@ ClientSideWebPartManager.ts：355 TraceLogger.ts：147 [ClientSideWebPartManager]成功加载了Webpart 7fb7d3c1-c91b-4038-8e2b-2c7dc5376161 TraceLogger.ts：147 [BaseClientSideWebPart]构造的Web部件：568966e1-6496-4915-927f-ce874bbe7d27 OnPremSuiteNavDataSource.ts：65错误（未捕获） ：无法检索混合SuiteNavData（…）OnPremSuiteNavDataSource._logAndThrowSuiteNavLoadingError @ OnPremSuiteNavDataSource.ts：65（匿名函数）@ OnPremSuiteNavDataSource.ts：45 Beacon.js：372信标：已记录到具有属性：{“ EngagementProviderSP”的UserEngagement。 .loadData.Start“，” Properties“：” {\“ appver \”：\“ \”}“，” Duration“：0，” LogType“：0，” ClientTime“：1478836974552，” Source“：” ClientV2Reliability“ }}}147 [BaseClientSideWebPart]构造的Web部件：568966e1-6496-4915-927f-ce874bbe7d27 OnPremSuiteNavDataSource.ts：65未捕获（承诺）错误：无法检索混合SuiteNavData（…）OnPremSuiteNavDataSource._logAndThrowSuiteNavLoadingError @ OnPremSuiteNavDatats（65）。 @ OnPremSuiteNavDataSource.ts：45 Beacon.js：372信标：使用以下属性登录到UserEngagement：{“ EngagementName”：“ SPPages.SPThemeProvider.loadData.Start”，“ Properties”：“ {\” appver \“：\\\\” }“，” Duration“：0，” LogType“：0，” ClientTime“：1478836974552，” Source“：” ClientV2Reliability“}147 [BaseClientSideWebPart]构造的Web部件：568966e1-6496-4915-927f-ce874bbe7d27 OnPremSuiteNavDataSource.ts：65未捕获（承诺）错误：无法检索混合SuiteNavData（…）OnPremSuiteNavDataSource._logAndThrowSuiteNavLoadingError @ OnPremSuiteNavDatats（65）。 @ OnPremSuiteNavDataSource.ts：45 Beacon.js：372信标：使用以下属性登录到UserEngagement：{“ EngagementName”：“ SPPages.SPThemeProvider.loadData.Start”，“ Properties”：“ {\” appver \“：\\\\” }“，” Duration“：0，” LogType“：0，” ClientTime“：1478836974552，” Source“：” ClientV2Reliability“}无法检索混合SuiteNavData（…）OnPremSuiteNavDataSource._logAndThrowSuiteNavLoadingError @ OnPremSuiteNavDataSource.ts：65（匿名函数）@ OnPremSuiteNavDataSource.ts：45 Beacon.js：372信标：已记录到具有属性：{“ EngagementName.SP”的UserEngagement。 loadData.Start“，” Properties“：” {\“ appver \”：\“ \”}“，” Duration“：0，” LogType“：0，” ClientTime“：1478836974552，” Source“：” ClientV2Reliability“}无法检索混合SuiteNavData（…）OnPremSuiteNavDataSource._logAndThrowSuiteNavLoadingError @ OnPremSuiteNavDataSource.ts：65（匿名函数）@ OnPremSuiteNavDataSource.ts：45 Beacon.js：372信标：已记录到具有属性：{“ EngagementName.SP”的UserEngagement。 loadData.Start“，” Properties“：” {\“ appver \”：\“ \”}“，” Duration“：0，” LogType“：0，” ClientTime“：1478836974552，” Source“：” ClientV2Reliability“}\“ \”}“，”持续时间“：0，” LogType“：0，” ClientTime“：1478836974552，” Source“：” ClientV2Reliability“}\“ \”}“，”持续时间“：0，” LogType“：0，” ClientTime“：1478836974552，” Source“：” ClientV2Reliability“}