2016-05-07 4 views
0

Я пытаюсь получить Угловое 2 + Webpack работу - и я почти там :)Webpack + Angular2 неправильный publicPath?

Последняя проблема, мне нужно решить это:

При просмотре детского маршрута (например,/childroute/основной) все работает по назначению, пока я использую маршрутизатор-ссылки.
При вводе адреса вручную или при перезагрузке я получаю 404 с неправильными путями связок .. Он должен быть локальным: 5001/dist/bundle.js, но webpack пытается получить localhost: 5001/childroute/dist/bundle. js. Изменение моего publicPath в WebPack не работает :(

Вот мой WebPack конфигурации:

"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") 
] 
}; 

Я надеюсь, что кто-то может дать мне подсказку :)
Спасибо, ребята!

Редактировать: Если я изменяю пути скрипта в index.html от "dist/bundle.js" до "/dist/bundle.js", я получаю скрипты загруженными, но угловые не находят мои шаблоны тогда ... ту же ошибку с дополнительным «/ childroute /» в пути шаблона.

ответ

0

Это обычная проблема, так как эти запросы обрабатываются сначала на вашем сервере (apache, nginx ..), а ваш серверный сервер, вероятно, не настроен для обработки таких запросов. Решение состоит в том, чтобы сконфигурировать ваш backend для обслуживания index.html при запросах на/childroute/main или, вернее, index.html для всех запросов.

Таким образом, при доступе к/childroute/main, ваш бэкэнд по-прежнему будет обслуживать ваше приложение-ответ, которое затем будет заботиться о маршрутизации.

+0

У меня была бэкенд (asp.net ядро) установка уже работает, и перед моим переходом на WebPack (от глотка), все работает отлично (в том числе этих дочерних маршрутов) ... мой шаблон URL является»./app/... ", почему угловой запрос"/childroute/app/... ".. я не понимаю :( –

+0

Итак, попробуйте и добавьте косую черту (/) в свой тег скрипта в индексе .html. – hansn

+0

Спасибо, попробовал это (см. мое Редактирование) .. Скрипты теперь загружаются нормально, но теперь у моего TemplateUrls есть дополнительная Childroute-Party в их url ... –

0

Или вы можете использовать HashLocationStrategy

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

Не так красиво, как PathLocationStrategy но вам не нужна поддержка сервера.

1

, если вы добавили тег base к вашему index.html, все ресурсы загружаются относительно базового пути, а не относительно текущего маршрута.

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

Спасибо, но у меня есть эта строка в моем index.html –