Skip to content

Adding elements from universal starter with this one #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
beckmeindia opened this issue Jul 22, 2016 · 8 comments
Closed

Adding elements from universal starter with this one #77

beckmeindia opened this issue Jul 22, 2016 · 8 comments

Comments

@beckmeindia
Copy link

Hey,
First of all I wanted to thank you for writing a great starter for angularfire2 with webpack.
It is perfect and I am using it to build my website.

The only problem I faced was the use of angular-universal. They too have a starter but I am using this because it doesn't have Firebase integrated.
Could you please tell me how to integrate the angular-universal with this. I have gone through all the docs but could not find a way out.

Cheers,
Rahul

@r-park
Copy link
Owner

r-park commented Jul 22, 2016

Hi @beckmeindia — I'm sorry but I haven't had a chance to try angular universal yet. 😕

@beckmeindia
Copy link
Author

Hey @r-park
I have been trying to integrate your angularfire2 starter with another webpack project. But I am failing miserably. I have re-checked all the files like typings.json entry files & package and have integrated these two. But for some reason it always keeps showing me that AngularFire has no provider.

Could you please help?

Thanks,
Rahul

Here are the errors and warnings that I get on my terminal

ts-loader: Using [email protected] and C:\Users\gemini\Desktop\universal-starter
\tsconfig.json
ts-loader: Using [email protected] and C:\Users\gemini\Desktop\universal-starter
\tsconfig.json
Hash: bd2f595b9096a8fc737983901af8ba408b496049
Version: webpack 1.13.1
Child
Hash: bd2f595b9096a8fc7379
Version: webpack 1.13.1
Time: 98693ms
Asset Size Chunks Chunk Names
index.js 3.05 MB 0 [emitted] main
+ 494 hidden modules

WARNING in ./~/angularfire2/angularfire2.js
Cannot find source file './/angularfire2.ts': Error: Cannot resolve 'file' o

r 'directory' .//angularfire2.ts in C:\Users\gemini\Desktop\universal-starter\no
de_modules\angularfire2

WARNING in ./~/angularfire2/utils/firebase_list_observable.js
Cannot find source file './/utils/firebase_list_observable.ts': Error: Canno

t resolve 'file' or 'directory' .//utils/firebase_list_observable.ts in C:\Users
\gemini\Desktop\universal-starter\node_modules\angularfire2\utils

WARNING in ./~/angularfire2/utils/firebase_list_factory.js
Cannot find source file './/utils/firebase_list_factory.ts': Error: Cannot r

esolve 'file' or 'directory' .//utils/firebase_list_factory.ts in C:\Users\gemin
i\Desktop\universal-starter\node_modules\angularfire2\utils

WARNING in ./~/angularfire2/tokens.js
Cannot find source file './/tokens.ts': Error: Cannot resolve 'file' or 'dir

ectory' .//tokens.ts in C:\Users\gemini\Desktop\universal-starter\node_modules\a
ngularfire2

WARNING in ./~/angularfire2/utils/firebase_object_observable.js
Cannot find source file './/utils/firebase_object_observable.ts': Error: Can

not resolve 'file' or 'directory' .//utils/firebase_object_observable.ts in C:\U
sers\gemini\Desktop\universal-starter\node_modules\angularfire2\utils

WARNING in ./~/angularfire2/utils/utils.js
Cannot find source file './/utils/utils.ts': Error: Cannot resolve 'file' or

'directory' .//utils/utils.ts in C:\Users\gemini\Desktop\universal-starter\node
_modules\angularfire2\utils

WARNING in ./~/angularfire2/utils/firebase_object_factory.js
Cannot find source file './/utils/firebase_object_factory.ts': Error: Cannot

resolve 'file' or 'directory' .//utils/firebase_object_factory.ts in C:\Users\g
emini\Desktop\universal-starter\node_modules\angularfire2\utils

WARNING in ./~/angularfire2/providers/firebase_sdk_auth_backend.js
Cannot find source file './/providers/firebase_sdk_auth_backend.ts': Error:

