CODEWITHSUNDEEP
aurelia
stackdave
stackdave

Reputation: 7054

Aurelia quick start or my first app Hello World - No view model found error, 2017

After doing some small apps in angular2 and reactjs, it's my first try with Aurelia. I have an error in my first app following the Quick Start and just updating the app to show a "hello world":

http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/quick-start/1

I've got an error:

Uncaught (in promise) Error: No view model found in module "src/app". at aurelia-core.min.js:7

any idea what is happing? the error is not clear for me; aurelia manage well the error messages?

"View model" means html template file?

/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Aurelia</title>
  </head>
  <body aurelia-app="src/main">
    <script src="scripts/system.js"></script>
    <script src="scripts/config-typescript.js"></script>
    <script src="scripts/aurelia-core.min.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

/src/main.ts

import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  aurelia.use.basicConfiguration();
  aurelia.start().then(() => aurelia.setRoot());
}

UPDATED: the error was app.ts was app.ts was empty !

/src/app.ts

export class App {
    heading = "Hello World";

}

/src/app.html

<template>
  <h1>${heading}</h1>
</template>

folder structure with the files in app folder added to quick start skeleton

Upvotes: 0

Views: 900

Answers (1)

stackdave
stackdave

Reputation: 7054

The error was my app.ts was empty , it's produced "No view model found"

On the index.html we bootstrap the app trough main.js or main.ts file (if we are using typescript)

/src/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Aurelia</title>
  </head>
  <body aurelia-app="src/main">  <!-- Bootstrap here --> 
    <script src="scripts/system.js"></script>
    <script src="scripts/config-typescript.js"></script>
    <script src="scripts/aurelia-core.min.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

Aurelia have a convention. It tries to find app.js or app.ts and load it as the root module.

/src/app.ts

export class App {
    heading = "Hello World";
}

Upvotes: 1

Related Questions