Question

所以我一直在研究这个有角度的SPA，并且遇到了一些有趣的现象，我希望有人可以帮我解决这个问题。 Safari会给我Did not parse stylesheet at 'http://localhost:4000/teams/css/style.css' because non CSS MIME types are not allowed in strict mode，它在chrome上也是一样的。这只发生在我加载一个包含其中包含参数的url的状态时：localhost:4000/teams/:teamname。其中:teamname是参数。在网址i.e. localhost:4000/login中不包含参数的每个其他网页上，css将完全加载。

任何人都知道发生了什么事？

这是我的代码：

app module和config：app.js

(function() {

  'use strict';

  angular.module('myapp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('sprint', {
        url: '/teams/:teamname/projects/:projectId',
        templateUrl: 'js/views/project.view.html',
        controller: 'projectCtrl',
        controllerAs: 'project',
      })
      .state('register', {
        url: '/register',
        templateUrl: 'js/views/register.view.html',
        controller: 'registerCtrl',
        controllerAs: 'register'
      })
      .state('login', {
        url: '/login',
        templateUrl: 'js/views/login.view.html',
        controller: 'loginCtrl',
        controllerAs: 'login'
      })
      .state('teamDashboard', {
        url: '/teams/:teamname',
        templateUrl: 'js/views/teams/teamDashboard.view.html',
        controller: 'teamDashboardCtrl',
        controllerAs: 'teamDash',
        resolve: {
          projectStats: function($stateParams, teamsService) {
            return teamsService.getProjectStats($stateParams.teamname);
          }
        }
      })
      .state('home', {
        url: '/',
        templateUrl: 'js/views/home.view.html',
        controller: 'homeCtrl',
        controllerAs: 'home'
      });

      $locationProvider.html5Mode(true);
  });

})();

teamDashboard.controller.js

(function() {

  'use strict';

  angular.module('myapp').controller('teamDashboardCtrl', teamDashboardCtrl);

  function teamDashboardCtrl(projectStats) {
    var vm = this;

    vm. projectStats = projectStats;
  }

})();

teamDashboard.view.html

<div class="team-dashboard">
  <div class="container">
    {{teamDash.projectStats}}
  </div>
</div>

的index.html

<!DOCTYPE html>
<html lang="en" data-ng-app="myapp">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/css-deps.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <base href="/">
</head>
<body>
  <div data-ui-view data-ng-controller="applicationController as app"></div>

  <script type="text/javascript" src="js/deps.min.js"></script>
  <script type="text/javascript" src="js/app.min.js"></script>
</body>
</html>

我正在使用gulp为js分别连接依赖关系和我的逻辑，为css提供相同的连接。然而，两种样式表都不会加载。

gulpfile.js

'use strict';

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    plumber = require('gulp-plumber'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    ngAnnotate = require('gulp-ng-annotate'),
    sass = require('gulp-sass'),
    watch = require('gulp-watch'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload,
    express = require('express');


gulp.task('express', function() {
  // require('./bin/www');
  var app = require('./app');
  app.listen(4000);
});

gulp.task('js', function() {
  gulp.src(['./bower_components/jquery/dist/jquery.js',
    './bower_components/bootstrap/dist/js/bootstrap.js',
    './bower_components/angular/angular.js',
    './bower_components/angular-ui-router/release/angular-ui-router.js',
    './bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
    './bower_components/lodash/lodash.js',
    './bower_components/ev-emitter/ev-emitter.js',
    './bower_components/get-size/get-size.js',
    './bower_components/unipointer/unipointer.js',
    './bower_components/unidragger/unidragger.js',
    './bower_components/draggabilly/draggabilly.js'])
    .pipe(sourcemaps.init())
    .pipe(concat('deps.min.js'))
    .pipe(ngAnnotate())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./public/js'));

  gulp.src('app_client/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(concat('app.min.js'))
    .pipe(ngAnnotate())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./public/js'))
    .pipe(reload({stream: true}));

});

gulp.task('css-deps', function() {
  gulp.src([
        "./bower_components/bootstrap/dist/css/bootstrap.min.css",
        "./bower_components/font-awesome/css/font-awesome.min.css"
    ])
    .pipe(concat('css-deps.css'))
    .pipe(gulp.dest('./public/css'));

  gulp.src("./bower_components/bootstrap/dist/css/bootstrap.min.css.map")
    .pipe(gulp.dest('./public/css'));

  gulp.src('./bower_components/font-awesome/fonts/*')
    .pipe(gulp.dest('./public/fonts'));
});

gulp.task('css', function() {
  gulp.src(['./app_client/sass/*.sass', './app_client/sass/**/*.sass', './app_client/sass/!partials'])
    .pipe(plumber())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest('./public/css'))
    .pipe(reload({stream: true}));
});

gulp.task('html', function() {
  gulp.src('./app_client/**/*.html')
    .pipe(gulp.dest('./public/js/views'))
    .pipe(reload({stream: true}));

  gulp.src('./public/index.html')
    .pipe(reload({stream: true}));
});

gulp.task('browser-sync', function() {
  browserSync({
    proxy: 'http://localhost:4000',
    open: false
  });
});

gulp.task('watch', function() {
  gulp.watch('./app_client/**/*.js', ['js']);
  gulp.watch('./app_client/sass/**/*.sass', ['css']);
  gulp.watch(['./app_client/**/*.html', './public/index.html'], ['html']);
});

gulp.task('default', ['express', 'js', 'css-deps', 'css', 'html', 'browser-sync', 'watch']);

app.js express server

require('dotenv').load();
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var passport = require('passport');
var database = require('./app_db/models/index');
require('./app_db/config/passport');

var routes = require('./public/routes/index');
var routesAPI = require('./app_db/routes/index');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'public'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(passport.initialize());
app.use(express.static(path.join(__dirname, 'public')));


app.use('/api', routesAPI);
app.use(function(req, res) {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// error handlers...

module.exports = app;

版本：节点4.4.0， npm 2.14.20，快递4.13.1， Angular 1.5.2，

我正在使用OS X 10.11

任何帮助都很棒

Answer 1

尝试从gulp文件中删除＆＃39;使用strict＆＃39;（它定义严格模式）并运行gulp任务。

CSS没有正确加载$ stateProvider状态与params

1 个答案: