CSS文件路径不具有角NG-视图妥善解决(CSS file paths are not resolv

2019-10-22 05:29发布

我有一个角度设置的应用程序与NG-图。 我有一个都为1和2级深航,如:

  .when('/sample', {
    templateUrl: 'views/sample.html',
    controller: 'SampleCtrl'
  })
  .when('/sample/:id', {
    templateUrl: 'views/sample.html',
    controller: 'SampleCtrl'
  })

我使用HTML5模式下删除苏格兰路由,所以我的路线呈现为“本地主机:9000 /样品”,而不是“本地主机:9000#/样本”

我也是使用节点modrewrite服务器启用HTML5模式,所以我可以接受我的网址直接链接到深层链接(例如本地主机:9000 /采样/ ID),使用connect-modrewrite NPM模块及以下咕噜配置:

      middleware: function (connect) {
        return [
          modRewrite(['^[^\\.]*$ /index.html [L]']),
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect.static(appConfig.app)
        ];
      }

我有我的头文件中定义的CSS文件,例如:

 <link rel="stylesheet" href="styles/main.css">

这是我的应用程序内的路由时工作正常。 当我接受,是一个级别深直接联系,所以直接导航到它也可以“本地主机:9000 /样本”将会呈现一个网页的罚款。 然而,当我使用一个直接链接到这是2级深,例如“本地主机:9000 /采样/ ID”的道路,我的应用程序将无法正常渲染我的CSS,我将看到控制台错误:

GET http://localhost:5309/snippet/styles/main.css 

是没有问题的解决我的JavaScript的依赖,使用相同类型的相对路径,就在CSS的人的。 我可以把一个斜线在样式前解决这个问题(HREF =“/风格/ main.css的”),但我宁愿没有这样做,因为这会限制我的应用程序是如何进行部署,而且它是不是wiredep默认安装CSS凉亭依赖的方式。 是否有确保的一些角度-NG-观点友好的方式,我的CSS文件路径可以妥善解决,无论我在什么路线?

Answer 1:

我从来没有对这个答案让我去前面添加斜线我的CSS文件的路径和它工作得很好。 如果别人运行到这个问题,并需要它,这是我对Gruntfile进行的修改wiredep命令让它前缀我的CSS进口用斜杠

  wiredep: {
   app: {
    fileTypes: {
      html: {
        replace: {
          css: '<link rel="stylesheet" href="/{{filePath}}" />'
        }
      }
    }
  }


文章来源: CSS file paths are not resolving properly with angular ng-view