Typescript (or angular2) Error: No provider for RuntimeMetadataResolver

Question

I'm new in Typescript/Angular2 languages. I'm trying to develop sample application from a Typescript book but I always get the following error:

No provider for RuntimeMetadataResolver (ComponentResolver -> RuntimeCompiler -> RuntimeMetadataResolver)

in the browser console. I think the problem is in component version in packages.json. Angular2 has been installed using npm install so the version is 2.0beta17.

Stacktrace:

BaseException@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:25797:23 [angular]
AbstractProviderError@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:26406:9 [angular]
NoProviderError@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:26442:9 [angular]
ReflectiveInjector_.prototype._throwOrNull@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27967:19 [angular]
ReflectiveInjector_.prototype._getByKeyDefault@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27995:20 [angular]
ReflectiveInjector_.prototype._getByKey@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27958:20 [angular]
ReflectiveInjector_.prototype._getByReflectiveDependency@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27948:16 [angular]
ReflectiveInjector_.prototype._instantiate@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27845:31 [angular]
ReflectiveInjector_.prototype._instantiateProvider@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27817:20 [angular]
ReflectiveInjector_.prototype._new@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27806:16 [angular]
ReflectiveInjectorDynamicStrategy.prototype.getObjByKeyId@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27461:36 [angular]
ReflectiveInjector_.prototype._getByKeyDefault@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27986:23 [angular]
ReflectiveInjector_.prototype._getByKey@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27958:20 [angular]
ReflectiveInjector_.prototype._getByReflectiveDependency@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27948:16 [angular]
ReflectiveInjector_.prototype._instantiate@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27845:31 [angular]
ReflectiveInjector_.prototype._instantiateProvider@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27817:20 [angular]
ReflectiveInjector_.prototype._new@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27806:16 [angular]
ReflectiveInjectorDynamicStrategy.prototype.getObjByKeyId@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27461:36 [angular]
ReflectiveInjector_.prototype._getByKeyDefault@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27986:23 [angular]
ReflectiveInjector_.prototype._getByKey@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27958:20 [angular]
ReflectiveInjector_.prototype.get@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27767:16 [angular]
coreLoadAndBootstrap/<@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:36582:33 [angular]
ApplicationRef_.prototype.run/<@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:36774:26 [angular]
NgZoneImpl/this.inner<.onInvoke@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:32701:32 [angular]
Zone.prototype.run@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:117:24 [<root> => angular]
NgZoneImpl.prototype.runInner@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:32732:60 [<root>]
NgZone.prototype.run@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:32968:51 [<root>]
ApplicationRef_.prototype.run@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:36772:9 [<root>]
coreLoadAndBootstrap@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:36581:12 [<root>]
bootstrap@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:68267:12 [<root>]
@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:68328:1 [<root>]
@file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:1:2 [<root>]
  index.js:45341:13
    BrowserDomAdapter.prototype.logError file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:45341:13
    ExceptionHandler.prototype.call file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:25704:13
    ApplicationRef_.prototype.run/< file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:36783:17
    ZoneDelegate.prototype.invoke file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:233:17
    NgZoneImpl/this.inner<.onInvoke file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:32701:32
    ZoneDelegate.prototype.invoke file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:232:17
    Zone.prototype.run file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:117:24
    NgZoneImpl.prototype.runInner file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:32732:60
    NgZone.prototype.run file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:32968:51
    ApplicationRef_.prototype.run file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:36772:9
    coreLoadAndBootstrap file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:36581:12
    bootstrap file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:68267:12
    <anonimo> file:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:68328:1
    <anonimo>

Package.json:

{
  "name": "weather-widget",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "dependencies": {
    "angular2": "^2.0.0-beta.17",
    "es6-shim": "^0.35.1",
    "reflect-metadata": "^0.1.2",
    "rxjs": "^5.0.0-beta.6",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-typescript": "^3.1.3",
    "gulp-uglify": "^2.0.0",
    "small": "^0.2.7"
  }
}

lib/index.ts:

import "zone.js";
import "rxjs";
import "reflect-metadata";
import "es6-shim";

import { bootstrap } from "angular2/platform/browser";
import {About} from "./about";

bootstrap(About).catch(err => console.error(err));

lib/about.ts

import { Component } from "angular2/core";

@Component({
    selector: "about-page",
    template: `
        <h2>About</h2>
        This widget shows the weather forecast of Utrecht.
        The next 24 hours are shown under 'Today' and the forecast of 24-48 hours ahead under 'Tomorrow'.
        `
})
export class About {

}

