Webpack 2 + React - nested routes when code splitting with System.import - javascript

I have an app that's based of http://moduscreate.com/code-splitting-for-react-router-with-es6-imports/ article. I've added some children routes and now my router config is as such:
function errorLoading(err) {
console.error('Dynamic page loading failed', err);
}
function loadRoute(cb) {
console.log('load route called');
return (module) => cb(null, module.default);
}
const obj = {
component: App,
childRoutes: [
{
path: '/',
getComponent(location, cb) {
System.import('pages/Home')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
{
path: '/gsgs',
getComponent(location, cb) {
System.import('pages/Gsgs')
.then(loadRoute(cb))
.catch(errorLoading);
},
childRoutes: [
{
path: 'go',
getComponent(location, cb) {
System.import('pages/Gsgs/Home.js')
.then(loadRoute(cb))
.catch(errorLoading);
},
}
]
},
{
path: '/about',
getComponent(location, cb) {
System.import('pages/About')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
]
};
/index, /about and /gsgs routes trigger dynamic code loading just fine. But /gsgs/go triggers a 404 with
bundle.js:2 Dynamic page loading failed Error: Loading chunk 0
failed.(…)
What am I doing wrong? Im using
"webpack": "^2.1.0-beta.4",
"webpack-dev-server": "^2.0.0-beta"

I have tried to reproduce the issue on the blog post and seems something is wrong. I have tried to fix that and I am not able to see that error any more.
You can refer to this commit which has changes against the current master and I am able to load child route dynamically.
Let me know if you face issues again. It would be great if you can have sample repo which can reproduce the issue, I will be glad to debug.
Happy to Help.

Check your config file, (in my case webpack.config.dev.js file) and check publicPath and set it to '/'. Ex : publicPath: '/' .
You need to set it in output like this
output: {
path: __dirname,
filename: 'app.js',
publicPath: '/',
/*publicPath: 'http://0.0.0.0:8000/',*/
}
I was getting this error
`http://0.0.0.0:8000/0.app.js
Error: "Loading chunk 0 failed."`
and it resolved by changing publicPath: 'http://0.0.0.0:8000/' To publicPath: '/'.

Related

angular 14 default router with param

I created an angular app with the last version, i updated the base href to /popup to have the url http://localhost:4200/popup
i want, when the application opens in the url http://localhost:4200/popup, it redirects me to a 404 page, but when i add a param in the url http://localhost:4200/popup/444444444 is opens a specific page.
I tried with the below code but i have this error:
main.ts:13 Error: NG04014: Invalid configuration of route
'/:requestNumber': path cannot start with a slash
<base href="/popup" />
export const routes: Routes = [
{ path: '', redirectTo: '/:requestNumber', pathMatch: 'full' },
{
path: '/:requestNumber',
component: AppComponent,
resolve: { payment: PaymentResolverService },
},
];
I added the resolver to check if the url has a param requestNumber or not.
The question isn't clear. If I understood you right - you can't expect a route with /popup/444444 to be caught by an empty path (because it is not an empty path, because it has 44444 in it), therefore, you can't write this:
{ path: '', redirectTo: '/:requestNumber', pathMatch: 'full' }
The path configuration above picks up empty paths, i.e. /popup/, when you want it to redirect to /popup/:requestNumber, where will it get the request number from?? (remember, the path that got you here was /popup/)
You can write this though, where empty paths are redirected to a 404 page:
export const routes: Routes = [
{
path: '',
component: Some404Page,
},
{
path: ':requestNumber',
redirectTo: 'popup/:requestNumber',
pathMatch: 'full',
},
{
path: 'popup/:requestNumber',
component: AppComponent,
resolve: { payment: PaymentResolverService },
},
];
Since this is the only hit on Google, I'll just add a side-answer.
I was getting this error for apparently this route:
{
path: 'stuff/moduleA',
loadChildren: () => import('./modules/module-a/module-a.module').then(m => m.module-a)
},
Which didn't make sense since there's clearly no leading slash there. The problem was actually that this lazily loaded module contained a route that looked like this:
{
path: '/',
component: AComponent,
},
The fix was to change this path by changing it to path: ''.
So check the routes inside of the loaded module, even if that route isn't mentioned in the error.

Nuxt custom router

I'm trying to create a custom route in Nuxt with the following nuxt.config.js:
router: {
base: '/',
router: {
extendRoutes (routes, resolve) {
routes.push({
name: 'custom',
path: 'here-i-am',
component: resolve(__dirname, 'pages/Slug.vue')
})
}
}
},
Though, when I visit localhost:3000/here-i-am - it is throwing: This page cannot be found. I have created Slug.vue under the /pages directory.
Am I missing something else? I have tried to rerun the compiler.
Two issues:
You currently have extendRoutes under a nested router property, which doesn't exist. Move it to the top-level router prop:
router: {
//router: { // DON'T DO THIS
// extendRoutes() {...}
//},
extendRoutes() {...}
}
The path property must start with a leading slash for non-nested routes:
routes.push({
// path: 'here-i-am' // DON'T DO THIS
path: '/here-i-am'
})

Angular 5 Universal exclude path from rendering on server

Are there any way I can force only browser rendering of particular path for Angular 5 universal app?
I have following routes in app.module.shared.ts
#NgModule({
declarations: [...],
imports: [
......
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'auth-callback', component: AuthCallbackComponent},
{ path: '**', redirectTo: 'home' }
]
)
],
providers: []
})
And I want mysite.com/auth-callback be only render in browser, not on server-side.
Thanks for any help, failed to find any helping info.
There is no such yet, you place api folder in angular 2 root.. if you do such this, there will conflict between Angular2/4/5 route with api routes...
So, whether use sub-domain or put angular and api code in different directories..
Yes its possible to load browser and server with route specific.
In your server.ts you need specify the routes like below.
let routesPath = ['/invite', '/invite/**','/lm', '/dashboard', '/dashboard/**', '/public/**', '/public', '/pre'];
server.get(routesPath, (req, res) => {
// console.log(req);
res.sendFile(distFolder + '/index.html');
});
then update your server.ts
let routesPath = ['/invite', '/invite/**','/lm', '/dashboard', '/dashboard/**', '/public/**', '/public', '/pre'];
server.get(routesPath, (req, res) => {
// console.log(req);
res.sendFile(distFolder + '/index.html');
});
// All regular routes use the Universal engine
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});
return server;
You see in above code there is two different server.get(). First one will load browser. All route mentioned in routesPath will show normal browser mode.
The second one is all regular routes that will render as SSR.
I know its too late to answer but I hope it helps somebody reaching this question.

