davideast / angular-universal-express-firebase Goto Github PK

As a result, router.use(express.static(config.staticDirectory)) gets always called and crashes if staticDirectory is undefined.

function valueExists(value) { return typeof value !== 'undefined' || value !== null; }

Should return:
!(typeof value === 'undefined' || value === null)

Everything is right in the repo but installing from npm/yarn doesn't include the type definitions for extraProviders. So TypeScript throws an error that stops the compilation.

At this point my Universal app seems to be mostly working when I run it locally using firebase serve --only functions,hosting. I can access localhost:5000 and see my application, and when I turn js off I can see that Universal is rendering the front page server side.

However there are a few issues. Routes do not seem to work at all server side, any route I try just renders the front page of the app. Also when I try to firebase deploy I get an error that doesn't give me much context to go on:

Further, if I try to hit the function directly on my local, I get the following errors in the terminal:

Error: Can't set headers after they are sent. at ServerResponse.OutgoingMessage.setHeader (_http_outgoing.js:357:11) at ServerResponse.header (/usr/local/lib/node_modules/firebase-tools/node_modules/express/lib/response.js:730:10) at ServerResponse.send (/usr/local/lib/node_modules/firebase-tools/node_modules/express/lib/response.js:170:12) at ServerResponse.json (/usr/local/lib/node_modules/firebase-tools/node_modules/express/lib/response.js:256:15) at ProxyServer.Supervisor._proxy.on (/usr/local/lib/node_modules/firebase-tools/node_modules/@google-cloud/functions-emulator/src/supervisor/supervisor.js:97:12) at ProxyServer.emit (/usr/local/lib/node_modules/firebase-tools/node_modules/eventemitter3/index.js:144:27) at ClientRequest.proxyError (/usr/local/lib/node_modules/firebase-tools/node_modules/http-proxy/lib/http-proxy/passes/web-incoming.js:156:18) at emitOne (events.js:101:20) at ClientRequest.emit (events.js:188:7) at Socket.socketOnEnd (_http_client.js:345:9) info: Execution took 61049 ms, finished with status: 'crash'

I'm not sure if these issues are related or not, let me know if they should be split into separate issues. For reference you can find my branch here.

I have just tried to update my angular project to the latest version and when updating the dependencies it says:

warning "[email protected]" has incorrect peer dependency

Is there an update planned for the angular 5 release?

Finished all install setup steps (I believe)

firebase serve --only functions,hosting

=== Serving from '/Users/stephenfluin/workspace/fidget-spinner'...

i  functions: Preparing to emulate HTTPS functions. Support for other event types coming soon.
Warning: You're using Node.js v7.1.0 but Google Cloud Functions only supports v6.11.1.
i  hosting: Serving hosting files from: dist
✔  hosting: Local server: http://localhost:5000

Server#addProtoService is deprecated. Use addService instead
⚠  functions: Failed to load functions source code. Ensure that you have the latest SDK by running npm i --save firebase-functions inside the functions directory. Please note that emulation of custom config values are not supported yet. Run firebase serve --only hosting to only serve hosting files.

FirebaseError: Error occurred while parsing your function triggers.

TypeError: root path required
    at Function.serveStatic [as static] (/Users/stephenfluin/workspace/fidget-spinner/functions/node_modules/serve-static/index.js:40:11)
    at createExpressApp (/Users/stephenfluin/workspace/fidget-spinner/functions/node_modules/angular-universal-express-firebase/index.js:29:34)
    at Object.exports.trigger (/Users/stephenfluin/workspace/fidget-spinner/functions/node_modules/angular-universal-express-firebase/index.js:12:38)
    at Object.<anonymous> (/Users/stephenfluin/workspace/fidget-spinner/functions/index.js:11:36)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
