angular-webpack-starter: Universal crashes in AOT mode

hello I am getting the following error when i try to compile universal.

> nodemon dist/server/index.js

[nodemon] 1.10.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: /Projects/SL/dist/**/*
[nodemon] starting `node dist/server/index.js`
/Projects/SL/node_modules/@angular/platform-browser/src/browser/browser_adapter.js:13
import { setRootDomAdapter } from '../dom/dom_adapter';
^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:528:28)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.23 (/Projects/SL/dist/server/index.js:6:14071)
    at t (/Projects/SL/dist/server/index.js:1:177)
[nodemon] app crashed - waiting for file changes before starting...

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 40 (17 by maintainers)

Most upvoted comments

@qdouble on running npm run universal:aot and then navigating to localhost:8000 , I am getting below error although UI renders properly but it is failing on server

Listening on: http://172.16.46.2:8000
EXCEPTION: Cannot read property 'toLowerCase' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'toLowerCase' of undefined
    at new StyleCompatibility (/Users/kuldeepkeshwar/Desktop/poc/aot/angular-webpack2-starter/node_modules/@angular/material/material.umd.js:2250:59)
    at AppView._View_e0.createInternal (e.ngfactory.js:24:34)
    at AppView.create (/Users/kuldeepkeshwar/Desktop/poc/aot/angular-webpack2-starter/node_modules/@angular/core/bundles/core.umd.js:9178:25)
    at AppView._View_e_Host0.createInternal (e_Host.ngfactory.js:17:14)
    at AppView.create (/Users/kuldeepkeshwar/Desktop/poc/aot/angular-webpack2-starter/node_modules/@angular/core/bundles/core.umd.js:9178:25)
    at ComponentFactory.create (/Users/kuldeepkeshwar/Desktop/poc/aot/angular-webpack2-starter/node_modules/@angular/core/bundles/core.umd.js:5832:40)
    at ApplicationRef_.bootstrap (/Users/kuldeepkeshwar/Desktop/poc/aot/angular-webpack2-starter/node_modules/@angular/core/bundles/core.umd.js:6804:44)
    at /Users/kuldeepkeshwar/Desktop/poc/aot/angular-webpack2-starter/node_modules/@angular/core/bundles/core.umd.js:6713:93
    at Array.forEach (native)
    at PlatformRef_._moduleDoBootstrap (/Users/kuldeepkeshwar/Desktop/poc/aot/angular-webpack2-starter/node_modules/@angular/core/bundles/core.umd.js:6713:46)
TypeError: Cannot read property 'toLowerCase' of undefined
    at new StyleCompatibility (/Users/kuldeepkeshwar/Desktop/poc/aot/angular-webpack2-starter/node_modules/@angular/material/material.umd.js:2250:59)
    at AppView._View_e0.createInternal (e.ngfactory.js:24:34)
    at AppView.create (/Users/kuldeepkeshwar/Desktop/poc/aot/angular-webpack2-starter/node_modules/@angular/core/bundles/core.umd.js:9178:25)
    at AppView._View_e_Host0.createInternal (e_Host.ngfactory.js:17:14)
    at AppView.create (/Users/kuldeepkeshwar/Desktop/poc/aot/angular-webpack2-starter/node_modules/@angular/core/bundles/core.umd.js:9178:25)
    at ComponentFactory.create (/Users/kuldeepkeshwar/Desktop/poc/aot/angular-webpack2-starter/node_modules/@angular/core/bundles/core.umd.js:5832:40)
    at ApplicationRef_.bootstrap (/Users/kuldeepkeshwar/Desktop/poc/aot/angular-webpack2-starter/node_modules/@angular/core/bundles/core.umd.js:6804:44)
    at /Users/kuldeepkeshwar/Desktop/poc/aot/angular-webpack2-starter/node_modules/@angular/core/bundles/core.umd.js:6713:93
    at Array.forEach (native)
    at PlatformRef_._moduleDoBootstrap (/Users/kuldeepkeshwar/Desktop/poc/aot/angular-webpack2-starter/node_modules/@angular/core/bundles/core.umd.js:6713:46)

kuldeepkeshwar on Nov 18, 2016

@privettoli Angular 4 will be released in few days with a completely new server side rendering. I suggest that you way for this release and migrate to it. Angular Universal will be removed as it will be merged to Angular core

Tuizi on Mar 10, 2017

@fmoessle Universal isn’t fully compatible with material unless you roll back to alpha 8, you can track the issue here: https://github.com/angular/material2/issues/308

qdouble on Nov 16, 2016

this isn’t a universal so much as it’s a problem with how AoT works, how angular packages their code, and webpack. for externals on the server you need to make sure it bundles any angular code so packages that start with @angular, angular2-, ng2-, ng-, and angular-

PatrickJS on Oct 27, 2016

I added AoT support to universal-starter by making sure every lib on the node side is included to ensure the requires are all correct

PatrickJS on Nov 16, 2016

Material doesn’t work with universal

DzmitryShylovich on Nov 16, 2016