CODEWITHSUNDEEP
angularserver-side-renderingangular-universal
iam.Carrot
iam.Carrot

Reputation: 5286

Server Side Rendering Angular 6.1

I am working with Angular 6.1.0 and following the official doc on SSR here.

The problem I am facing is that when I run the command:

npm run build:ssr && npm run serve:ssr

the serve:ssr throws me a bunch of errors from the .spec.ts files of my node_modules.

I've uploaded my project on GitHub here Since I have no idea what's breaking it.

PS: The source code provided by the official docs also breaks with the same errors. Hence if must be something with my env

Console Output:

PS C:\Users\adity\Desktop\SSR_POC> npm run build:ssr

> [email protected] build:ssr C:\Users\adity\Desktop\SSR_POC
> npm run build:client-and-server-bundles && npm run webpack:server


> [email protected] build:client-and-server-bundles C:\Users\adity\Desktop\SSR_POC
> ng build --prod && ng run SSR_POC:server


Date: 2018-12-29T19:36:13.480Z
Hash: 58f58cfef181faaddfa4
Time: 27072ms
chunk {0} runtime.06daa30a2963fa413676.js (runtime) 1.44 kB [entry] [rendered]
chunk {1} main.ac3253c328cbe390a1de.js (main) 169 kB [initial] [rendered]
chunk {2} polyfills.677bdac3385565b157aa.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered]

Date: 2018-12-29T19:36:23.462Z
Hash: 884e7c93392763692b9e
Time: 5573ms
chunk {main} main.js, main.js.map (main) 22 kB [entry] [rendered]

> [email protected] webpack:server C:\Users\adity\Desktop\SSR_POC
> webpack --config webpack.server.config.js --progress --colors

Hash: c21ceede9ca319c83513
Version: webpack 4.16.4
Time: 9187ms
Built at: 2018-12-30 01:06:36
    Asset      Size  Chunks             Chunk Names
server.js  4.72 MiB       0  [emitted]  server
Entrypoint server = server.js
  [0] ./server.ts 1.91 KiB {0} [built]
  [2] external "events" 42 bytes {0} [built]
  [3] external "fs" 42 bytes {0} [built]
  [4] external "timers" 42 bytes {0} [optional] [built]
  [5] external "crypto" 42 bytes {0} [built]
[210] ./src lazy namespace object 160 bytes {0} [built]
[213] external "url" 42 bytes {0} [built]
[273] external "http" 42 bytes {0} [built]
[274] external "https" 42 bytes {0} [built]
[275] external "os" 42 bytes {0} [built]
[283] external "path" 42 bytes {0} [built]
[292] external "util" 42 bytes {0} [built]
[300] external "net" 42 bytes {0} [built]
[305] external "buffer" 42 bytes {0} [built]
[362] ./src sync 160 bytes {0} [built]
    + 375 hidden modules

WARNING in ./node_modules/@angular/core/fesm5/core.js 4997:15-36
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
 @ ./server.ts 5:0-47 10:0-14

WARNING in ./node_modules/@angular/core/fesm5/core.js 5009:15-102
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
 @ ./server.ts 5:0-47 10:0-14

ERROR in ./server.ts
Module not found: Error: Can't resolve './dist/server/main.bundle' in 'C:\Users\adity\Desktop\SSR_POC'
 @ ./server.ts 18:9-45

ERROR in C:\Users\adity\Desktop\SSR_POC\e2e\src\app.e2e-spec.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\e2e\src\app.e2e-spec.ts(3,1)
      TS2304: Cannot find name 'describe'.

ERROR in C:\Users\adity\Desktop\SSR_POC\e2e\src\app.e2e-spec.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\e2e\src\app.e2e-spec.ts(6,14)
      TS2345: Argument of type '() => void' is not assignable to parameter of type '(done: any) => Promise<void>'.
  Type 'void' is not assignable to type 'Promise<void>'.

ERROR in C:\Users\adity\Desktop\SSR_POC\e2e\src\app.e2e-spec.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\e2e\src\app.e2e-spec.ts(10,40)
      TS2345: Argument of type '() => void' is not assignable to parameter of type '(done: any) => Promise<void>'.
  Type 'void' is not assignable to type 'Promise<void>'.

ERROR in C:\Users\adity\Desktop\SSR_POC\e2e\src\app.e2e-spec.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\e2e\src\app.e2e-spec.ts(12,5)
      TS2304: Cannot find name 'expect'.

ERROR in C:\Users\adity\Desktop\SSR_POC\src\app\app.component.spec.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\src\app\app.component.spec.ts(3,1)
      TS2304: Cannot find name 'describe'.

ERROR in C:\Users\adity\Desktop\SSR_POC\src\app\app.component.spec.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\src\app\app.component.spec.ts(14,5)
      TS2304: Cannot find name 'expect'.

ERROR in C:\Users\adity\Desktop\SSR_POC\src\app\app.component.spec.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\src\app\app.component.spec.ts(19,5)
      TS2304: Cannot find name 'expect'.

ERROR in C:\Users\adity\Desktop\SSR_POC\src\app\app.component.spec.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\src\app\app.component.spec.ts(25,5)
      TS2304: Cannot find name 'expect'.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,47)
      TS1005: ';' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,90)
      TS1005: '(' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,104)
      TS1005: ']' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,112)
      TS1005: ',' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,113)
      TS1136: Property assignment expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,121)
      TS1005: ')' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,147)
      TS1005: '(' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,162)
      TS1005: ']' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,163)
      TS1005: ',' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,164)
      TS1136: Property assignment expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,165)
      TS1136: Property assignment expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,179)
      TS1005: ',' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,183)
      TS1005: ':' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,208)
      TS1005: '{' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,217)
      TS1005: ':' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,222)
      TS1005: ',' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,227)
      TS1005: ':' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,228)
      TS1109: Expression expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(140,230)
      TS1005: ')' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(633,30)
      TS1005: ';' expected.

ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts
[tsl] ERROR in C:\Users\adity\Desktop\SSR_POC\node_modules\@types\jasmine\index.d.ts(718,1)
      TS1128: Declaration or statement expected.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] webpack:server: `webpack --config webpack.server.config.js --progress --colors`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] webpack:server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\adity\AppData\Roaming\npm-cache\_logs\2018-12-29T19_36_36_231Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build:ssr: `npm run build:client-and-server-bundles && npm run webpack:server`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\adity\AppData\Roaming\npm-cache\_logs\2018-12-29T19_36_36_276Z-debug.log

Upvotes: 0

Views: 647

Answers (1)

Michael
Michael

Reputation: 2454

So based on one of my projects I was able to figure out a few issues:

In the rules array of webpack.server.config.js I have an additional rule:

    {
            // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
            // Removing this will cause deprecation warnings to appear.
            test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
            parser: {system: true},
    },

I believe this is causing some of the warnings you posted around System.import being deprecated.

In server.ts I have

const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require("./dist/server/main")

Which solves can't resolve ./main.bundle error.

Additionally, I think your tsconfig.server.json should look like:

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app-server",
    "baseUrl": "."
  },
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

And finally to solve the jasmine typing errors you need to update typescript to 2.9.x (npm update typescript) should do the trick.

Upvotes: 2

Related Questions