Skip to content

angular2

waterfoul edited this page Jun 30, 2016 · 5 revisions
  1. Run through the node and node http api instructions, those are needed.

  2. Place your objects created for node into a location accessible by both the node application and your angular2 application.

    • Leave the references to tanjentjs-ts-orm/node alone, we will be addressing these later.
    • This can be a shared folder within the same project or a module that is imported by both. If you do have separate projects for your front end and back end make sure this module is installed in both
  3. Make sure there is an @Injectable() line above each of your Data Connections. This class will need to be injected in your angular code like any other service. Also this line should not hurt any node application which is using these directly. You may see a very minor memory usage for loading the angular library.

  4. Install extra dependencies in your angular project or the shared project

    npm install --save @angular/http @angular/core rxjs@5.0.0-beta.6 zone.js @angular/platform-browser @angular/common @angular/compiler
  5. Optional: Create an auth handler which will be run in the pipeline of every request, this can be used to pull or set auth style data off or onto the requests and potentially mutate the request. You can use the following as a template:

    import { Response, RequestOptions } from '@angular/http';
    import { AuthHandler as ORMAuthHandler } from 'tanjentjs-ts-orm/angular2';
    import { Injectable } from '@angular/core';
    
    @Injectable()
    export class AuthHandler extends ORMAuthHandler {
        public handleResponse(res: Response): Response {
            return res;
        }
    
        public setOptions(options: RequestOptions): RequestOptions {
            return options;
        }
    }
  6. Add the AuthHandler to angular2's DI either by adding AuthHandler from 'tanjentjs-ts-orm/angular2' or (if you have a custom auth handler) by doing the following

    1. Add

      import { AuthHandler as ORMAuthHandler } from 'tanjentjs-ts-orm/angular2';

    to the top of your bootstrap file

    1. Inject your auth handler at the top of your bootstrap file ex.

      import { AuthHandler } from './services/AuthHandler';
    2. Add the following to your bootstrapped provider list

      { provide: ORMAuthHandler, useClass: AuthHandler }
  7. Configure your dependency packer or loader to rewrite the import path to load the angular2 code instead of the node code

    • Webpack

      1. Add
      import {Rewriter} from 'tanjentjs-ts-orm/webpack';

      to the top of your webpack file 2. Add

      new Rewriter('angular2')

      as a webpack plugin

Clone this wiki locally