Question

我无法使用Angular.js和Node.js找到外部js / css文件。我在下面解释我的代码。

Node / app.js：

require('./config/config');
require('./models/db');
require('./config/passportConfig');

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const passport = require('passport');

const rtsIndex = require('./routes/index.router');

var app = express();
var morgan         = require('morgan');
var methodOverride = require('method-override');
var appRoot = require('app-root-path');
var path=require('path');
var reqPath = path.join(__dirname, '../');
console.log('app',reqPath + 'angularjs/dist');
//var corsOptions = {"origin": "http://localhost:4202", "methods": "GET,PUT,DELETE,POST", "preflightContinue": false, "optionsSuccessStatus": "204"};
//app.use(cors(corsOptions));

// middleware app.use( bodyParser.urlencoded({ extended: true }) );
app.use(bodyParser.json());
app.use(cors());
app.use(passport.initialize());
app.use('/api', rtsIndex);
app.use(express.static(reqPath + 'angularjs/dist/'));     // set the static files location /public/img will be /img for users
app.use(morgan('dev'));                     // log every request to the console
app.use(bodyParser.urlencoded({ extended: false,limit: '5mb' }))    // parse application/x-www-form-urlencoded
app.use(methodOverride());                  // simulate DELETE and PUT
app.get('/',function(req,res){
    res.sendFile(reqPath+'angularjs/index.html');
});

// error handler
app.use((err, req, res, next) => {
    if (err.name === 'ValidationError') {
        var valErrors = [];
        Object.keys(err.errors).forEach(key => valErrors.push(err.errors[key].message));
        res.status(422).send(valErrors)
    }
    else{
        console.log(err);
    }
});

// start server
app.listen(process.env.PORT, () => console.log(`Server started at port : ${process.env.PORT}`));

上面是我的服务器端代码，下面是我的客户端代码。

angularjs / index.html：

<!DOCTYPE html>
<html lang="en" ng-app="lendingkart">
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Welcome to Lendingkart</title>
        <link rel="icon" href="dist/images/favicon.png" />       
        <!--Plugin CSS-->
        <link href="dist/css/plugins.min.css" rel="stylesheet">
        <!--main Css-->
        <link href="dist/css/main.min.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
        <script src="dist/js/angularjslatest.js" type="text/javascript"></script>
        <script src="dist/js/angularuirouterlatest.js" type="text/javascript"></script>
        <script src="dist/js/route.js" type="text/javascript"></script>
        <script src="dist/js/angularcaps.js" type="text/javascript"></script>
        <script src="dist/js/angular-messages.js" type="text/javascript"></script>
        <script src="dist/js/angularuibootstrap.js" type="text/javascript"></script>
        <script src="dist/js/ng-file-upload-shim.min.js"></script>
        <script src="dist/js/ng-file-upload.min.js"></script>
        <script src="dist/js/dirPagination.js"></script>
        <script src="dist/js/angular-chosen.min.js"></script>

    </head>
    <body>
    <div  ui-view>

    </div>
        <!-- jQuery -->
        <script src="dist/js/plugins.min.js"></script>
        <script src="dist/js/common.js"></script>
        <script src="dist/js/jquery.mousewheel.min.js" charset="utf-8"></script>
        <script src="dist/js/raphael.min.js" charset="utf-8"></script>
        <script src="dist/js/jquery.mapael.js" charset="utf-8"></script>
        <script src="dist/js/india.js" charset="utf-8"></script>
</body>
</html>

我在这里使用UI-ROUTER来获取页面。

angularjs / dist / route.js：

var Admin=angular.module('lendingkart',['ui.router', '720kb.datepicker','ngMessages','ngCapsLock','ui.bootstrap','ngFileUpload','angularUtils.directives.dirPagination','angular.chosen']);
Admin.run(function($rootScope, $state) {
    $rootScope.$state = $state;
});
Admin.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('/',{
        url: '/',
        templateUrl: 'views/login.html',
        controller: 'loginController'
    })
})

这是我的问题，当索引页正在加载时，它无法获取外部文件并出现此GET http://localhost:3003/dist/css/plugins.min.css net::ERR_ABORTED错误。当我为node.js和angular.js使用两个不同的文件夹时，我遇到了这些问题。我需要解决这些问题并访问所需的页面。

没有使用Angularjs和Node.js获取外部js / css文件

0 个答案: