Salesforce and Angular 2

Question

I have something like this in my visualforce I need to pass vars to my component because all files are in the Static Resource.

which is the correct way?

var opp="{!opportunity}";
var resource="{!URLFOR($Resource.components,'app/')}";

System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/main')
        .then(null, console.error.bind(console));

Static Resource app/main.ts

import { bootstrap }    from 'angular2/platform/browser';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

Static Resource app/app.component.ts

import { Component } from 'angular2/core';
@Component({
           selector: 'pm-app',
           templateUrl: 'app/app.component.html',
           })
export class AppComponent {
/* I NEED VALUES HERE*/    
opp: string = '';
}

Answer 1

Angualar 2 is mostly written using Typescript which needs to be transpiled to Javascript before it can run inside your browser.

You cannot create typescript static resources and reference them from a VF page as your browser will not understand it.

Have a look at these tutorials how to work with angular 2 using your VF page as a container. running Angular 2 inside VF page tutorial

Answer 2

No need of using static resource. Use salesforce component for you javascript code and visualforce page for template...it will work with all available salesforce controllers data.