angular: Cannot resolve all parameters for 'Parser'(?). Works 2.3.1, not in 2.4.0. reflect-metadata issue ?

Angular really is starting to frustrate me. In every minor release since 2.0 something broke in my codebases or in dependent packages (f.e. two times in ng2-redux). Sometimes even a point release broke my builds (f.e. 2.2.2 -> 2.2.3 broke their own router module).

Currently I have to rank angular as a beta software at best, which is really sad.

Yes, problem with the order. You need at first load polyfills.

I put import 'reflect-metadata' on the very top of my polyfills and it runs without error

I had this problem too. As was mentioned by @Fost and @aajajim moving the polyfill import to the top of my entry file (main.ts) solved the issue.

My polyfill.ts file:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

And my main.ts file

import './polyfills'; // <-- Moved polyfill import here. This has to be loaded before Angular

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';

// import './polyfills'; <-- original polyfill import was here

import { environment } from './environments/environment';
import { AppModule } from './app/';

OK so even more success.

I started off without reflect-metadata using angular 2.2, webpack2, awesome typescript loader.

I had the following folder structure for my entries

/src/
    --- app/
         --- app stuff here
    --- main.ts
    --- polyfills.ts
    --- vendor.ts

My polyfills looked like the following:

import 'core-js/es6';
import 'core-js/es7/reflect';

require('zone.js/dist/zone');
if (ENV === 'production') {
    // Production
    Error['stackTraceLimit'] = Infinity;
    require('zone.js/dist/long-stack-trace-zone');
} else {
    // Development
    Error['stackTraceLimit'] = Infinity;
    require('zone.js/dist/long-stack-trace-zone');
}

vendors.ts

import 'rxjs';

// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...
import '@company/header/dist/company.header.css';

And main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';

if (ENV === 'production') {
    enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

With my webpack config working as it did when I originally upgraded to 2.4.x, I can get it working by installing reflect-metadata as a dependency, then not putting it in the polyfills file but putting it at the top of the vendor.ts file.

e.g.

import 'rxjs';
import 'reflect-metadata'; <---

// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...
import '@company/header/dist/company.header.css';

It will then work for me.

I’m still not sure entirely why I need reflect-metadata as it wasn’t a dependency before, nor is it in the angular 2 webpack tutorial on the main site, which has a similar app, vendor, polyfills setup.

I can conform this effect (again, read my initial comment above), ‘core-js/es7/reflect’ breaks angular 2.4.1, works with 2.3.1.

The order of imports does not matter. But replacing it with reflect-metadata solves the issue.

As this breaks an existing dependency (core-js), this is a breaking change and must be fixed. Please reopen.

I think it has to do with the order in which the dependencies are loaded. I had the angular dependencies together with reflect-metadata in one bundle. When I pulled out reflect-metadata into a separate js file and included that first the problem was gone.

Error: Cannot resolve all parameters for ‘Parser’(?). i just now upgrade my angular version and i’m using angular@^2.4.8 and same error. i put import 'reflect-metadata' top of vendor.ts, it works. i don’t know why…

I confirme, it has to do with import order. In my main.ts, i change it to :

import 'angular2-meteor-polyfills'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './imports/app/app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule);

And it works fine

I’ll add my situation to help clarify a bit. I had the dependency on reflect-metadata and on core-js/es7/reflect. Removing the reflect-metadata only seems to work ok (in my situation, very simple app with two routes that display a simple html page). Removing only core-js/es7/reflect or removing both I get the described error.

Hope this helps.