我有一个AngularJS SPA应用程序,我使用Visual Studio 2015开发.当我点击发布它发布index.html并且工作得很好.但是,如果我在页面上并单击刷新,则会尝试刷新SPA页面,例如example.com/home/about.这失败了,因为我没有家/关于页面.

有没有办法可以修改我的web.config文件(仅用于本地测试),以便它实际上转到index.html(加载它)然后转到/ home / about状态？

这是我当前的web.config：

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>
</configuration>

您似乎正在使用 html5mode.在这种情况下,没有#来保持URL从请求更改为服务器.
使用此配置,您需要来自服务器的帮助.当它收到来自SPA路线的请求时,它将为index.html提供服务.

这个SO answer有关于在web.config上配置URL Rewrite的详细信息：

规则通过：

<system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

它假定您的API位于：/ api下,并且对于它找到的任何目录或文件,它按原样使用.
任何其他的,被重写为/将默认文档配置为index.html,将加载SPA.

另请注意,您需要安装URL Rewrite module for IIS(IIS Express doesn’t need the module)

另一个选项是这些轻量级HTTP服务器npm包之一.
John Papa has one: lite-server.它在引擎盖下使用BrowserSync：

browserSync does most of what we want in a super fast lightweight
development server. It serves the static content,detects changes,
refreshes the browser,and offers many customizations.

When creating a SPA there are routes that are only kNown to the
browser. For example,/customer/21 may be a client side route for an
Angular app. If this route is entered manually or linked to directly
as the entry point of the Angular app (aka a deep link) the static
server will receive the request,because Angular is not loaded yet.
The server will not find a match for the route and thus return a 404.
The desired behavior in this case is to return the index.html (or
whatever starting page of the app we have defined). browserSync does
not automatically allow for a fallback page. But it does allow for
custom middleware. This is where lite-server steps in.

lite-server is a simple customized wrapper around browserSync to make it easy to serve SPAs.

在角度或webpack中是否有一些特殊的IE开关,因为当我在 http://localhost:port/上运行我的网站时,它可以工作.此外,当我在Edge或Chrome上的服务器 http://server.domain/mysite/上运行它时,它可以工作.但是当我在IE 11上打开它(兼容模式设置为11)时,我在控制台中收到以下错误：

未处理的Promise拒绝：无法加载函数t(t){var e = this; this.http = t,this.getItems = function(){e.results = null,e.http.get(“api / app / components /my-items.component.html; Zone :;任务：Promise.then;值：无法加载函数t(t){var e = this; this.http = t,this.getItems = function(){e. results = null,e.http.get(“api / app / components / my-items.component.html undefined

对我来说意味着什么的唯一部分是’api /’是完全错误的,并且我已经仔细检查了组件,它清楚地说：

@Component({
    selector: 'my-items',templateUrl: 'app/components/my-items.component.html'
})
export class MyItemsComponent implements OnInit { ...

整个解决方案中没有出现短语’api / app'(包括c#,ts,css,html和js文件)

我的webpack.config.js很简单：

/// <binding ProjectOpened='Watch - Development' />
var path = require('path');
var webpack = require('webpack');
var console = require('console');


module.exports = {
    context: path.join(__dirname,'wwwroot'),//vendor: ['libs/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js'],entry: './app/main.js',output: {
        path: path.join(__dirname,'wwwroot/built'),filename: '[name].bundle.js',},plugins: [
            //new webpack.optimize.CommonsChunkPlugin("vendor","vendor.bundle.js"),// split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',minChunks: function (module,count) {
          // any required modules inside node_modules are extracted to vendor
          var path = module.resource.replace(/\\/g,'/');

          return (/\.js$/.test(path) && (path.indexOf('node_modules/') >= 0 || path.indexOf('libs/') >= 0));
      }

};

这里发生了什么？

我使用2.0.0-rc.1和webpack遇到了同样的问题.在阅读了一些 issues之后,我的解决方案是在浏览器是IE时在我的index.html上包含以下脚本：

es6-shim.min.js
system-polyfills.js
shims_for_IE.js

前两个可以在node_modules中找到,我从here下载了第三个.

Angular可以使用ui-router来定义状态,以便在应用程序中移动.例如.当仍然在一个页面上时,您可以在页面的左侧有列表视图,同时在右侧有详细视图.然后,每当您从左侧列表更改记录时,详细信息也会更改,但是,您仍然在同一页面中.
是否有可能在WebSharper中,或者还有其他选项如何处理场景？

此外,angular具有模板(和指令)的概念.除其他外,这使得能够将本机HTML代码包装到模板中,并将其用作其他一些html页面中的指令的一部分.例如,可以使用像select2这样的javascript库.这也可能在WebSharper中,例如使用select2库？

我对Angular不是很熟悉,但您列出的大多数功能都可以在WebSharper中作为扩展名使用： WebSharper.UI.Next.您可以像定义的那样定义客户端路由.它也有模板,但它仍在进行中,所以还没有文档(但我们已经在我们的项目中积极使用它).整个库旨在用于创建反应式单页应用程序,因此它可以作为角度的替代品(当然不是那么广泛).

至于模板：由于您是用F#编写代码,因此在UI.Next中有一个方便的DSL用于处理HTML组合器,因此您可以在F#中定义视图并在整个项目中重复使用它们,直到我们使模板更易于使用.

您可以使用外部库(如select2),但它需要一些额外的工作,即定义库的类型(或至少您要使用的部分类型).由于您正在编写F#代码,因此您需要知道事物的显式类型,因此您必须为处理类型的JavaScript库编写“绑定”.一方面它很棒,因为你现在有类型,另一方面它对于大型项目来说会变得相当繁琐.有关如何执行此操作的详细信息,请查看WIG documentation.