Использование Angular Universal с AngularJS и ngUpgrade - PullRequest
Новая
       21

Использование Angular Universal с AngularJS и ngUpgrade

0 голосов
/ 02 апреля 2019

Мы запускаем AngularJS и Angular 6 рядом друг с другом, используя ngUpgrade, поскольку мы пытаемся перейти на Angular. У нас нет специфичной для Angular логики, все это существует под AngularJS. Это работает очень хорошо, но я надеюсь, что мы сможем запустить Angular Universal, чтобы различные сканеры могли правильно читать страницу, в частности метатеги для сайтов социальных сетей, таких как Facebook. Я не увидел ничего в документации , указывающей, что это не работает с ngUpgrade / angularJS

Кажется, я зашел достаточно далеко, чтобы правильно компилировать, но как только он попадает в angularJS, он не работает, потому что не может найти angular. Так как здесь много ног, я постараюсь быть максимально многословным

Это мой main.ts: 

import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import * as _angular_ from 'angular';

declare global {
  const angular: typeof _angular_;
}

И мой app.module.ts

import 'reflect-metadata'
import 'zone.js'
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {UpgradeModule} from '@angular/upgrade/static';
import {HttpClientModule} from "@angular/common/http";


@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    UpgradeModule,
    HttpClientModule
  ]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['myproject']);
  }
}

Я подумал, что это может быть связано с отсутствием упоминания angular в main.server.ts, поэтому я переместил код declare с main.ts на main.server.ts, но ничего не изменилось. Для справки, мой main.server.ts состоит только из: 

export { AppServerModule } from './app/app.server.module';

После запуска ng add @nguniversal/express-engine --clientProject myproject на самом деле не трогал другие файлы, поэтому все остальные файлы, которые он генерирует / изменяет, точно такие же.

Также для справки: ng serve по-прежнему работает правильно / правильно загружает приложение angularJS.

Сама ошибка (анонимная): 

C:\Users\myname\PycharmProjects\myproject\dist\server.js:128985
angular.module('myproject')
^

ReferenceError: angular is not defined
    at Object../src/app/app.module.ts (C:\Users\myname\PycharmProjects\myproject\dist\server.js:128985:1)
    at __webpack_require__ (C:\Users\myname\PycharmProjects\myproject\dist\server.js:128865:30)
    at Object../src/app/app.server.module.ngfactory.js (C:\Users\myname\PycharmProjects\myproject\dist\server.js:129023:11)
    at __webpack_require__ (C:\Users\myname\PycharmProjects\myproject\dist\server.js:128865:30)
    at Object../src/main.server.ts (C:\Users\myname\PycharmProjects\myproject\dist\server.js:129203:37)
    at __webpack_require__ (C:\Users\myname\PycharmProjects\myproject\dist\server.js:128865:30)
    at Object.0 (C:\Users\myname\PycharmProjects\myproject\dist\server.js:129219:18)
    at __webpack_require__ (C:\Users\myname\PycharmProjects\myproject\dist\server.js:128865:30)
    at ./src/app/account.service.ts.Object.defineProperty.value (C:\Users\myname\PycharmProjects\myproject\dist\server.js:128914:18)
    at Object.<anonymous> (C:\Users\myname\PycharmProjects\myproject\dist\server.js:128917:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myproject@0.0.0 serve:ssr: `node dist/server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the myproject@0.0.0 serve:ssr script.
...