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/')}";

    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
        .then(null, console.error.bind(console));

Static Resource app/main.ts

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

Static Resource app/app.component.ts

import { Component } from 'angular2/core';
           selector: 'pm-app',
           templateUrl: 'app/app.component.html',
export class AppComponent {
opp: string = '';
  • may be wrapping in anonymous self executing function .The merge fields can be stored in window global variables Commented Apr 15, 2016 at 4:29
  • What you want is how to reference properly a static resource in a Visualforce page?
    – MANUELAN00
    Commented Apr 15, 2016 at 4:35

2 Answers 2


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


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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .