Can't serve fresh install Angular Ivy Enabled with PWA and Universal

[paulwscom]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes

Description

Just a fresh install angular ivy enabled with PWA and Universal

🔬 Minimal Reproduction

ng new shiny-ivy-app --enable-ivy
ng add @angular/pwa --project project-name
ng add @nguniversal/express-engine --clientProject angular.io-example
ng serve --open

🔥 Exception or Error

Schema validation failed with the following errors:
Data path "" should have required property 'main'.

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.1.0
Node: 10.15.3
OS: win32 x64
Angular: 8.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.801.0
@angular-devkit/build-angular              0.801.0
@angular-devkit/build-optimizer            0.801.0
@angular-devkit/build-webpack              0.801.0
@angular-devkit/core                       8.1.0
@angular-devkit/schematics                 8.1.0
@angular/pwa                               0.801.0
@ngtools/webpack                           8.1.0
@nguniversal/express-engine                8.1.0
@nguniversal/module-map-ngfactory-loader   8.1.0
@schematics/angular                        8.1.0
@schematics/update                         0.801.0
rxjs                                       6.5.2
typescript                                 3.4.5
webpack                                    4.35.2

[mgechev]

Thanks for reporting this issue! Ivy is in an opt-in preview, which means that it's not officially supported yet. In other words, we'd recommend using --enable-ivy flag only for experimental purposes.

I'll leave the issue open so we can keep track of the progress.

[bobspace]

I'm encountering the same issue with an even simpler repro case:

ng new my-app
ng add @nguniversal/express-engine --clientProject my-app
npm run build:ssr && npm run serve:ssr

Just trying to do the bare bones getting started case and it's not working.

[hoalarious]

Just got the same issue. Worked around it by re-adding build options in angular.json

          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest",
              "src/sitemap.xml",
              "src/robots.txt"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },

Afterwords you may get another error:

ERROR in Node does not exist: C:/something/angularProject/node_modules/@nguniversal/express-engine

Got around this one by removing

export { ngExpressEngine } from "@nguniversal/express-engine";
export { provideModuleMap } from "@nguniversal/module-map-ngfactory-loader";

in main.server.ts

I have an older working copy that doesn't have these lines in it. But it seems essential to this build as the server.js script just can't run without it.

In the end still not working though... Please help 💃

Getting this error:

internal/modules/cjs/loader.js:626
    throw err;
    ^

Error: Cannot find module './server/main'

[hoalarious]

Got further by adding this line back in from old code

import {enableProdMode} from '@angular/core';
// Express Engine
import {ngExpressEngine} from '@nguniversal/express-engine';
// Import module map for lazy loading
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';

into server.ts

and removing ngExpressEngine and provideModuleMap from

const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');

into server.ts

At the bottom of the outputted server.js file might load the wrong DIR to main.js. So you might need to update the DIR appropriately.

/***/ }),
/* 398 */
/***/ (function(module, exports) {

module.exports = require("./server/main");

/***/ })
/******/ ]);

into something like module.exports = require("./[project-name]-server/main");

[paulwscom]

@hoalarious It worked and can serve without problem but It will not work for npm run build:ssr if you're lazy loading modules

[hoalarious]

I couldn't get it to work with Ivy btw. Gonna stay way from Ivy until it's more stable.

[alan-agius4]

There seems to be a regression in Angular Universal Schematics which are causing options to be removed when using ng add.

I will take a look at it today.

[alan-agius4]

Closing in favor of angular/universal#1189

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}