Cannot resolve 'file' or 'directory' .//providers/firebase_sdk_auth_backend.ts i
n C:\Users\gemini\Desktop\universal-starter\node_modules\angularfire2\providers

WARNING in ./~/angularfire2/providers/auth.js
Cannot find source file './/providers/auth.ts': Error: Cannot resolve 'file'

or 'directory' .//providers/auth.ts in C:\Users\gemini\Desktop\universal-starte
r\node_modules\angularfire2\providers

WARNING in ./~/angularfire2/database/database.js
Cannot find source file './/database/database.ts': Error: Cannot resolve 'fi

le' or 'directory' .//database/database.ts in C:\Users\gemini\Desktop\universal-
starter\node_modules\angularfire2\database

WARNING in ./~/angularfire2/providers/auth_backend.js
Cannot find source file './/providers/auth_backend.ts': Error: Cannot resolv

e 'file' or 'directory' .//providers/auth_backend.ts in C:\Users\gemini\Desktop
universal-starter\node_modules\angularfire2\providers

WARNING in ./~/angularfire2/utils/query_observable.js
Cannot find source file './/utils/query_observable.ts': Error: Cannot resolv

e 'file' or 'directory' .//utils/query_observable.ts in C:\Users\gemini\Desktop
universal-starter\node_modules\angularfire2\utils
Child
Hash: 83901af8ba408b496049
Version: webpack 1.13.1
Time: 68779ms
Asset Size Chunks Chunk Names
index.js 13.7 kB 0 [emitted] main
+ 22 hidden modules

[email protected] start C:\Users\gemini\Desktop\universal-starter
npm run server

[email protected] server C:\Users\gemini\Desktop\universal-starter
nodemon dist/server/index.js

[nodemon] 1.9.2
[nodemon] to restart at any time, enter rs
[nodemon] watching: C:\Users\gemini\Desktop\universal-starter\dist/*/ src/inde
x.html
[nodemon] starting node dist/server/index.js
Listening on: http://localhost:3000
EXCEPTION: No provider for AngularFire!
STACKTRACE:
Error: DI Exception
at NoProviderError.BaseException [as constructor](C:UsersgeminiDesktopu
[email protected]:27:23)
at NoProviderError.AbstractProviderError [as constructor](C:UsersgeminiD
esktopuniversal-starternode_modules@angularcoresrcdireflective_exceptions
.js:43:16)
at new NoProviderError (C:\Users\gemini\Desktop\universal-starter\node_modul
es@angular\core\src\di\reflective_exceptions.js:80:16)
at ReflectiveInjector_.throwOrNull (C:\Users\gemini\Desktop\universal-start
er\node_modules@angular\core\src\di\reflective_injector.js:786:19)
at ReflectiveInjector
.getByKeyDefault (C:\Users\gemini\Desktop\universal-s
tarter\node_modules@angular\core\src\di\reflective_injector.js:814:25)
at ReflectiveInjector
.getByKey (C:\Users\gemini\Desktop\universal-starter
node_modules@angular\core\src\di\reflective_injector.js:777:25)
at ReflectiveInjector
.get (C:\Users\gemini\Desktop\universal-starter\node_m
odules@angular\core\src\di\reflective_injector.js:586:21)
at AppView.View_App_Host0.createInternal (App.template.js:15:87)
at AppView.create (C:\Users\gemini\Desktop\universal-starter\node_modules@a
ngular\core\src\linker\view.js:96:21)
at ComponentFactory.create (C:\Users\gemini\Desktop\universal-starter\node_m
odules@angular\core\src\linker\component_factory.js:157:36)
EXCEPTION: No provider for AngularFire!
ngOnInit Error: { [Error: No provider for AngularFire!]
message: 'No provider for AngularFire!',
stack: 'Error: DI Exception\n at NoProviderError.BaseException [as construc
tor](C:\Users\gemini\Desktop\universal-starter\node_modules@angular\cor
e\src\facade\exceptions.js:27:23)\n at NoProviderError.AbstractProviderErr
or [as constructor](C:\Users\gemini\Desktop\universal-starter\node_modules
@angular\core\src\di\reflective_exceptions.js:43:16)\n at new NoProvide
rError (C:\Users\gemini\Desktop\universal-starter\node_modules@angular\c
ore\src\di\reflective_exceptions.js:80:16)\n at ReflectiveInjector
.throw
OrNull (C:\Users\gemini\Desktop\universal-starter\node_modules@angular\c
ore\src\di\reflective_injector.js:786:19)\n at ReflectiveInjector
.getByK
eyDefault (C:\Users\gemini\Desktop\universal-starter\node_modules@angular
\core\src\di\reflective_injector.js:814:25)\n at ReflectiveInjector
.get
ByKey (C:\Users\gemini\Desktop\universal-starter\node_modules@angular\co
re\src\di\reflective_injector.js:777:25)\n at ReflectiveInjector
.get (C:
\Users\gemini\Desktop\universal-starter\node_modules@angular\core\src\d
i\reflective_injector.js:586:21)\n at AppView.View_App_Host0.createInternal
(App.template.js:15:87)\n at AppView.create (C:\Users\gemini\Desktop\uni
versal-starter\node_modules@angular\core\src\linker\view.js:96:21)\n a
t ComponentFactory.create (C:\Users\gemini\Desktop\universal-starter\node_m
odules@angular\core\src\linker\component_factory.js:157:36)',
keys: [ ReflectiveKey { token: [Function: AngularFire], id: 76 } ],
injectors:
[ ReflectiveInjector
{
_debugContext: null,
_constructionCounter: 44,
_proto: [Object],
_parent: [Object],
strategy: [Object] } ],
constructResolvingMessage: [Function] }
Error: DI Exception
at NoProviderError.BaseException [as constructor](C:UsersgeminiDesktopu
[email protected]:27:23)
at NoProviderError.AbstractProviderError [as constructor](C:UsersgeminiD
esktopuniversal-starternode_modules@angularcoresrcdireflective_exceptions
.js:43:16)
at new NoProviderError (C:\Users\gemini\Desktop\universal-starter\node_modul
es@angular\core\src\di\reflective_exceptions.js:80:16)
at ReflectiveInjector
.throwOrNull (C:\Users\gemini\Desktop\universal-start
er\node_modules@angular\core\src\di\reflective_injector.js:786:19)
at ReflectiveInjector
.getByKeyDefault (C:\Users\gemini\Desktop\universal-s
tarter\node_modules@angular\core\src\di\reflective_injector.js:814:25)
at ReflectiveInjector
.getByKey (C:\Users\gemini\Desktop\universal-starter
node_modules@angular\core\src\di\reflective_injector.js:777:25)
at ReflectiveInjector
.get (C:\Users\gemini\Desktop\universal-starter\node_m
odules@angular\core\src\di\reflective_injector.js:586:21)
at AppView._View_App_Host0.createInternal (App.template.js:15:87)
at AppView.create (C:\Users\gemini\Desktop\universal-starter\node_modules@a
ngular\core\src\linker\view.js:96:21)
at ComponentFactory.create (C:\Users\gemini\Desktop\universal-starter\node_m
odules@angular\core\src\linker\component_factory.js:157:36)
EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to lo
ad 'Home'
STACKTRACE:
Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'Home'
at resolvePromise (C:\Users\gemini\Desktop\universal-starter\node_modules\zo
ne.js\dist\zone-node.js:496:32)
at C:\Users\gemini\Desktop\universal-starter\node_modules\zone.js\dist\zone-
node.js:473:14
at ZoneDelegate.invoke (C:\Users\gemini\Desktop\universal-starter\node_modul
es\zone.js\dist\zone-node.js:281:29)
at Object.NgZoneImpl.inner.inner.fork.onInvoke (C:\Users\gemini\Desktop\univ
ersal-starter\node_modules@angular\core\src\zone\ng_zone_impl.js:53:41)
at ZoneDelegate.invoke (C:\Users\gemini\Desktop\universal-starter\node_modul
es\zone.js\dist\zone-node.js:280:35)
at Zone.run (C:\Users\gemini\Desktop\universal-starter\node_modules\zone.js
dist\zone-node.js:174:44)
at C:\Users\gemini\Desktop\universal-starter\node_modules\zone.js\dist\zone-
node.js:529:58
at ZoneDelegate.invokeTask (C:\Users\gemini\Desktop\universal-starter\node_m
odules\zone.js\dist\zone-node.js:314:38)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (C:\Users\gemini\Desktop
universal-starter\node_modules@angular\core\src\zone\ng_zone_impl.js:44:41)
at ZoneDelegate.invokeTask (C:\Users\gemini\Desktop\universal-starter\node_m
odules\zone.js\dist\zone-node.js:313:43)
/data.json Cache Miss

@r-park
Copy link
Owner

r-park commented Jul 25, 2016

Hey @beckmeindia

WARNING in ./~/angularfire2/angularfire2.js
Cannot find source file './/angularfire2.ts': Error: Cannot resolve 'file' or 'directory' .//angularfire2.ts in C:\Users\gemini\Desktop\universal-starter\node_modules\angularfire2

These warnings are being emitted by the webpack source-map-loader. The angularfire2 sourcemaps are pointing to .ts sources that don't exist in the npm package.

The messages are annoying but they shouldn't stop the app from running. You can always comment out the preLoaders section of your webpack config, or alternatively you can exclude angularfire2:

const path = require('path');

preLoaders: [
  // needed to lower the filesize of angular due to inline source-maps
  { test: /\.js$/, loader: 'source-map-loader', exclude: [
    path.resolve('./node_modules/angularfire2')
  ]}
]

I don't think the EXCEPTION: No provider for AngularFire! is related to the sourcemap warnings — there might be an issue with your particular setup/config.

@beckmeindia beckmeindia changed the title Adding elemets from universal starter with this one Adding elements from universal starter with this one Jul 25, 2016
@beckmeindia
Copy link
Author

Hey @r-park
Thanks for the suggestion.
The warnings have disappeared presently but as you said, the No provider error is still there.
I have tried to take the elements from this project and integrate in mine. While most things should be fine, but I am a little doubtful about the entry variable where you have included './vendor.ts'

If I share the repository with you, could you please have a look at the setup/config to make sure I am not making some gaping mistakes?

@r-park
Copy link
Owner

r-park commented Jul 25, 2016

Sure I can take a quick look.

@beckmeindia
Copy link
Author

I have added the present repository here https://github.com/beckmeindia/universal-angularfire2

I have kept the angularfire2, firebase & firebase-tools files in the node-modules so that in case there is an error there, I could know.

Will be waiting for your review.

Thanks,
Rahul

@r-park
Copy link
Owner

r-park commented Jul 25, 2016

@beckmeindia I checked out your repo and tried it out.

The DI exceptions are raised during server-side rendering, partly because the AngularFire2 providers are missing form main.node.ts. The bad news is that even after adding the providers, certain modules like AngularFireAuth fail to initialize correctly and are therefore unavailable for injection.

At a glance, it doesn't look like AngularFire2 is compatible with server-side rendering at the moment 😕

@beckmeindia
Copy link
Author

Okay. Thanks for reviewing it.
I will try to ask the angular-universal developers to see if there is a
wayout and keep you posted.

Thanks a lot again!
On 25 Jul 2016 19:51, "Richard Park" [email protected] wrote:

@beckmeindia https://github.com/beckmeindia I checked out your repo and
tried it out.

The DI exceptions are raised during server-side rendering, partly because
the AngularFire2 providers are missing form main.node.ts. The bad news is
that even after adding the providers, certain modules like AngularFireAuth
fail to initialize correctly and are therefore unavailable for injection.

At a glance, it doesn't look like AngularFire2 is compatible with
server-side rendering at the moment 😕


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#77 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQo6KIwxTp854YnwwL5eVXHRUYb55Y8mks5qZMZ8gaJpZM4JSpCX
.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants