Ruler service not working as local dependency

问题

I based my code using this plunker: http://plnkr.co/edit/81nWDyreYMzkunihfRgX?p=preview

As you can see is loading dependencies remotely (scripts with http/s), then I change them using node and replacing all dependencies locally with a package.json and tsconfig.json.

However, when changing the ruler and rectangle dependencies to local like this:

import {Ruler, Rectangle} from "angular2/src/platform/browser/ruler";

Appears an error saying:

"SyntaxError: expected expression, got '<'
Evaluating http://localhost:3000/angular2/src/platform/browser/ruler
Error loading http://localhost:3000/src/main.ts" angular2-polyfills.js:138:14

SyntaxError: expected expression, got '<'

回答1:

https://github.com/angular/angular/pull/8452#issuecomment-220460761

mhevery commented 12 days ago We have decided to remove Ruler service, and so it is not part of the public API.

回答2:

You simply need to add this line in your SystemJS configuration:

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

(...)

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      'angular2/src/platform/browser/ruler': 'node_modules/angular2/src/platform/browser/ruler.js'
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

You have then the corresponding object when using the import:

import {Ruler} from 'angular2/src/platform/browser/ruler';
console.log(Ruler);
// print: Ruler(domAdapter) {
//    this.domAdapter = domAdapter;
// }

Hope it helps you, Thierry

回答3:

I assume that you are importing Angular2 from bundles:

angular2.min.js or ( angular.js | angular.dev.js )

I you check file: ./node_modules/angular2/bundles/overview.md you will see that angular2 is consisted of:

angular2/core
angular2/common
angular2/compiler
angular2/platform/browser
angular2/platform/common_dom
angular2/instrumentation

no src/ folder!

If you want to to import angular2/src/platform/browser/ruler in your app, you must serve node_modules/angular2 folder to your app, no bundles this time!

If you are using SystemJS, consider this config:

System.config({
        defaultJSExtensions: true,
        map: {
            "app": './src',
            "angular2": 'node_modules/angular2',
            'rxjs/operator/*' : 'node_modules/rxjs/add/operator/*',
            "rxjs": 'node_modules/rxjs',
            "reflect-metadata": 'node_modules/reflect-metadata/temp/Reflect.js',
            "zone.js": 'node_modules/zone.js/dist/zone.js'
        },
        packages: {
            app: {
                defaultExtension: 'js',
                format: 'register'
            },
            angular2: {
                defaultExtension: 'js',
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'reflect-metadata': {
                format: 'global'
            }
        }
    });

node_modules folder is publicly accessible!

来源：https://stackoverflow.com/questions/35109956/ruler-service-not-working-as-local-dependency

标签

angular

angular2-services