Как импортировать модуль материала или NgxBootstrap в Angular Universal?

В настоящее время я пытаюсь создать проект с использованием Angular Universal. Я использую Angular 4. Если я импортирую Material Module - проект может быть собран, но при обслуживании через ts-node появляется ошибка -

dist\ngfactory\node_modules\@angular\material\typings\index.ngfactory.ts:9
import * as import0 from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Module._extensions..js (module.js:580:10)

Или если я попытаюсь импортировать NgXBootstrap, появится эта ошибка -

node_modules\ngx-bootstrap\dropdown\bs-dropdown.module.js:1
(function (exports, require, module, __filename, __dirname) { import { NgModule } from '@angular/core';
                                                          ^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)

Я следую этой структуре проекта - https://github.com/designcourse/angular-seo

Я вставляю код здесь -

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

//Material Module
import {MaterialModule} from '@angular/material';

//Ngx Bootstrap
import {BsDropdownModule} from 'ngx-bootstrap';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { PostsComponent } from './posts/posts.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    PostsComponent
  ],
  imports: [
    BrowserModule.withServerTransition({appId: 'universal-app'}),
    FormsModule,
    HttpModule,
    AppRoutingModule,
    MaterialModule,
    BsDropdownModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]

})
export class AppModule { }

app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
imports: [
    ServerModule,
    AppModule
],
bootstrap: [AppComponent]
})
export class AppServerModule { }

server.ts

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';

const PORT = 4000;

enableProdMode();

const app = express();

let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();

app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };

  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});

app.set('view engine', 'html');
app.set('views', 'src')

app.get('*.*', express.static(join(__dirname, '..', 'dist')));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`listening on http://localhost:${PORT}!`);
});

Я предполагаю, что это проблема для всех сторонних библиотек в Angular Universal. Итак, как мне правильно импортировать эти библиотеки?


typescript angular angular-universal angular-material ngx-bootstrap
person nomanbinhussein    schedule 22.05.2017    source источник
comment
MaterialModule устарел. Теперь вам нужно импортировать библиотеку компонента.   -  person cport1    schedule 22.05.2017
comment
@cport1 Я пытался импортировать отдельные модули. Та же ошибка. Я думаю, что это как-то связано с процессом транспиляции. Потому что NgxBootstrap тоже не работает.   -  person nomanbinhussein    schedule 23.05.2017
comment
у меня такая же проблема с md2   -  person Moshe    schedule 24.05.2017

Ответы (2)


arrow_upward
0
arrow_downward

Я бы посоветовал вам использовать этот исходный проект ng-seed/universal вместо того, который вы используете сейчас следующий.

Теперь, если вы структурируете свое приложение в соответствии с ng-seed/universal, то для использования Material Module и BsDropdownModule, просто добавьте эти строки в client/app/app.module.ts

import {MaterialModule} from '@angular/material';
import {BsDropdownModule} from 'ngx-bootstrap';

Обязательно обновите файл package.json соответствующим образом. Затем запустите:

npm install

# dev build (Universal)
npm run build:universal-dev
# prod build (Universal)
npm run build:universal-prod

# start the server (Angular Universal)
npm run serve

Теперь все должно работать нормально.

person Abrar    schedule 04.06.2017
comment
Спасибо за ваш ответ. Я пробовал это семя, модуль импортированных материалов - отлично работает. Но использование их внутри представления вызывает ошибку времени выполнения ReferenceError: document is not defined Я думаю, что на данный момент Universal не работает с материалом. - person nomanbinhussein; 24.06.2017

arrow_upward
0
arrow_downward

В настоящее время у меня есть приложение, использующее MdButtonModule, MdSidenavModule и MdToolbarModule. Это определенно работает, и хитрость заключалась в том, чтобы импортировать HammerJS в src/main.ts

person dockleryxk    schedule 18.08.2017