Aurelia app"Hello World"根本不工作

Question

我正在创建一个Sharepoint框架webpart,我正在尝试使用Aurelia作为我的JavaScript框架.

基本上我创建了一个Sharepoint框架webpart,当它与Yeoman一起创建时,创建了这个文件夹结构.

然后我的文件(只是一个简单的问候世界):

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>

和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,但没有消息.

我没有在浏览器控制台中看到任何错误.

我安装了Aurelia与NPM没有jspm.执行gulp serve不显示任何编译错误.

我还在typings子文件夹中创建了一个打字文件"aurelia.d.ts".

我认为我的主要问题在于index.html,因为它引用了2个JavaScript文件,但我不确定如何引用它们,因为它们位于NPM模块文件夹中,我不认为它们是在部署时做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 /位点/工作台/ _api/Microsoft.SharePoint.Portal.SuiteNavData.GetSuiteNavData V = 2&地点=未定义 404(未找到)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(匿名功能)@ Shell.ts:164Shell._startApplication @ Shell.ts:145Shell.start @ Shell.ts:141(匿名功能)@ SPModuleLoader.ts:178 TraceLogger.ts:147 [OnPremSuiteNavDataSource]无法检索Hybrid SuiteNavData TraceLogger.ts:147 [SuiteNavManager] SuiteNavManager loadData无法检索Hybrid SuiteNavData FetchProvider.ts:30 POST https:// s oftwares-的MacBook-pro.local:4321 /网站/工作台/ _api/contextinfo 405(不允许的方法)FetchProvider.fetch @ FetchProvider.ts:30DigestCache.fetchDigest @ DigestCache.ts:73HttpClient.fetch @ HttpClient.ts:129HttpClient.post @ HttpClient.ts:166SPOSuiteNavDataSource.loadData @SPOSuiteNavDataSource.ts:41SuiteNavManager._loadSuiteNavFromServer @ SuiteNavManager.ts:153SuiteNavManager._getSuiteNavModel @ SuiteNavManager.ts:129SuiteNavManager.loadSuiteNav @ SuiteNavManager.ts:106(匿名函数)@Shell.ts:164Shell._startApplication @ Shell.ts:144Shell.start @Shell.ts:141(匿名函数)@SPModuleLoader.ts:178 FetchProvider.ts:30 GET https://softwares-macbook-pro.local:4321/sites/workbench/_api/web/GetClientSideWebParts 404(未找到)FetchProvider.fetch @ FetchProvider.ts:30BasicHttpClient.fetchCore @ BasicHttpClient.ts:68HttpClient._fetchWithInstrumentation @ HttpClient.ts:183HttpClient.fetch @ HttpClient.ts:141HttpClient.get @ HttpClient.ts:154((匿名函数)@ ClientSideW ebPartManager.ts:333ServiceScope.whenFinished @ ServiceScope.ts:174(匿名函数)@ ClientSideWebPartManager.ts:333ClientSideWebPartManager.fetchWebParts @ ClientSideWebPartManager.ts:327CanvasStore._fetchWebParts @ CanvasStore.ts:509CanvasStore @ CanvasStore.ts:93Canvas @ Canvas.ts: 59Page.componentDidMount @ Page.tsx:28target(匿名功能)@ 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(匿名函数)@Shell.ts:165Shell._startApplication @Shell.ts:145Shell.start @ Shell.ts:141(onon)ymous功能)@ SPModuleLoader.ts:178个TraceLogger.ts:147 [SuiteNavManager] SuiteNavManager loadData无法检索SPO SuiteNavData TraceLogger.ts:145 [ClientSideWebPartManager]语法错误:在位置0TraceLogger._writeToConsole @ TraceLogger.ts在JSON意外标记C:145TraceLogger ._log @ TraceLogger.ts:117TraceLogger.logError @ TraceLogger.ts:42(匿名功能)@ ClientSideWebPartManager.ts:355个TraceLogger.ts:147 [ClientSideWebPartManager用于web部件7fb7d3c1-c91b-4038-8e2b-2c7dc5376161 TraceLogger成功加载的模块. ts:147 [BaseClientSideWebPart]构造的Web部件:568966e1-6496-4915-927f-ce874bbe7d27 OnPremSuiteNavDataSource.ts:65未捕获(在承诺中)错误:无法检索Hybrid SuiteNavData(...)OnPremSuiteNavDataSource._logAndThrowSuiteNavLoadingError @ OnPremSuiteNavDataSource.ts:65(匿名函数)@ OnPremSuiteNavDataSource.ts:45 Beacon.js:372信标:使用属性登录到UserEngagement:{"EngagementName":"SPPages.SPThemeProvider.load Data.Start", "属性": "{\" appver\":\"\"}", "持续时间":0, "日志类型":0, "ClientTime":1478836974552, "源": "ClientV2Reliability"}

Answer 1

如果不指定 的属性aurelia-app，它将默认加载app.html和app.js。所以你想要做的就是将其更改为：

<div aurelia-app="main">

这样就加载main.js并实际启动了 aurelia。

这是有关引导 aurelia 的文档的链接。