在TodoApp服务器渲染上找不到指令注释

Question

我正在尝试用服务器渲染angular2-universal.我复制粘贴官方repo https://github.com/angular/universal/tree/master/examples/src/universal/todo的示例todo应用程序到我自己的Trails/Express服务器.

我设法启动我的服务器,但当我打电话时,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)

普遍回购的例子正在运作,所以我不明白为什么它不适合我.我没有更改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

Answer 1

您的问题是您同时使用不同的包angular2.

您从./node_modules/文件夹启动带有模块的服务器,但您的组件TodoApp将由文件夹中的instance ComponentMetadata(extends DirectiveMetadata)进行装饰./dist/src/node_modules/@angular/core/.

我认为首先你需要将包传输到dist文件夹,然后运行服务器.你必须使用相同的路径到angular2模块(./dist/src/node_modules)

例如,您可以尝试这样的事情:

server.js

'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))
}

我reflect-metadata在package.json中添加了.你需要改变componentUrl这样的一点:

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
      },
      ...

然后你可以看到以下错误:

所以你需要添加rxjs你的配置: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

希望它能帮到你!