Error de “importación de token inesperada” con Angular4 + Universal + ng-bootstrap

Así que actualicé a angular 4+ solo para poder aprovechar el paquete universal para la representación del lado del servidor con fines de SEO. Implementé eso en mi proyecto angular 2+ existente actualizándolo a angular 4+ e hice toda la configuración necesaria desde https://github.com/evertonrobertoauler/cli-universal-demo/commit/a2610286bd3db5d4f4c443cd4c220c11963eb6 .

Solo hay una diferencia. Estoy usando ng-bootstrap https://ng-bootstrap.github.io/#/home (v1.0.0-alpha.22). Pero cuando ejecuto el servidor de nodos usando npm run start-u-dev , obtengo este error para importar palabras clave en ng-bootstrap.


[email protected] start-u-dev /Users/giric/Projects/apnaDoctor/webapp/appUI ts-node src/server.ts /appUI/node_modules/@ng-bootstrap/ng-bootstrap/accordion/accordion.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) 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. (/appUI/dist/ngfactory/src/app/app.server.module.ngfa ctory.ts:18:1) at Module._compile (module.js:571:32) at Module.m._compile (/appUI/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] (/webapp/appUI/node_mod ules/ts-node/src/index.ts:409:12) at Module.load (module.js:488:32) pm ERR! Darwin 16.6.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "start-u-dev" npm ERR! node v7.7.4 npm ERR! npm v4.1.2 npm ERR! code ELIFECYCLE npm ERR! [email protected] start-u-dev: `ts-node src/server.ts` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start-u-dev script 'ts-node src/server.ts'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the app-ui package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! ts-node src/server.ts npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs app-ui npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls app-ui npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: 

Así es como se ve mi package.json

 { "name": "app-ui", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "prestart": "npm install", "postinstall": "bower install", "prestart-u-dev": "npm install && ng build && ngc", "start-u-dev": "ts-node src/server.ts", "prestart-u-prod": "npm install && ng build --prod && ngc", "start-u-prod": "ts-node src/server.ts" }, "private": true, "dependencies": { "@angular/animations": "^4.0.1", "@angular/cli": "^1.0.0-rc.1", "@angular/common": "^4.0.1", "@angular/compiler": "^4.0.1", "@angular/compiler-cli": "^4.0.1", "@angular/core": "^4.0.1", "@angular/forms": "^4.0.1", "@angular/http": "^4.0.1", "@angular/platform-browser": "^4.0.1", "@angular/platform-browser-dynamic": "^4.0.1", "@angular/platform-server": "^4.0.1", "@angular/router": "^4.0.1", "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22", "angular2-toaster": "^3.0.1", "core-js": "^2.4.1", "ng2-webstorage": "^1.5.1", "rxjs": "^5.1.0", "rxjs-es": "^5.0.0-beta.12", "typescript": "^2.2.2", "ui-router-ng2": "^1.0.0-beta.4", "zone.js": "^0.7.6" }, "devDependencies": { "@types/jasmine": "2.5.38", "@types/node": "~6.0.60", "codelyzer": "~2.0.0", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^0.2.0", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "node-sass": "^4.5.0", "protractor": "~5.1.0", "raw-loader": "^0.5.1", "sass-loader": "^6.0.3", "ts-node": "~2.0.0", "tslint": "~4.4.2" } } 

Actualización: Anteriormente eliminé angular2-toaster, pero luego lo agregué nuevamente para asegurarme de que no era solo el módulo de tostador el que estaba lanzando el mismo error. Resulta que tanto angular2-toaster como ng-bootstrap lanzaron el mismo error.

Actualización 2: cuando ejecuto el servidor con ng server , funciona bien, no hay problemas con el uso de ng-bootstrap y angular2-toaster con angular 4+

¿Alguna sugerencia? Gracias por adelantado.

Para aquellos que intentan entender cuál es la solución, básicamente desea utilizar una lista blanca angular2-toaster y otros módulos que dan este problema.

  1. si usa angular-cli, use ng eject webpack.config.js para crear un webpack.config.js
  2. instale la webpack-node-externals través de npm install y agregue las siguientes líneas en el archivo webpack.config.js

     const nodeExternals = require('webpack-node-externals'); module.exports = { ... target: 'node', externals: [nodeExternals({ whitelist: [ /^@ng-bootstrap\/ng-bootstrap/, /^angular2\-toaster/, ] })], ... } 

Claramente es un problema de comstackción: no parece tener una configuración de transstackción adecuada para el código del lado del servidor. Tenga en cuenta que ng-bootstrap (como cualquier otra biblioteca Angular 2.x +) es el código de envío de la siguiente manera:

  • Código ES2015 desagregado (con importaciones)
  • Código ES5 incluido en UMD (sin importaciones)

Si desea ejecutar ng-bootstrap en el servidor, tiene 2 opciones: configurar la canalización de transstackción adecuada y usar código desagregado o importar desde un paquete (ubicado en la carpeta de bundles ).

Si decides utilizar un enfoque de paquete de ES5, deberías importar desde @ng-bootstrap/ng-bootstrap/dist/ng-bootstrap lugar de solo @ng-bootstrap/ng-bootstrap ). Pero para ser claro, no lo recomendaría, ya que tendría que tener diferentes importaciones en el código del lado del servidor y del lado del cliente.

Creo que puedes crear dos módulos. Uno es para que el navegador sea importado ng-bootstrap, otro para que el servidor no sea importado ng-bootstrap. Creo que tiene que crear un módulo más común para compartir componentes, servicio para el módulo del navegador y el módulo del servidor. Modal no rinde por servidor a SEO.