NG2 Upgrade Troubleshoot

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 [email protected] (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:[email protected]",
"systemjs-babel-build": "npm:[email protected]/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.

Bolza/ng2_trblshoot.md

tedp commented Oct 7, 2016 •

edited

Loading

Bolza/ng2_trblshoot.md

tedp commented Oct 7, 2016 • edited Loading

tedp commented Oct 7, 2016 •

edited

Loading