Setting up Angular Universal App for development

Question

I have created a project with Angular-CLI. (using command: ng new my-angular-universal). Then I carefully followed all the instructions from https://github.com/angular/angular-cli/wiki/stories-universal-rendering

It builds for --prod and works fine. But there are no instructions on how I can set up a --dev build and have it served with --watch flag.

I tried removing --prod flags from npm "scripts", and it doesn't even run in dev mode. It builds fine but when I open it in browser this is what I see (directly printed to response):

 TypeError: Cannot read property 'moduleType' of undefined
    at C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:7069:134
    at ZoneDelegate.invoke (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:105076:26)
    at Object.onInvoke (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:6328:33)
    at ZoneDelegate.invoke (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:105075:32)
    at Zone.run (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:104826:43)
    at NgZone.run (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:6145:69)
    at PlatformRef.bootstrapModuleFactory (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:7068:23)
    at Object.renderModuleFactory (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:52132:39)
    at View.engine (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:104656:23)
    at View.render (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:130741:8)

the versions of npm packages that I use are currently the latest:

• @angular/* - @5.2.*
• @angular/cli @1.7.3

except for ts-loader, had to downgrade it because it wasn't working:

• ts-loader @3.5.0

So if anyone has any info on how to make this work, it would be very appreciated! Or maybe you know some project templates with Angular Universal App configured for both --dev and --prod builds and ability to --watch?

Answer 1

For development, run npm run start which triggers ng serve. The current setup has hot module reloading so it will watch for your changes and update your dev view. I used the same instructions and got it working here https://github.com/ariellephan/angular5-universal-template

In short, for development, run npm run start and look at http://localhost:4200.

For production, run npm run build:ssr and npm run serve:ssrand look at http://localhost:4000