Angular 4 with Angular Cli

[kamalkech]

Hello ronwormald,

I update angular-cli and with this last version i add angular 4 and all work fine, but how can implement or use angular universal with angular cli

Any idea ?

[evertonrobertoauler]

Here I'm using the @angular/cli, try it out

https://medium.com/@evertonrobertoauler/angular-4-universal-app-with-angular-cli-db8b53bba07d

[evertonrobertoauler]

In this repo I added routing and lazy loading too

https://github.com/evertonrobertoauler/cli-universal-demo

https://github.com/evertonrobertoauler/cli-universal-demo/blob/master/src/app/app.server.module.ts

[kamalkech]

@evertonrobertoauler : That's work fine and thank you for your quick answer (y)

[kamalkech]

@evertonrobertoauler but there is a probleme when you try to create something like component :

ng g c blog
installing component
Error locating module for declaration
SilentError: Multiple module files found:

But i change the place of file "app.server.module.ts" to "src/"

Second probleme, is about autocompile typescript and reload file not working with "npm run start"

[evertonrobertoauler]

Try 'ng g c --module=app.module.ts blog'
While I'm developing, I'm using 'ng serve' in JIT mode, I'm not using Server Side Rendering, I just test it with SSR before I deploy the app in production.
But I belive the guys from the angular/cli and the Universal-CLI are working together to make it easier to do that in the near future.

[misticwonder]

There is a problem with scss files, they are not compiled. But the main problem that they included in responce html:

<link href="styles.7376780818b6d4321164.bundle.css" rel="stylesheet"><style ng-transition="website">@import '/../scss/vars';</style>

Browser tries to get scss/vars and express throws an error

ERROR { Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'scss/vars'
Error: Cannot match any routes. URL Segment: 'scss/vars'

[evertonrobertoauler]

Have a look at this demo with @angular/material:

https://github.com/evertonrobertoauler/cli-universal-demo/tree/%40angular/material

https://github.com/evertonrobertoauler/cli-universal-demo/blob/%40angular/material/src/app/home/home-page/home-page.component.scss

the @angular/compiler-cli doesn't work well with scss files with imports yet:

<style ng-transition="cli-universal-demo">[_nghost-c1] { color: $color-demo }</style>