javascript - node - La aplicación de Aurelia "Hello World" no funciona en absoluto

typescript setup

Question

Estoy creando un sitio web del marco Sharepoint, y estoy tratando de usar Aurelia como mi marco de JavaScript.

Básicamente, creé una webpart de Sharepoint framework, que cuando se crea con Yeoman, crea esta estructura de carpetas .

Entonces mis archivos (solo un simple hola mundo):

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>

Y la parte web de 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
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

El código representa el HTML en la página, pero sin el mensaje.

No veo ningún error en la consola del navegador.

Instalé Aurelia con NPM no jspm. La ejecución de gulp serve no muestra ningún error de compilación.

También creé un archivo de typings "aurelia.d.ts" en la subcarpeta de typings.

Creo que mi problema principal está en index.html, ya que tiene una referencia a 2 archivos JavaScript, pero no estoy seguro de cómo hacer referencia a ellos porque están dentro de la carpeta de módulos de NPM y no creo que se desplieguen cuando haciendo gulp serve .

Y por cierto, aquí está mi 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"
  }
}

Errores en la consola:

FetchProvider.ts: 30 GET https: //softwares-macbook-pro.local: 4321 / sites / workbench / _api / Microsoft.SharePoint.Portal.SuiteNavData.GetSuiteNavData? V = 2 & Locale = undefined 404 (No encontrado) 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 (función anónima) @ Shell.ts: 164Shell._startApplication @ Shell.ts: 145Shell.start @ Shell.ts: 141 (función anónima) @ SPModuleLoader.ts: 178 TraceLogger.ts: 147 [OnPremSuiteNavDataSource] Error al recuperar Hybrid SuiteNavData TraceLogger.ts: 147 [SuiteNavManager] SuiteNavManager loadData Error al recuperar Hybrid SuiteNavData FetchProvider.ts: 30 POST https: // s oftwares-macbook-pro.local: 4321 / sites / workbench / _api / contextinfo 405 (Método no permitido) 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 (función anónima) @ Shell.ts: 164Shell._startApplication @ Shell.ts: 145Shell.start @ Shell.ts: 141 (función anónima) @ SPModuleLoader.ts: 178 FetchProvider.ts: 30 GET https: //softwares-macbook-pro.local: 4321 / sites / workbench / _api / web / GetClientSideWebParts 404 (No encontrado) FetchProvider.fetch @ FetchProvider.ts: 30BasicHttpClient.fetchCore @ BasicHttpClient.ts: 68HttpClient._fetchWithInstrumentation @ HttpClient.ts: 183HttpClient.fetch @ HttpClient.ts: 141HttpClient.get @ HttpClient.ts: 154 ( función anónima) @ ClientSideW ebPartManager.ts: 335ServiceScope.whenFinished @ ServiceScope.ts: 174 (función anónima) @ ClientSideWebPartManager.ts: 333ClientSideWebPartManager.fetchWebParts @ ClientSideWebPartManager.ts: 327CanvasStore._fetchWebParts @ CanvasStore.ts: 509CanvasStore @ CanvasStore.ts: 93Canvas @ Canvas.ts: 59Page.componentDidMount @ Page.tsx: 28objetivo. (Función anónima) @ index.js: 153notifyAll @reactiva.js: 869close @reactivar.js: 12870closeAll @reactivar.js: 15699performación @reactiva.js: 15646batchedMountComponentIntoNode @reactiva.js: 10882perform @reactivar.js: 15633batchedUpdates @reactivar.js: 8456batchedUpdates @reactivar.js: 13706_renderNewRootComponent @reactivar.js: 11076ReactMount__renderNewRootComponent @reactivar.js: 12353_renderSubtreeIntoContainer @reactivar.js: 11150render @reactivar.js: 11170React_render @reactivar.js: 12353SpWebpartWorkbench.onRender @ spWebpartWorkbench.tsx: 44ClientSideApplication.render @ ClientSideApplication.ts: 83 (función anónima) @ Shell.ts: 165Shell._startApplication @ Shell.ts: 145Shell.start @ Shell.ts: 141 (anon ymous function) @ SPModuleLoader.ts: 178 TraceLogger.ts: 147 [SuiteNavManager] SuiteNavManager loadData Error al recuperar SPO SuiteNavData TraceLogger.ts: 145 [ClientSideWebPartManager] SyntaxError: Token inesperado C en JSON en la posición 0TraceLogger._writeToConsole @ TraceLogger.ts: 145TraceLogger ._log @ TraceLogger.ts: 117TraceLogger.logError @ TraceLogger.ts: 42 (función anónima) @ ClientSideWebPartManager.ts: 355 TraceLogger.ts: 147 [ClientSideWebPartManager] Módulos cargados con éxito para webpart 7fb7d3c1-c91b-4038-8e2b-2c7dc5376161 TraceLogger. ts: 147 [BaseClientSideWebPart] Parte web construida: 568966e1-6496-4915-927f-ce874bbe7d27 OnPremSuiteNavDataSource.ts: 65 Error no detectado (en promesa): Error al recuperar Hybrid SuiteNavData (...) OnPremSuiteNavDataSource._logAndThrowSuiteNavLoadingError @ OnPremSuiteNavDataSource.ts: 65 (anonymous función) @ OnPremSuiteNavDataSource.ts: 45 Beacon.js: 372 Beacon: Ha iniciado sesión en UserEngagement con propiedades: {"EngagementName": "SPPages.SPThemeProvider.load" Data.Start "," Properties ":" {/ "appver /": / "/"} "," Duración ": 0," LogType ": 0," ClientTime ": 1478836974552," Fuente ":" ClientV2Reliability "}

Answer 1

Sin especificar un atributo para la aurelia-app , se carga de forma predeterminada app.html y app.html Entonces, lo que querrías hacer es cambiarlo a:

<div aurelia-app="main">

Entonces eso carga main.js y de hecho comienza aurelia.

Aquí hay un enlace a la documentación sobre el arranque de Aurelia.