angular-universal

The dicision boundary between Angular & Angular Universal

浪子不回头ぞ 提交于 2019-12-24 13:26:18
问题 I am working with Angular 6.1.0 . The problem I am trying out the demo on Server Side Rendering via the official doc here. They say, it's angular Universal meaning: A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal generates static application pages on the server through a process called server-side rendering (SSR). You can easily prepare an app for server-side rendering using the Angular CLI. Now I have an angular

What is the right way to use lodash-es in Angular Universal?

巧了我就是萌 提交于 2019-12-24 09:48:07
问题 Angular Universal server breaks when I replace my imports from lodash to lodash-es . But when I run ng serve , things are fine. I want to use lodash-es so I can cherry-pick lodash functions in my Angular SPA and shrink bundle size. Steps I took: npm uninstalled lodash , npm installed lodash-es , and replaced my imports like this: From: import { find as _find } from "lodash"; To: import { find as _find } from "lodash-es" ; This is the server error I am getting: /usr/src/app/node_modules/lodash

Angular-universal getting error: You must pass in a NgModule or NgModuleFactory to be bootstrapped

核能气质少年 提交于 2019-12-23 06:48:45
问题 I converted my existing angular-cli application to angular-universal by following this guide. You can look at my complete source code here. I am able to build both browser and client projects but I get following error when I view the app in the browser: Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped at View.engine (D:\ng-ssr-demo\dist\server.js:359545:23) The issue is in my server.ts file where AppServerModuleNgFactory is being undefined and as this factory is used

Deploy angular rendered app on shared server

笑着哭i 提交于 2019-12-23 02:24:29
问题 I created an Angular 7 app and built it using Angular universal to make it SEO friendly. However, as I was reading, it is not possible to deploy it now on a shared server (once build with Angular universal, otherwise it is possible), since it requires Node.JS to run the script file on server. My problem is that my hosting plan is on a shared server so I will not be able to run it using Node.JS but I still care of having my app SEO friendly. What can be a good solution? 回答1: Angular Universal

Angular5 Server side rendering, external Api data service does not work in ssr

坚强是说给别人听的谎言 提交于 2019-12-22 07:03:46
问题 I have setup and used successfully Angular5 + SSR. It is still pretty nice. All components works well on SSR and Non-SSR. And there are some services which calls external HTTP get apis to get some data. Of course it work well on a Non-SSR mode. But, the problem is that on SSR, node server does dot support to fetch and render the data. I can only see the fetched data after client side fetching and rendering. import {Injectable} from '@angular/core'; import { HttpClient, HttpHeaders } from '

How to add class to <body> in Angular Universal?

时光怂恿深爱的人放手 提交于 2019-12-21 19:47:28
问题 We can user Rendered2 in browser version of Angular app but it requires document.body reference and it's not available on server rendering. platform-browser has Title and Meta components but I would like to have more control over <head> section, like injecting <script> tags, accessing body element, etc. Is there a way to do it? 回答1: Actually, Angular Universal uses DOMINO library under the hood, which creates document in the same way as browser does. The only difference is that you have to

Updating meta tags for SEO using angular universal

送分小仙女□ 提交于 2019-12-20 01:42:06
问题 I am building an angular universal + angular 2 website and i want to add the social media share button. I implemented the server side rendering and i also update the meta tags necessary using the following code : constructor(private dataService: DataService, private activatedRoute: ActivatedRoute, private auth: AuthService, private router : Router, private meta : Meta) { this.currentUrl = window.location.href; // testing if it changes something to add that outside of the service : it didnt

angular universal app performance, APP_BOOTSTRAP_LISTENER, flicker

大城市里の小女人 提交于 2019-12-19 10:25:18
问题 Angular 4.4.6 Angular CLI 1.3.2 Node 6.x.x NPM 3.10.10 Webpack 3.4.1 In Angular Universal application when server view sift to client view there is flicker of screen, because all the API's which were called in server side rendering, also called in client side rendering, due to there was a flicker. To remove this flicker I implemented Angular Universal Transfer Module, it stores data in a Map cache ( private _map = new Map<string, any>(); ) while in server side rendering, and transfers it to

Update to Angular v6 - Module not found: Error: Can't resolve 'fs'

最后都变了- 提交于 2019-12-18 04:38:11
问题 I'm trying to migrate my Angular Universal project from Angular v5 to v6 I've got a service where I use fs to load the translation on the server side. Everything works well with Angular v5. With Angular v6, when I run npm run start aka ng serve --proxy-config proxy.conf.json I face the following error ERROR in ./src/providers/core/translate/translate-universal-loader.service.ts Module not found: Error: Can't resolve 'fs' in '/Users/me/Documents/projects/myproject/src/providers/core/translate'

How do I import svg from file to a component in angular 5?

可紊 提交于 2019-12-13 16:05:50
问题 All tutorials with adding svg to a component in AngularCli that I found recommend to insert it in html template, something like this: <div> <svg viewBox="0 0 250 250"> <svg:g class="group"> <svg:polygon class="shield" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" /> <svg:path class="a" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1 L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/> </svg:g