Рендеринг на стороне сервера Angular 6.1 - PullRequest
Новая
       34

Рендеринг на стороне сервера Angular 6.1

0 голосов
/ 29 декабря 2018

Я работаю с Angular 6.1.0 и следую официальному документу по SSR здесь .

Проблема, с которой я сталкиваюсь, заключается в том, что при запуске команды:

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

serve:ssr выдает мне кучу ошибок из файлов .spec.ts моего node_modules.

Я загрузил свой проект на GitHub here Поскольку я понятия не имею, что его нарушает.

PS: исходный код, предоставленный официальными документами, также ломается с теми же ошибками.Следовательно, если должно быть что-то с моим env

Консольный вывод: 

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

> SSR_POC@0.0.0 build:ssr C:\Users\adity\Desktop\SSR_POC
> npm run build:client-and-server-bundles && npm run webpack:server


> SSR_POC@0.0.0 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]

> SSR_POC@0.0.0 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! SSR_POC@0.0.0 webpack:server: `webpack --config webpack.server.config.js --progress --colors`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the SSR_POC@0.0.0 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! SSR_POC@0.0.0 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 SSR_POC@0.0.0 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

1 Ответ

0 голосов
/ 30 декабря 2018

Итак, на основе одного из моих проектов я смог выяснить несколько проблем:

В массиве правил webpack.server.config.js у меня есть дополнительное правило: 

    {
            // 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},
    },

Я полагаю, что это приводит к тому, что некоторые предупреждения, отправленные вами вокруг System.import, устарели.

В server.ts у меня есть 

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

, которые не могут быть решены ./Ошибка main.bundle.

Кроме того, я думаю, что ваш файл tsconfig.server.json должен выглядеть следующим образом: 

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

И, наконец, для устранения ошибок при наборе текста с помощью жасмина вам необходимо обновить машинопись до версии 2.9.х (npm update typescript) должен добиться цели.

...