Как использовать ngx-bootstrap с angular4 с рендерингом на стороне сервера

я установил ngx-bootstrap и использовал angular-cli 1.0.1 и выполнил универсальную настройку с помощью Публикация Роберто Аулера.

Я добавил путь к файлу начальной загрузки в стилях angular-cli.json.

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

Я использую AlertModule для тестирования и его ошибки

C:\Users\Praveen\Desktop\Projects\Angular2\universaltest\node_modules\ngx-bootstrap\alert\alert.module.js:1
(function (exports, require, module, __filename, __dirname) { import { CommonModule } from '@angular/common';
                                                              ^^^^^^
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)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\Praveen\Desktop\Projects\Angular2\universaltest\dist\ngfactory\src\app\app.server.module.ngfact
ory.ts:17:1)
    at Module._compile (module.js:571:32)
    at Module.m._compile (C:\Users\Praveen\Desktop\Projects\Angular2\universaltest\node_modules\ts-node\src\index.ts:406:23)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .ts] (C:\Users\Praveen\Desktop\Projects\Angular2\universaltest\node_modul
es\ts-node\src\index.ts:409:12)
    at Module.load (module.js:488:32)

Любой вклад будет оценен.


person Praveen Rana    schedule 29.04.2017    source источник


Ответы (1)


Я отправил вам запрос на вытягивание, ts-node не транспилирует модули es2015, такие как ngx-bootstrap, в node_modules, поэтому я использовал webpack для транспиляции кода.

https://github.com/ranavc32/SimpleMDE-angular-universal/pull/2/commits/193f4a8c58e01a2b55764532d7e3ca8101d312ec

person Éverton Roberto Auler    schedule 29.04.2017
comment
вау, настройка webpack.config прекрасно работает с ngx-bootstrap и Auler, если мы также хотим использовать MaterialDesign с вашим репо, какую настройку мне нужно сделать? - person Praveen Rana; 29.04.2017
comment
просто добавьте это выражение /^@angular\/material/ в массив белого списка в webpack.config - person Éverton Roberto Auler; 01.05.2017