ui-router / angular

UI-Router for Angular: State-based routing for Angular (v2+)
https://ui-router.github.io/ng2/
MIT License
354 stars 135 forks source link

Can't resolve all parameters for HashLocationStrategy: ([object Object], ?). #162

Closed danfergo closed 7 years ago

danfergo commented 7 years ago

Hi guys, I have an angular4 application and I was trying to import it to angular-universal, and its not working. I get:

Error: Can't resolve all parameters for HashLocationStrategy: ([object Object], ?). at syntaxError (/home/danfergo/Projects/universal-starter/custom-webpack/dist/server.js:34711:34) at CompileMetadataResolver._getDependenciesMetadata (/home/danfergo/Projects/universal-starter/custom-webpack/dist/server.js:48947:35) at CompileMetadataResolver._getTypeMetadata (/home/danfergo/Projects/universal-starter/custom-webpack/dist/server.js:48815:26) at CompileMetadataResolver._getInjectableMetadata (/home/danfergo/Projects/universal-starter/custom-webpack/dist/server.js:48801:21) at CompileMetadataResolver.getProviderMetadata (/home/danfergo/Projects/universal-starter/custom-webpack/dist/server.js:49092:40) at /home/danfergo/Projects/universal-starter/custom-webpack/dist/server.js:49021:49 at Array.forEach () at CompileMetadataResolver._getProvidersMetadata (/home/danfergo/Projects/universal-starter/custom-webpack/dist/server.js:48981:19) at /home/danfergo/Projects/universal-starter/custom-webpack/dist/server.js:48556:63 at Array.forEach ()

I've cloned the project at https://github.com/angular/universal-starter/tree/master/custom-webpack and then updated src/app.module.ts

...
  imports: [
    CommonModule,
    HttpModule,
 // RouterModule.forRoot([
 //   { path: '', component: HomeView, pathMatch: 'full'},
 //   { path: 'lazy', loadChildren: './+lazy/lazy.module#LazyModule'}
 // ])
    UIRouterModule.forRoot({ states: [ helloState ], useHash: true })
  ],
...

├─┬ @angular/animations@4.4.4 ├─┬ @angular/common@4.4.4 ├─┬ @angular/compiler@4.4.4 ├─┬ @angular/compiler-cli@4.4.4 │ ├─┬ @angular/tsc-wrapped@4.4.4 ├─┬ @angular/core@4.4.4 ├─┬ @angular/http@4.4.4 ├─┬ @angular/platform-browser@4.4.4 ├─┬ @angular/platform-browser-dynamic@4.4.4 ├─┬ @angular/platform-server@4.4.4 ├─┬ @angular/router@4.4.4 ├─┬ @uirouter/angular@1.0.0-beta.7-SNAPSHOT.20170812

any ideas?

christopherthielen commented 7 years ago

FYI I just tried integrating with the cli example and the custom-webpack example. The cli example worked fine, but I'm getting the same error for the webpack example.

danfergo commented 7 years ago

Yep, I've tried with the cli after and it worked to. The problem is that I'm using pug & sass. After looking for differences I think that the problem lies arround the providers at ngExpressEngine call.

cli:

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

webpack:

 app.engine('html', ngExpressEngine({
  bootstrap: ServerAppModule
}));

I tried to apply the changes to the webpack version replacing the ./dist/server/main.bundle' with the ./dist/client.js , but no joy. I've also tried now to inject the exact provided with https://angular.io/api/common/PathLocationStrategy

providers: [{provide: APP_BASE_HREF, useValue: '/'}],

but i'm getting the same error. I've also noticed now the AppServerModuleNgFactory vs ServerAppModule being that the AppServerModuleNgFactory is generated by the aot compiler. https://github.com/robwormald/ng-universal-demo/issues/7

but there's also a prerender.ts in the cli version.

christopherthielen commented 7 years ago

I was able to get this working (commit: https://github.com/christopherthielen/universal-starter/commit/202264d63986e2db71e9026f3d2b77173211830d)

this line was the key: https://github.com/christopherthielen/universal-starter/blob/202264d63986e2db71e9026f3d2b77173211830d/custom-webpack/webpack/webpack.server.js#L12

ngehlert commented 4 years ago

facing a simliar issue / error. do you know by any chance how you fixed it in your webpack build 3 years ago? :D the links sadly don't work anymore

@christopherthielen

christopherthielen commented 4 years ago

@ngehlert Sadly, I have no memory of this place. Sorry!

ngehlert commented 4 years ago

@danfergo were you able to solve this with webpack?

danfergo commented 4 years ago

Sorry guys, I don't remember much as well. The only thing I can tell you is that since then (when I moved from angularjs to angular2), I just stopped using webpack directly, and the pug, sass, etc. configurations, and just started using angular-cli.