在TodoApp服务器呈现中没有找到任何指令注释

Question

我正在尝试使用angular2-universal进行服务器呈现。我将正式回购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将由来自./dist/src/node_modules/@angular/core/文件夹的实例ComponentMetadata (extends DirectiveMetadata)修饰。

​

我认为首先您需要将包传输到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

希望它能帮到你！