-1

I am developing an Angular app with Nodejs and gulp. I have wrote my TypeScript file in client folder and my gulp task complete those file and place them in public folder.

Here is my components.ts file:

import {Component, View} from 'angular2/angular2';
import {FormBuilder,  formDirectives } from 'angular2/forms';
@Component({
  selector: 'login',
  injectables: [FormBuilder]
})
@View({
  templateUrl: '/scripts/src/components/login/login.html',
  directives: [formDirectives]
})

export class login {

}

here is my bootstrap file:

import {bootstrap} from 'angular2/angular2';

import {login} from './components/login/login';

bootstrap(login);

Here is my index.html:

<!doctype HTML>
<html>

<head>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.27/router.dev.js"></script>

</head>

<body>
    <div class="container">
        <login></login>
    </div>
    <script>
        System.import('scripts/src/bootstrap');
    </script>
</body>

</html>

Here is my server.js file setting which lies in app folder

app.use(express.static(path.join(__dirname, '../public')));

But when I load my app in browser, I am unable to load the template.

enter image description here

Here is my file structure:

enter image description here

Rhushikesh
  • 3,630
  • 8
  • 45
  • 82

2 Answers2

0

Few Errors that i have found in your coding is listed below:

  1. First of all your imports is incorrect you may refer to this question for all Updated Imports for angular2 Beta. https://stackoverflow.com/a/34354666/5043867
  2. Formdirectives has been changed to FORM_DIRECTIVES.
  3. your Path is not proper i think for the login.html file from the bootstraped file.

and most importantly ANgular2 is in beta now you are still using alpha26(which is too old now).

Community
  • 1
  • 1
Pardeep Jain
  • 84,110
  • 37
  • 165
  • 215
  • i have made the changes you suggested but it still giving me error please ans my que http://stackoverflow.com/questions/34702643/angular2-not-working-giving-error – Rhushikesh Jan 10 '16 at 06:14
  • you can modify this question instead of posting new question. by the way i check my comments on you question hope that will make your app run. – Pardeep Jain Jan 10 '16 at 07:41
0

Use template and not templateUrl. Some thing like template: require( './login.html )

As others have mentioned, you should be using Beta 1, as people will be more inclined to answer questions.

HTH

Tim McNamara
  • 1,368
  • 2
  • 10
  • 11
  • may i know why not to use `templateUrl` and why you gave priority to template over templateUrl ? is there any specific reason behind this ? – Pardeep Jain Jan 10 '16 at 05:30
  • to use require do i need to add require js – Rhushikesh Jan 10 '16 at 05:40
  • i don't think there is need to use require syntax as mentioned by @timMcNamara , instead we have simple syntax TemplateUrl then why to use require, – Pardeep Jain Jan 10 '16 at 07:45
  • You can use `templateUrl` but why would you want to use `http` to load a file that is located locally. Also, `templateUrl` uses relative paths when uses as has been done by the OP. Using `require('./login.html')` allows you to pull from a file, otherwise angular2 will try interpret `'./login.html'` as html. – Tim McNamara Jan 10 '16 at 08:12