2016-11-24 8 views
1

私はです。はTypescript/Angular2の言語です。私はTypescriptの本からサンプルアプリケーションを開発しようとしていますが、私はいつも次のエラーを受け取ります:Typescript(またはangular2)Error: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] 
ReflectiveInjector_.prototype._getByR[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をロードブラウザと私はそのエラーを取得します。

私は...事前に

感謝をangular2フォルダが含まれている動的に作成node_modulesフォルダを持っています。

編集:私は私のindex.jsファイルと

var RuntimeMetadataResolver = (function() {

が存在している生成確認しました。 はまた、

exports.COMPILER_PROVIDERS

__small$_xxx.RuntimeMetadataResolver

EDIT2含まれていますnpm lsコマンドでエラーなし

+2

残念ながら、あなたの本では古いバージョンのAngular 2が使用されています。ベータ17以降、数多くの大きな変更がありました。[Official documentation](https://angular.io/docs/ts/latest/)を使用してAngular 2を学習することを検討してください。 –

+0

しかし、私はtypescriptを勉強しています...角度バージョンは2.0ベータ17であり、本のサンプルは同じバージョンを使用しています。私は 'npm install'を使ってインストールしました。ファイルを編集するにはどうしたらいいですか? – Emanuele

+0

あなたが遭遇したエラーは角度2に特有です。 TypeScriptを学習する目的のために、旧式のAngular 2の例ではなく、あなたの書籍とは別の例を見つけることをお勧めします。 – yuxhuang

答えて

1

これはない角度の問題、また活字体が、小さなバグを持っていたモジュールバンドラように見えます。ファイルa/bは、2回(条件の下で)a/ba\bのようにコンパイルできます。これはWindowsでのみ発生しました。これはAngularの機能を破った。[email protected]に更新できますか?

-1

をあなたはdocumentationに応じルートモジュールクラスでそれをインポートする必要があります。 あなたのケースでは、それは次のようになります。

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

ルートモジュールクラスはどこですか?私は本のサンプルをたどっています。私は1つのディレクトリと相対ファイルを持っています – Emanuele

+0

私はangular2のドキュメントをお勧めします。そこにはルートモジュールクラスが書かれています。 – Zimas

+0

私の本はタイプスクリプトに関するものです。私は角を学ぶ前にそれを買った。 それは私のプロジェクト(それはまた、gulpを使用している)に関連していることを私に説明することができますか?たぶん私はnode_modules/angular2フォルダのファイルを編集する必要がありますか? 書き込んだコードを含むtsファイルを作成しようとしました。それはうまくいかなかった。あなたの答えは私を助けませんでした。あなたはそれを改善できますか?ありがとう – Emanuele

0

角度からベータ版にアップグレードし、試してみてください。

「npm update」を使用してください

+0

私はすでに試しました。ありがとう – Emanuele

関連する問題