Aurelia应用程序“Hello World”根本不工作
我正在创build一个Sharepoint框架webpart，我正在尝试使用Aurelia作为我的JavaScript框架。
基本上我创build了一个Sharepoint框架webpart，当用Yeoman创build时，创build这个文件夹结构 。
然后我的文件（只是一个简单的问候世界）：
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，但没有消息。
我在浏览器控制台中看不到任何错误。
我使用NPM安装了Aurelia，没有jspm。 执行gulp serve不会显示任何编译错误。
我还在typings子文件夹中创build了一个打印文件“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 / 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（匿名函数）@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 / 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（匿名函数）@Shell.ts：164Shell._startApplication @ Shell.ts：145Shell.start @Shell.ts：141（匿名函数）@ 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（匿名函数）@ClientSideW ebPartManager.ts：335ServiceScope.whenFinished @ ServiceScope.ts：174（匿名函数）@ ClientSideWebPartManager.ts：333ClientSideWebPartManager.fetchWebParts @ ClientSideWebPartManager.ts：327CanvasStore._fetchWebParts @ CanvasStore.ts：509CanvasStore @ CanvasStore.ts：93Canvas @ Canvas.ts： 59.com.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（匿名函数）@Shell.ts：165Shell._startApplication @ Shell.ts：145Shell.start @Shell.ts：141（anon ymous函数）@ SPModuleLoader.ts：178 TraceLogger.ts：147 [SuiteNavManager] SuiteNavManager loadData无法检索SPO SuiteNavData TraceLogger.ts：145 [ClientSideWebPartManager] SyntaxError：位置0的JSON中的意外标记CTraceLogger._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]构build的Web部件：568966e1-6496-4915-927f-ce874bbe7d27 OnPremSuiteNavDataSource.ts：65未捕获（承诺）错误：无法检索混合SuiteNavData（…）OnPremSuiteNavDataSource._logAndThrowSuiteNavLoadingError @ OnPremSuiteNavDataSource.ts：65（anonymous函数）@ OnPremSuiteNavDataSource.ts：45 Beacon.js：372信标：logging到UserEngagement的属性：{“EngagementName”：“SPPages.SPThemeProvider.load Data.Start”， “属性”： “{\” appver \ “：\” \ “}”， “持续时间”：0， “日志types”：0， “ClientTime”：1478836974552， “源”： “ClientV2Reliability”}
如果不指定app.html aurelia-app的属性，它会默认加载app.html和app.html 所以你想要做的是改变它：
<div aurelia-app="main">
所以加载main.js ，实际上启动aurelia。
这里是关于引导aurelia 文档的链接 。