pbastowski / angular2-now

Angular 2 @Component syntax for Angular 1 apps
MIT License
145 stars 15 forks source link

JSPM/SystemJS #18

Closed ghost closed 8 years ago

ghost commented 9 years ago

jspm install npm:angular2-now

In my config.js

System.config({
  "map": {
    "angular": "github:angular/bower-angular@1.4.3",
    "angular-animate": "github:angular/bower-angular-animate@1.4.3",
    "angular-aria": "github:angular/bower-angular-aria@1.4.3",
    "angular-material": "github:angular/bower-material@master",
    "angular-messages": "github:angular/bower-angular-messages@1.4.3",
    "angular-mocks": "github:angular/bower-angular-mocks@1.4.3",
    "angular-moment": "npm:angular-moment@0.10.1",
    "angular-numbro": "npm:angular-numbro@1.3.1",
    "angular-ui-router": "github:angular-ui/ui-router@0.2.15",
    "angular2-now": "npm:angular2-now@0.3.5",
    "angular2now": "npm:angular2-now@0.3.5", // tried this too

in my appModule

'use strict'; import 'angular'; import 'angular-ui-router'; import {Component, View, Inject, options} from 'angular2now'; import {Component, View, Inject, options} from 'angular2-now' // tried this too; angular2now.options({controllerAs: 'vm'});

Made no difference.

I think you need to add format: "amd" to the package.json.

It may need to be jspm: {format: "amd"}

I manually changed it in jspm_packages, but now it complains about

Edit:

I installed jspm install github:pbastowski/angular2-now

Still getting this error:

Uncaught ReferenceError: angular is not defined(anonymous function) @ angular2-now.js:26(anonymous function) @ angular2-now.js:631M @ system.src.js:3826(anonymous function) @ system.src.js:3826n @ system.src.js:3826(anonymous function) @ system.src.js:3826
Uncaught ReferenceError: angular is not defined
    Evaluating http://localhost:3005/jspm_packages/npm/angular2-now@0.3.5/angular2-now.js
    Error loading http://localhost:3005/jspm_packages/npm/angular2-now@0.3.5/angular2-now.js from http://localhost:3005/app/appModule.js
    Error loading http://localhost:3005/jspm_packages/npm/angular2-now@0.3.5/angular2-now.js
mbutsykin commented 8 years ago

@robertbaker, if this is still actual for you :) try

jspm install angular2-now=github:pbastowski/angular2-now -o "{shim: {'angular2-now': ['angular']}}"

or add

"overrides": {
      "github:pbastowski/angular2-now@master": {
        "shim": {
          "angular2-now": [
            "angular"
          ]
        }
      }
    }

directly to jspm in package.json and then reinstall the package

ghost commented 8 years ago

@mbutsykin thanks, maybe I'll try it out someday.

I ended up writing a "Module" class that removes a lot of the boilerplate and stuff. Does a lot of what this does, except no decorators. I hope I can revisit this and implement it.

pbastowski commented 8 years ago

@robertbaker

The following SystemJS config works:

    System.config({
        defaultJSExtensions: false,
        transpiler: "typescript",
        "paths": {
            "*": "*.ts"
        },
        map: {
            "angular": "/node_modules/angular/angular.js",
            "angular2now": "/node_modules/angular2-now/dist/angular2-now.js"
        }
    });
    System.import('app')

Then in app.ts you can do

import { SetModule, Component, Inject, bootstrap } from 'angular2now';

SetModule('app', []);

@Component({
    selector: 'app',
    template: '<h1>angular2-now Application</h1>',
    services: ['$http']
})
//@Inject('$http')
class App {
    constructor($http) {
        console.log('@ app: $http: ', $http);
    }
}

bootstrap(App);

Also, see my test repo https://github.com/pbastowski/test-02.

pbastowski commented 8 years ago

Closing this issue, but feel free to reopen if required.