Typescript (또는 angular2) 오류 : RuntimeMetadataResolver에 대한 공급자가 없습니다.

Question

저는 입니다.은 Typescript/Angular2 언어입니다. Typescript 책에서 샘플 응용 프로그램을 개발하려고하는데 다음 오류가 발생합니다.

브라우저 콘솔에 있습니다. 문제는 packages.json의 구성 요소 버전에 있다고 생각합니다. npm install을 사용하여 Angular2를 설치 했으므로 버전은 2.0beta17입니다.

스택 트레이스 :

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']); 

/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 명령

Answer 1

. 파일 a/b은 두 번 (조건하에) a/b 및 a\b과 같이 컴파일 될 수 있습니다. 이것은 Windows에서만 발생했습니다. 이것은 Angular의 일부 기능을 상실했습니다.small@0.2.8으로 업데이트 할 수 있습니까?

Answer 2

당신이 documentation에 따라 루트 모듈 클래스에 가져해야합니다. 귀하의 경우에는 그것은해야한다 :이 아닌 각도에 문제가 없으며, 타이프 라이터,하지만 작은 버그가 있었다 모듈 들러 것으로 보인다

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

Answer 3

베타 버전에서 최신 버전의 각도로 업그레이드하고 시도해보십시오.

"npm update"을 (를) 사용해보십시오