i  functions: No HTTPS functions emulated. Support for other function types are coming soon.```

If a user runs the npm/yarn install at the base of their project, functions won't pick it up. I understand the convention is to put basic install info at the start of the readme, but it should be clarified that this needs to be run from inside the functions folder.

• Angular: 5.0.1
• angular/cli: 1.5.0
• without @nguniversal/module-map-ngfactory-loader as my project doesn't do lazy loading

Tried SSR following guide, firebase serve works well but after deploy, the web fails with Error: could not handle the request.
Firebase trigger function log says it finished with status 'crash':

Error: Cannot find module 'tslib'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.8e9l (/user_code/dist/main.bundle.js:1:3258)
at n (/user_code/dist/main.bundle.js:1:211)
at Object.bNRb (/user_code/dist/main.bundle.js:1:34420)
at n (/user_code/dist/main.bundle.js:1:211)
at Object.JwoV (/user_code/dist/main.bundle.js:1:11671)
at n (/user_code/dist/main.bundle.js:1:211)

Hello, my brother, I followed the guide of Angular Universal: server-side rendering as explained in the official documentation of Angular:
https://angular.io/guide/universal
I managed to run the application correctly having the 2 bundles, the browser and the server bundles.
I followed the steps of your video too: Angular Universal and Firebase Hosting. And I also followed on your partner's video: Getting Started with Cloud Functions for Firebase using TypeScript.
I used your angular-universal-express-firebase module to run the application within firebase functions and when I run the firebase serve of functions I get this error:

TypeError: readFile$(...).mergeMap is not a function at projectPath\functions\node_modules\angular-universal-express\index.js:36:14 at Layer.handle [as handle_request] (projectPath\functions\node_modules\express\lib\router\layer.js:95:5) at next (projectPath\functions\node_modules\express\lib\router\route.js:137:13) at Route.dispatch (projectPath\functions\node_modules\express\lib\router\route.js:112:3) at Layer.handle [as handle_request] (projectPath\functions\node_modules\express\lib\router\layer.js:95:5) at projectPath\functions\node_modules\express\lib\router\index.js:281:22 at param projectPath\functions\node_modules\express\lib\router\index.js:354:14) at param (projectPath\functions\node_modules\express\lib\router\index.js:365:14) at Function.process_params (projectPath\functions\node_modules\express\lib\router\index.js:410:3) at next (projectPath\functions\node_modules\express\lib\router\index.js:275:10)

I have this in my package.json file

"dependencies": { "@angular/animations": "^6.0.0", "@angular/cdk": "^6.0.2", "@angular/common": "^6.0.0", "@angular/compiler": "^6.0.0", "@angular/core": "^6.0.0", "@angular/flex-layout": "^5.0.0-beta.14", "@angular/forms": "^6.0.0", "@angular/http": "^6.0.0", "@angular/material": "^6.1.0", "@angular/platform-browser": "^6.0.0", "@angular/platform-browser-dynamic": "^6.0.0", "@angular/platform-server": "^6.1.3", "@angular/router": "^6.0.0", "@nguniversal/express-engine": "^6.1.0", "@nguniversal/module-map-ngfactory-loader": "^6.0.0", "@toverux/ngx-sweetalert2": "^4.0.0", "angular-universal-express-firebase": "0.0.4", "angularfire2": "^5.0.0-rc.11", "core-js": "^2.5.4", "express": "^4.16.3", "firebase": "^5.3.0", "firebase-admin": "~6.0.0", "firebase-functions": "^2.0.5", "hammerjs": "^2.0.8", "ngx-toastr": "^8.10.0", "rxjs": "^6.0.0", "rxjs-compat": "^6.2.0", "sweetalert2": "^7.21.1", "zone.js": "^0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.6.0", "@angular-devkit/schematics": "^0.7.5", "@angular/cli": "~6.0.0", "@angular/compiler-cli": "^6.0.0", "@angular/language-service": "^6.0.0", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.2.1", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~1.4.2", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.3.0", "ts-loader": "^4.5.0", "ts-node": "~5.0.1", "tslint": "~5.9.1", "typescript": "~2.7.2", "webpack-cli": "^3.1.0" }, "private": true

Can you help me?
What am I doing wrong?
Please.

I've completed the setup and tried running the SSR locally, unfortunately whenever i try to hit localhost:5000 i get an error on the Firebase function:

SyntaxError: Unexpected token import

Which from I can gather from my research is related to Node.js not supporting modern versions of ES and can be solved by includingvar express = require("express");
Unfortunately that doesn't seem to fix the issue.

The log is as follows:

=== Serving from ''...

i functions: Preparing to emulate functions.
Warning: You're using Node.js v8.9.0 but Google Cloud Functions only supports v6.11.1.
i hosting: Serving hosting files from: dist
✔ hosting: Local server: http://localhost:5000

✔ functions: trigger: http://localhost:5001/curselo-web/us-central1/trigger
[hosting] Rewriting / to local function trigger
info: User function triggered, starting execution
error: /functions/node_modules/@angular-mdl/core/components/button/mdl-button.component.js:11
import { Component, Input, ElementRef, Renderer2, NgModule, ViewEncapsulation } from '@angular/core';
^^^^^^

SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:599:28)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object.jriz (/functions/dist-server/main.bundle.js:1:707107)
info: Execution took 82 ms, finished with status: 'crash'
127.0.0.1 - - [01/Nov/2017:15:31:55 +0000] "GET / HTTP/1.1" 500 99 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36"
error: Function worker crashed with exit code: 1

when running yarn add angular-universal-express-firebase:

warning "[email protected]" has unmet peer dependency "@angular/animations@^4.2.4".
warning "[email protected]" has unmet peer dependency "@angular/common@^4.2.4".
warning "[email protected]" has unmet peer dependency "@angular/compiler@^4.2.4".
warning "[email protected]" has unmet peer dependency "@angular/core@^4.2.4".
warning "[email protected]" has unmet peer dependency "@angular/forms@^4.2.4".
warning "[email protected]" has unmet peer dependency "@angular/http@^4.2.4".
warning "[email protected]" has unmet peer dependency "@angular/platform-browser@^4.2.4".
warning "[email protected]" has unmet peer dependency "@angular/platform-browser-dynamic@^4.2.4".
warning "[email protected]" has unmet peer dependency "@angular/platform-server@^4.3.3".
warning "[email protected]" has unmet peer dependency "@angular/router@^4.2.4".
warning "[email protected]" has unmet peer dependency "core-js@^2.4.1".
warning "[email protected]" has unmet peer dependency "rxjs@^5.4.2".
warning "[email protected]" has unmet peer dependency "zone.js@^0.8.14".
warning "[email protected]" has unmet peer dependency "@angular/animations@^4.3.3".
warning "[email protected]" has unmet peer dependency "@angular/common@^4.3.3".
warning "[email protected]" has unmet peer dependency "@angular/compiler@^4.3.3".
warning "[email protected]" has unmet peer dependency "@angular/core@^4.3.3".
warning "[email protected]" has unmet peer dependency "@angular/forms@^4.3.3".
warning "[email protected]" has unmet peer dependency "@angular/http@^4.3.3".
warning "[email protected]" has unmet peer dependency "@angular/platform-browser@^4.3.3".
warning "[email protected]" has unmet peer dependency "@angular/platform-browser-dynamic@^4.3.3".
warning "[email protected]" has unmet peer dependency "@angular/platform-server@^4.3.3".
warning "[email protected]" has unmet peer dependency "@angular/router@^4.3.3".
warning "[email protected]" has unmet peer dependency "core-js@^2.4.1".
warning "[email protected]" has incorrect peer dependency "firebase-admin@^5.1.0".
warning "[email protected]" has incorrect peer dependency "firebase-functions@^0.6.1".
warning "[email protected]" has unmet peer dependency "rxjs@^5.4.2".
warning "[email protected]" has unmet peer dependency "zone.js@^0.8.14".

I'm assuming this is because the functions folder package.json doesn't have any of these installed.

Installation step says angular-universal-express-firebase but require package is angular-universal-firebase-hosting

...firebase-hosting doesn't appear to be on the npm registry.

I have lazy loaded few modules and deployed the code to firebase hosting . When i view the page source, I don't see the seo content.
I configured the server side rendering as per your video tutorial