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沒有提供者

回答

相關問題