docs(aio): update universal for CLI #20039

Foxandxss · 2017-10-30T22:42:57Z

Part of #19510

CaerusKaru

In general looks great, just a few minor nits to keep everything up to date in changes with the universal-starter and other v5 improvements

CaerusKaru · 2017-10-31T00:56:00Z

aio/content/examples/universal - copia/src/app/hero.service.ts

+  constructor(
+    private http: HttpClient,
+    @Optional() @Inject(APP_BASE_HREF) origin: string) {
+    this.heroesUrl = (origin || '') + this.heroesUrl;


this.heroesUrl = `${origin}${this.heroesUrl}` to maintain consistency with other methods in this file

CaerusKaru · 2017-10-31T00:57:08Z

aio/content/examples/universal/server.ts

+
+// #docregion renderModuleFactory
+app.engine('html', (_, options, callback) => {
+  renderModuleFactory(AppServerModuleNgFactory, {


Is there a reason we're still avoiding ngExpressEngine here?

CaerusKaru · 2017-10-31T00:58:38Z

aio/content/examples/universal/src/app/app.server.module.ts

+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,


Do we also want to add the TransferState modules? Or is this update intended for both v4.4 and v5?

This update will probably go for v5

CaerusKaru · 2017-10-31T00:59:18Z

aio/content/examples/universal/src/app/hero.service.ts

    @Optional() @Inject(APP_BASE_HREF) origin: string) {
-    this.heroesUrl = (origin || '') + this.heroesUrl;
-  }
+      this.heroesUrl = (origin || '') + this.heroesUrl;


Same new string infix as before

CaerusKaru · 2017-10-31T01:00:51Z

aio/content/examples/universal/webpack.server.config.js

+
+module.exports = {
+  entry: { server: "./server.ts" },
+  resolve: { extensions: [".ts", ".js"] },


Reverse these to satisfy issues documented here: angular/preboot#41 (comment)

CaerusKaru · 2017-10-31T01:01:35Z

aio/content/examples/universal/webpack.server.config.js

+    new webpack.ContextReplacementPlugin(
+      /(.+)?express(\\|\/)(.+)?/,
+      path.join(__dirname, "src")
+    )


Missing trailing {}

where? I got an error there that disappeared.

See https://github.com/angular/universal-starter/blob/59b02d9cf535c8c737b8300fa7597bc6cde048b2/webpack.server.config.js#L38

CaerusKaru · 2017-10-31T01:03:46Z

aio/content/guide/universal.md

 1. Show the first page quickly

 {@a seo}
 {@a web-crawlers}
 #### Facilitate web crawlers

-Google, Bing, Facebook, Twitter and other social media sites rely on web crawlers to index your application content and make that content searchable on the web. 
+Google, Bing, Facebook, Twitter and other social media sites rely on web crawlers to index your application content and make that content searchable on the web.

 These web crawlers may be unable to navigate and index your highly-interactive, Angular application as a human user could do.

 Angular Universal can generate a static version of your app that is easy searchable, linkable, and navigable without JavaScript.


/s/easy/easily

CaerusKaru · 2017-10-31T01:04:32Z

aio/content/guide/universal.md

- * `express` - node web server.
- * `@types/express` - TypeScript type definitions for express.
+ * `@nguniversal/module-map-ngfactory-loader` - For handling lazy-loading in the context of a server-render.
+ * `@nguniversal/express-engine` - An express engine for Universal applications.


Why install this if it's not mentioned anywhere else in this guide?

You are right with this and the previous comment. I mixed my snippets. It should use the engine.

CaerusKaru · 2017-10-31T01:06:12Z

aio/content/guide/universal.md

 </code-example>

 #### Serve static files safely

-A single `server.use()` treats all other URLs as requests for static assets
+A single `app.use()` treats all other URLs as requests for static assets
 such as JavaScript, image, and style files.

 To ensure that clients can only download the files that they are _permitted_ to see, you will [put all client-facing asset files in the `/dist` folder](#universal-webpack-configuration)
 and will only honor requests for files from the `/dist` folder.

 The following express code routes all remaining requests to `/dist`; it returns a `404 - NOT FOUND` if the file is not found.


Is this true? With the new server.ts, I think it will just default back to the Angular router.

Oh, I haven't touched this, I will check if for a non existing static it goes to 404 or not.

CaerusKaru · 2017-10-31T01:07:04Z

aio/content/guide/universal.md

@@ -613,8 +440,10 @@ First add the _build_ and _serve_ commands to the `scripts` section of the `pack
 <code-example format="." language="ts">
 "scripts": {
    ...
-    "build:uni": "webpack --config webpack.config.universal.js",
-    "serve:uni": "node dist/server.js",
+    "build:universal": "npm run build:client-and-server-bundles && npm run webpack:server",


Should this be build:ssr to match the universal-starter?

or the universal should match this 😂

I don't mind either.

and still better than the :dynamic the CLI wiki has 😂

Those targets have been changed as of angular/angular-cli#8256

PR Close #20039

wardbell · 2017-11-01T22:22:45Z

This is fine and necessary for v5 release. We can circle back to polish in a future PR

Installing dependencies for the docs examples fails, because the lockfile is out-of-sync with the corresponding `package.json`. This commit brings the lockfile in sync with `package.json`. (For reference, this was accidentally broken in angular#20039.)

Installing dependencies for the docs examples fails, because the lockfile is out-of-sync with the corresponding `package.json`. This commit brings the lockfile in sync with `package.json`. (For reference, this was accidentally broken in #20039.)

Installing dependencies for the docs examples fails, because the lockfile is out-of-sync with the corresponding `package.json`. This commit brings the lockfile in sync with `package.json`. (For reference, this was accidentally broken in #20039.) PR Close #20084

gkalpak · 2017-11-01T22:23:10Z

aio/tools/examples/example-boilerplate.js

+
+  normalizePath(filePath) {
+    // transform for example ../cli/src/tsconfig.app.json to src/tsconfig.app.json
+    return filePath.replace(/\.{2}\/\w+\//, '');


\w will not match -. It may not matter for now, but generally it is better to use \/[^/]+\/.

I see, I am very bad constructing regexp and I made one that works for all our current use cases.

gkalpak · 2017-11-01T22:24:57Z

aio/tools/example-zipper/customizer/package-json/universal.json

-    "@angular/compiler-cli",
-    "@angular/platform-server",
-    "express"
+    "web-animations-js",


Not aplphabetically ordered 😞

gkalpak · 2017-11-01T22:30:25Z

aio/content/examples/universal/webpack.server.config.js

+    // Temporary Fix for issue: https://github.com/angular/angular/issues/11580
+    // for 'WARNING Critical dependency: the request of a dependency is an expression'
+    new webpack.ContextReplacementPlugin(
+      /(.+)?angular(\\|\/)core(.+)?/,


(.+)? === .*
But if you don't need the matched text, you can drop them altogether. They don't change what the RegExp matches.

I copied that straight from the CLI docs, haven't touch the file. Now that you mention it, I am using it differently in a starter of mine

gkalpak · 2017-11-02T12:06:33Z

aio/content/examples/universal/src/app/dashboard/dashboard.component.ts

+
+  getHeroes(): void {
+    this.heroService.getHeroes()
+    .subscribe(heroes => this.heroes = heroes.slice(1, 5));


Bad indentation 😱

Good catch. I copied the toh-pt6 example, so I need to fix that there.

angular-automatic-lock-bot · 2019-09-12T19:52:16Z

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.}

Foxandxss added the comp: docs label Oct 30, 2017

Foxandxss requested a review from wardbell October 30, 2017 22:42

googlebot added the cla: yes label Oct 30, 2017

Foxandxss mentioned this pull request Oct 30, 2017

List of updates needed for CLI docs #19510

Closed

24 tasks

CaerusKaru reviewed Oct 31, 2017

View reviewed changes

Foxandxss force-pushed the aio-universal-cli branch 2 times, most recently from e2e2a06 to 862ed71 Compare October 31, 2017 10:56

docs(aio): update universal for CLI

38f801b

Foxandxss force-pushed the aio-universal-cli branch from 0070c09 to 38f801b Compare November 1, 2017 21:27

matsko pushed a commit that referenced this pull request Nov 1, 2017

docs(aio): update universal for CLI

851e1cf

PR Close #20039

matsko closed this in c30eff8 Nov 1, 2017

Foxandxss deleted the aio-universal-cli branch November 1, 2017 22:21

gkalpak mentioned this pull request Nov 1, 2017

build(aio): update lockfile for examples #20084

Closed

3 tasks

gkalpak reviewed Nov 2, 2017

View reviewed changes

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 12, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(aio): update universal for CLI #20039

docs(aio): update universal for CLI #20039

Foxandxss commented Oct 30, 2017

CaerusKaru left a comment

CaerusKaru Oct 31, 2017

CaerusKaru Oct 31, 2017

CaerusKaru Oct 31, 2017

Foxandxss Oct 31, 2017

CaerusKaru Oct 31, 2017

CaerusKaru Oct 31, 2017

CaerusKaru Oct 31, 2017

Foxandxss Oct 31, 2017

CaerusKaru Oct 31, 2017

CaerusKaru Oct 31, 2017

CaerusKaru Oct 31, 2017

Foxandxss Oct 31, 2017

CaerusKaru Oct 31, 2017

Foxandxss Oct 31, 2017

CaerusKaru Oct 31, 2017

Foxandxss Oct 31, 2017

Foxandxss Oct 31, 2017

CaerusKaru Oct 31, 2017

wardbell commented Nov 1, 2017

gkalpak Nov 1, 2017

Foxandxss Nov 2, 2017

gkalpak Nov 1, 2017

gkalpak Nov 1, 2017

Foxandxss Nov 2, 2017

gkalpak Nov 2, 2017

Foxandxss Nov 2, 2017

angular-automatic-lock-bot bot commented Sep 12, 2019

docs(aio): update universal for CLI #20039

docs(aio): update universal for CLI #20039

Conversation

Foxandxss commented Oct 30, 2017

CaerusKaru left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wardbell commented Nov 1, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Sep 12, 2019