Bolza/ng2_trblshoot.md

## ng2_trblshoot.md

      
    Raw
  

              ng2_trblshoot.md
            
          
    Reflect-metadata error


adding import 'zone.js' and 'reflect-metadata'
System.config.babelOptions.stage = 1


RXJS missing / errors


update NG2 to >=2.0.0-beta.9, doesnt require external rxjs anymore


Transpiler SyntaxError on any Typescript annotation as Unexpected token


npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties babel-plugin-transform-flow-strip-types babel-preset-es2015 babel-plugin-angular2-annotations
in gulpfile task add plugins: 'angular2-annotations','transform-decorators-legacy','transform-class-properties','transform-flow-strip-types'


Missing file in babel-runtime directory


update to babel-runtime@6.6.0 (on jspm)


Cannot read property 'annotations' at ReflectionCapabilities.annotations


upgradeAdapter.downgradeNg2Component() called on undefined


Directive doesn't show up and constructor not fired


check syntax app.directive('nameLowerCC', upgradeAdapter.downgradeNg2Component(ImportedClassName))
check ng is imported import * as angular from 'angular';
check directive is added to the right module
check imported name is the same as the exported one, usually is the class name
check the directory is added to the module BEFORE bootstrapping the application


To inject a service in a class constructor


upgrade it: upgradeAdapter.upgradeNg1Provider('myService');
if using TS: constructor (@Inject('myService') myService) {}
otherwise http://stackoverflow.com/questions/36017695/injecting-angular1-service-in-angular2-directive


Using an NG1 Directive inside an NG2 Component


Issue 1, Issue 2
Will not be possible in case the directive, got no isolatedScope, uses replace, has no template, uses $compile
Plus the NG1 directives cannot be used as attributes


Manage to open an async data flow between NG1 and NG2


Use a bridge service like this one https://github.com/Bolza/angular2-bridge


Have all the import paths inside the classes refer to the same base path


Add the path in System.config.paths with this format "myFolder:*": "somePath/myForder/*",


If you ae trying to use @Properties and @Events inside a Component


Dont. They changed the names in @Inputs and @Outputs


Using UIRouter in Angular2


ui.router services can be upgraded to be used in ng2 but the directives can't. We can easily write ng2-components wrapping the service functionality. UIRouter for NG2 is in development.


When calling a Service method, error: Cannot read METHOD of undefined in [null]


Make sure you have @Injectable() before the Service class definition
In the component that is calling the service you need constructor(ts: TheService) { this.ts = ts }
In the same component you also need @Component({providers: [TheService]})


When using an NG2 Service (S1) in another NG2 Service (S2) then S1Provider is not found


NG1+NG2 app: S1 needs to be added to the upgradeAdapter
upgradeAdapter.addProvider(NG2_ProviderName);
NG2 only app: S1 needs to be added as module dependancy
bootstrap(MainComponent, ['NG2_ProviderName']);


Cannot read property 'getOptional' of undefined


remember upgradeAdapter.addProvider(NG2_Provider) see previous point


When Testing you get the error  -> Http! provider not found


You are using an actual Service in your test instead of mocking it
import { HTTP_PROVIDERS } from 'angular2/http' and
beforeEachProviders(() => [ HTTP_PROVIDERS ])


When Testing you need to mock a service


import the actual service import { MyService } from 'services/my.service'
import { provide } from 'angular2/core'
Create a MockService Class
in beforeEachProviders provide the Mock provide(MyService, {useClass: MockService})


When Testing you get the error Failed: _myService.myMethod is not a function


You need to add the method to the mocked service Class and return the same Type


When Testing you get ORIGINAL EXCEPTION: Expression has changed after it was checked.


angular/angular#6005
or you can mock the sub-components


Error Token must be defined!


export of a class is missing
It is likely that you just need to transpile the code


Error Expecting ComponentFactory for


Use JSPM and SystemJS to runtime transpile TS


Install https://github.com/systemjs/plugin-babel
add in config.js these paths


"plugin-babel": "npm:systemjs-plugin-babel@0.0.11",
"systemjs-babel-build": "npm:systemjs-plugin-babel@0.0.11/systemjs-babel-browser.js"


add in config.js this option


transpiler: "plugin-babel",

Error System.import Error: (SystemJS) TypeError: Cannot read property 'annotations' of undefined

The class name doesn't match what you are bootstrapping.