Typescript（或angular2）错误：RuntimeMetadataResolver没有提供者

我是新的 in Typescript/Angular2语言。我试图从TypeScript书籍开发示例应用程序，但我总是得到以下错误：Typescript（或angular2）错误：RuntimeMetadataResolver没有提供者

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

在浏览器控制台中。我认为问题出在packages.json的组件版本中。 Angular2已经使用npm install安装，因此版本为2.0beta17。

堆栈跟踪：

[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:25797:23 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:26406:9 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:26442:9 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27967:19 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27995:20 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27958:20 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27948:16 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27845:31 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27817:20 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27806:16 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27461:36 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27986:23 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27958:20 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27948:16 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27845:31 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27817:20 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27806:16 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27461:36 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27986:23 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:27958:20 [angular] 
[email protected]:///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<[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:32701:32 [angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:117:24 [<root> => angular] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:32732:60 [<root>] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:32968:51 [<root>] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:36772:9 [<root>] 
[email protected]:///C:/ProgettiWeb/TestAngular/Chapter2/static/scripts/index.js:36581:12 [<root>] 
[email protected]:///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']);

静态/ 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>

然后我跑 “吞掉”，我在加载中的index.html浏览器和我得到这个错误。

我有动态创建一个文件夹node_modules其中包含一个angular2文件夹...

在此先感谢。

编辑：我检查了我的index.js生成的文件和

var RuntimeMetadataResolver = (function() {

存在。此外，

exports.COMPILER_PROVIDERS

包含

__small$_xxx.RuntimeMetadataResolver

EDIT2：没有错误npm ls命令

来源

2016-11-24 Emanuele

不幸的是，您的图书使用的是Angular 2的过时版本;自测试版17以来出现了许多重大变化。考虑使用[官方文档]（https://angular.io/docs/ts/latest/）学习Angular 2。 –

但是我正在学习打字稿...... Angular版本是2.0 beta 17，书中的示例使用了相同的版本。我已经使用'npm install'安装了它。我如何编辑我的文件？ – Emanuele

您遇到的错误是Angular 2特有的。为了您学习TypeScript的目的，我建议您从书中找到一个不同的示例，而不是过时的Angular 2示例。 – yuxhuang

这似乎不是一个角度的问题，也不是打字稿，但模块捆绑小有一个bug。文件a/b可以被编译两次（在条件下），即a/b和a\b。这只发生在Windows上。这打破了Angular的一些功能。你可以尝试更新到[email protected]？

来源

2016-12-06 16:48:51 ivogabe

-1

你应该根据documentation在根模块类导入。你的情况应该是：

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

来源

2016-11-24 10:57:01 Zimas

根模块类在哪里？我正在关注一本书中的示例。我有一个目录和相关文件 – Emanuele

我推荐使用angular2文档。在那里它写了什么是根模块类。 – Zimas

我的书是关于打字稿的。我在学习之前买了它。你能向我解释它与我的项目有什么关系吗？（也就是使用gulp）？也许我有编辑node_modules/angular2文件夹中的文件？我试图创建包含您编写的代码并添加导入的ts文件。它没有工作。你的回答没有帮助我。你能改善它吗？谢谢 – Emanuele

尝试从beta版升级到最新版的angular和try。

尝试使用“npm update”

来源

2016-12-07 08:58:43

我已经试过了。谢谢 – Emanuele

Typescript（或angular2）错误：RuntimeMetadataResolver没有提供者

回答

相关问题