lib/tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "lib": ["es2015", "dom"]
    }
}

gulpfile.js

var gulp = require('gulp');
var typescript = require('gulp-typescript');
var small = require('small').gulp;
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');

var tsProject = typescript.createProject('lib/tsconfig.json', {
    typescript: require('typescript')
});

gulp.task('compile', function() {
    return gulp.src('lib/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(tsProject())
        .pipe(small('index.js', {
            externalResolve: ['node_modules'],
            globalModules: {
                "crypto": {
                    standalone: "undefined"
                }
            }
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('static/scripts'));
});
gulp.task('release', ['compile'], function() {
    return gulp.src('static/scripts/scripts.js')
        .pipe(uglify())
        .pipe(gulp.dest('static/scripts'));
});

gulp.task('default', ['compile']);

static/index.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Weather</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="wrapper">
            <about-page>Loading..</about-page>
        </div>
        <script src="scripts/index.js" type="text/javascript"></script>
    </body>
</html>

Then I run "gulp", I load the index.html in the browser and I get that error.

I have a node_modules folder created dynamically which contains an angular2 folder...

Thanks in advance.

EDIT: I checked my index.js generated file and

var RuntimeMetadataResolver = (function () {

is present. Moreover,

exports.COMPILER_PROVIDERS

contains

__small$_xxx.RuntimeMetadataResolver

EDIT2: No error in npm ls command

Unfortunately, your book is using an outdated version of Angular 2; there have been numerous, substantial changes since beta 17. Consider learning Angular 2 using the official documentation. — Michael Liu
– Michael Liu, Commented Nov 24, 2016 at 17:17
But i'm studying typescript... Angular version is 2.0 beta 17 and the sample in the book uses the same version. I have installed it using 'npm install'. How can i edit my files? — Emanuele
– Emanuele, Commented Nov 25, 2016 at 8:44
The error you encounter is Angular 2 specific. For your purpose of learning TypeScript, I recommend you find a different example from your book rather than an outdated Angular 2 example. — yuxhuang
– yuxhuang, Commented Nov 30, 2016 at 22:11
So there is not way to let it works...also other samples are outdated. — Emanuele
– Emanuele, Commented Dec 1, 2016 at 8:07
If I were you.. maybe return the book? Perhaps something like this: basarat.gitbooks.io/typescript/content/docs/… online works better for you? — yuxhuang
– yuxhuang, Commented Dec 1, 2016 at 19:29

ivogabe · Accepted Answer · 2016-12-06 16:48:51Z

1

This appears to be not an issue with Angular, nor TypeScript, but the module bundler Small had a bug. A file a/b could be compiled twice (under conditions), namely as a/b and a\b. This only happened on Windows. This broke some functionality of Angular. Can you try to update to [email protected]?

answered Dec 6, 2016 at 16:48

ivogabe

1361 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

raj m · Accepted Answer · 2016-12-07 08:58:43Z

0

Try to upgrade from beta to latest version of angular and try.

Try using "npm update"

answered Dec 7, 2016 at 8:58

raj m

2,0136 gold badges23 silver badges38 bronze badges

Comments

Zimas · Accepted Answer · 2016-11-24 10:57:01Z

-1

you should import it in the root module class according to the documentation. In your case it should be:

@NgModule({
  imports:      [ BrowserModule, RuntimeMetadataResolver],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

answered Nov 24, 2016 at 10:57

Zimas

2861 silver badge9 bronze badges

5 Comments

Emanuele Over a year ago

Where is root module class? I'm following sample from a book. I have one directory and relative files

Zimas Over a year ago

I recommend the angular2 documentation. There it is written what is the root module class.

Emanuele Over a year ago

My book is about typescript. I bought it before learning angular. Can you explain to me how it's related to my project (that is using also gulp)? Maybe have i to edit a file in node_modules/angular2 folder? I tried to create ts file containing code you wrote and adding imports. It didn't work. Your answer didn't help me. Can you improve it? Thanks

Michael Liu Over a year ago

@Zimas: Emanuele is using an old beta version of Angular 2 which doesn't support modules.

Emanuele Over a year ago

@MichaelLiu: i answered you in the previous post.

Collectives™ on Stack Overflow

Typescript (or angular2) Error: No provider for RuntimeMetadataResolver

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related