Webpack + Angular2 wrong publicPath?

Question

I am trying to get Angular 2 + Webpack working - and I am almost there :)

The last problem i need to solve is:

When browsing a child route (e.g. /childroute/main) everything works as intended, as long as I use router-links.
When entering the adress manually or doing a reload i get a 404 with wrong bundle paths.. It should be localhost:5001/dist/bundle.js , but webpack tries to get localhost:5001/childroute/dist/bundle.js . Changing my publicPath in webpack did not work :(

Here is my webpack config:

"use strict";
var webpack = require('webpack');
var path = require('path');

module.exports = {
entry: {
    "app": "./wwwroot/app/base/boot",
    "vendor": "./wwwroot/app/base/vendors"      
},
devtool: 'source-map',

output: {
    filename: "bundle.js",
    chunkFilename: "[id]chunk.js",
    path: "./wwwroot/dist/",
    publicPath: "./dist/"
},
//devServer: {
//    contentBase: "./wwwroot/",
//    host: "localhost",
//    port: 50001,
//    inline:true
//},
resolve: {

    extensions: ['','.js','.ts']
},
module: {
    loaders: [
        //Typescript
        {
            test: /\.ts$/,
            loader: 'ts-loader',
            exclude: '/node_modules/'
        },
        // SASS
        {
            test: /\.scss$/,
            loaders: ['style','css','sass'],
            exclude: '/node_modules/'
        },
        // Fonts & Files
        {
            test:  /\.(ttf|eot|txt|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
            loader: 'file-loader' ,
            exclude: '/node_modules/'
        }
    ]
},
plugins: [
    //new webpack.optimize.UglifyJsPlugin({
    //    compressor: {
    //        warnings: false
    //    }
    //}),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),
     new webpack.optimize.CommonsChunkPlugin("vendor","vendor_bundle.js")
]
};

I hope someone could give me a hint :)
Thanks guys!

Edit: If I change script paths in index.html from "dist/bundle.js" to "/dist/bundle.js", I get the scripts loaded, but angular does not find my templates then... same error with an additional "/childroute/" in template path..

score 1 · Answer 1 · answered May 08 '16 at 09:22

1

if you add a base tag to your index.html all resources are loaded relative from the base path and not relative from your current route.

<head>
<base href="/">
</head>

answered May 08 '16 at 09:22

Steffen

3,327
2
26
30

1

Thank you, but I have that line in my index.html – Mr. Muh May 09 '16 at 11:57

score 0 · Answer 2 · answered May 07 '16 at 18:46

0

This is a common problem, as these requests are handled first on your backend (apache, nginx..), and your backend server is probably not configured to handle such requests. The solution is to configure your backend to serve index.html on requests to /childroute/main, or better yet, return index.html on all requests.

This way, when accessing /childroute/main, your backend will still serve your react application, which then takes care of the routing.

answered May 07 '16 at 18:46

hansn

1,936
3
19
32

I had my backend (asp.net core) setup working already, and before my switch to webpack (from gulp), everything was working fine (including these child routes)... my template url is "./app/...", why does angular ask for "/childroute/app/..." .. i don't get it :( – Mr. Muh May 07 '16 at 18:58
Ok. Try and prepend a slash (/) to your script tag in index.html. – hansn May 07 '16 at 19:01
Thank you, tried that (see my Edit).. Scripts get loaded fine now, but now my TemplateUrls have an additional Childroute-Party in their url... – Mr. Muh May 07 '16 at 19:09
I'm not sure what you mean by that. You should be able to access your templates by using the same trick as with the script tag (prepend a slash) – hansn May 07 '16 at 19:12
I tried changing that, but it's not working.. either way i get an error "zone.js:101 GET https://localhost:5001/WinApo/app/base/templates/main-app.component.html 404 (Not Found)" , where the "/WinApo/" part is my childroute and should definitly not be there! (I just reloaded the whole page while in some child view). (Re-)Loading in my main-component works fine! – Mr. Muh May 07 '16 at 19:17
Hm. I don't think I can help you any further, but see here: http://stackoverflow.com/questions/16887018/stating-directive-templateurl-relative-to-root – hansn May 07 '16 at 19:20
Thanks for your help so far :) It could be a problem with angular2's new router, there are several issues reported on github.. – Mr. Muh May 07 '16 at 19:23

score 0 · Answer 3 · answered May 07 '16 at 21:17

0

Or you can use HashLocationStrategy

 bootstrap(MyApp,[..., provide(LocationStrategy, {useClass: HashLocationStrategy})])

Not so pretty like PathLocationStrategy but you do not need server support.

answered May 07 '16 at 21:17

IgorL

1,169
10
19

Webpack + Angular2 wrong publicPath?

3 Answers3

Linked