How to change the request path in webpack

Im trying to integrate PhotoSwipe into my current Project
this is the webpack.config.js
module.exports =
{
entry: './input.js',
output:
{
path: 'js/',
filename: 'output.js'
},
resolve:
{
alias:
{
'photoswipe_js': './node_modules/photoswipe/dist/photoswipe.js',
'photoswipe_ui_default': './node_modules/photoswipe/dist/photoswipe-ui-default.js'
}
},
watch: true
};
this is my main file
require(['photoswipe_js', 'photoswipe_ui_default'], function( PhotoSwipe, PhotoSwipeUI_Default )
{
console.log(PhotoSwipe);
console.log(PhotoSwipeUI_Default);
});
for some reason its trying to find the compiled file from the project root
like
'/1.output.js'
I need it to try to fetch the output file from
'/bundles/mybundle/js/1.output.js'
instead, how can I do that?
Add publicPath to your output object :
module.exports =
{
...
output:
{
path: 'js/',
filename: 'output.js',
publicPath: '/bundles/mybundle/js/'
},
...
};

How to have a more readable bundle.js with webpack (sourcemap)?

I'm trying to make my first webpack project and I cannot find a way to change the numeric keys, which represent the modules in my output bundle.js, to a descriptive string so it will be easier to trace it in the debugger...
I have tried output.chunkFilename and output.sourceMapFilename without success.
This is how my gulp task looks like:
gulp.task('webpack', function (done) {
webpack({
entry: {
app: paths.src + "/main.js",
vendor: ['react/addons', 'lodash']
},
output: {
path: paths.dist,
filename: "bundle.js",
sourceMapFilename: '[file].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", 'vendor.bundle.js', Infinity)
]
}, function onWebpackComplete(err, stats) {
if (err) throw new gutil.PluginError("webpack", err);
done();
});
});
Is it even possible? am I using it wrong? Is there a better way?
Thanks!
In your webpack.config.js file add exports.output.pathinfo = true

Categories