TodoApp 서버 렌더링에서 지시어 어노테이션이 발견되지 않았습니다.

Question

angular2-universal으로 서버 렌더링을 시도하고 있습니다. 나는 내 자신의 Trails/Express 서버에 공식 repo https://github.com/angular/universal/tree/master/examples/src/universal/todo의 예제 todo 앱을 복사하여 복사합니다.

나는 내 서버를 시작하기 위해 관리하지만 http://localhost:3000를 호출 할 때 다음과 같은 오류가 있습니다

Error: No Directive annotation found on TodoApp 
    at new BaseException (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/compiler/src/facade/exceptions.js:17:23) 
    at DirectiveResolver.resolve (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/compiler/src/directive_resolver.js:31:15) 
    at CompileMetadataResolver.getDirectiveMetadata (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/compiler/src/metadata_resolver.js:55:51) 
    at RuntimeCompiler.resolveComponent (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/compiler/src/runtime_compiler.js:34:47) 
    at /Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/application_ref.js:99:37 
    at /Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/application_ref.js:292:26 
    at ZoneDelegate.invoke (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/zone.js/dist/zone-node.js:281:29) 
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/zone/ng_zone_impl.js:45:41) 
    at ZoneDelegate.invoke (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/zone.js/dist/zone-node.js:280:35) 
    at Zone.run (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/zone.js/dist/zone-node.js:174:44) 
    at NgZoneImpl.runInner (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/zone/ng_zone_impl.js:76:71) 
    at NgZone.run (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/zone/ng_zone.js:223:66) 
    at ApplicationRef_.run (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/application_ref.js:290:14) 
    at Object.coreLoadAndBootstrap (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/application_ref.js:96:19) 
    at /Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/angular2-universal/dist/node/bootloader.js:186:34 
    at Array.map (native) 

보편적 인 REPO의 예를하는 나를 위해 작동하지 않는 이유를 내가 이해하지 못하는 노력하고 있습니다. 나는 angular2 소스에서 아무것도 변경하지 않습니다.

내 모든 코드는

Answer 1

귀하의 문제는 같은 시간에 다른 패키지 angular2로 작업하는 것을 여기 https://github.com/jaumard/trails-angular2-isomorphic 구성에 여기 https://github.com/jaumard/trails-angular2-isomorphic/blob/master/api/controllers/ViewController.js#L58 경로 및 여기에 템플릿 엔진 https://github.com/jaumard/trails-angular2-isomorphic/blob/master/config/web.js#L76입니다.

당신은 ./node_modules/ 폴더에서 모듈과 서버를 시작하지만 구성 요소는 TodoApp는 ./dist/src/node_modules/@angular/core/ 폴더에서 예를 ComponentMetadata (extends DirectiveMetadata)로 장식됩니다.

먼저 패키지를 dist 폴더로 전송 한 다음 서버를 실행해야한다고 생각합니다. 그리고 당신은 당신이 이런 식으로 뭔가를 시도 할 수 있습니다 예를 들어 angular2 모듈 (./dist/src/node_modules)

에 동일한 경로를 사용해야합니다 :

server.js 내가 패키지에 reflect-metadata을 추가

'use strict' 

const gulp = require('gulp'); 
const rimraf = require('gulp-rimraf'); 
const path = require('path'); 
const dest = './dist'; 

gulp.task('clean', (cb) => { 
    return gulp.src(dest).pipe(rimraf()) 
}); 

gulp.task('prerun', ['clean'],() => { 
    return gulp.src([ 
    'node_modules/rxjs/**/*', 
    'node_modules/zone.js/**/*', 
    'node_modules/core-js/**/*', 
    'node_modules/reflect-metadata/**/*', 
    'node_modules/systemjs/**/*', 
    'node_modules/@angular/**/*', 
    'node_modules/angular2-universal/**/*', 
    'node_modules/angular2-universal-polyfills/**/*', 
    'node_modules/angular2-express-engine/**/*', 
    'node_modules/angular2-hapi-engine/**/*' 
    ], { base: './' }) 
    .pipe(gulp.dest(path.join(dest, 'src'))) 
}); 


gulp.start('prerun', run) 

function run() { 
    require('./dist//src/node_modules/angular2-universal/polyfills') 
    const app = require('./') 
    const TrailsApp = require('trails') 
    const server = new TrailsApp(app) 

    server.start().catch(err => server.stop(err)) 
} 

. json. 또한이 같은 비트 componentUrl을 변경해야

그래서 당신이 rxjs을 추가해야합니다

ViewController.js

module.exports = class ViewController extends Controller { 
    helloWorld(req, res) { 
    const todoApp = require('../../dist/src/todo/app') 
    let queryParams = ng2U.queryParamsToBoolean(req.query); 
    let options = Object.assign(queryParams , { 
     // client url for systemjs 
     buildClientScripts: true, 
     systemjs: { 
     componentUrl: 'todo/browser', <== remove src/ 
     map: { 
      'angular2-universal': 'node_modules/angular2-universal', 
      '@angular': 'node_modules/@angular' 
     }, 
     packages: PACKAGES 
     }, 
     ... 

그런 다음 다음과 같은 오류를 볼 수 있습니다 귀하의 구성 : ViewController.js

const PACKAGES = { 
    'angular2-universal/polyfills': { 
    format: 'cjs', 
    main: 'dist/polyfills', 
    defaultExtension: 'js' 
    }, 
    ... 
    rxjs: { <== this property 
    defaultExtension: 'js' 
    } 
}; 

... 
systemjs: { 
    componentUrl: 'todo/browser', 
    map: { 
    'angular2-universal': 'node_modules/angular2-universal', 
    '@angular': 'node_modules/@angular', 
    'rxjs': 'node_modules/rxjs' <== this line 
    }, 
    packages: PACKAGES 
}, 

도 참조 여기에 변화의 전체 목록 https://github.com/alexzuza/trails-angular2-isomorphic/commit/45f2e59529821757f6a6c03c5872e08fdce3f3e7

는 당신 도움이되기를 바랍니다!