如何使用 express 运行 Angular Web 应用程序？

Question

我在使用 express 服务器的 Angularjs (v1) 项目时遇到问题，当它开始显示此错误时，它显示“ng-view”的位置为空白，但控制器工作正常，我也运行了apache 服务器上的代码，它可以工作，但是当我使用 express 服务器时它不起作用，这是控制台错误：

Error: [$compile:tpload] http://errors.angularjs.org/1.6.8/$compile/tpload?p0=views%2Fhome.html&p1=404&p2=Not%20Found
Stack trace:
K/<@http://localhost:3000/bower_components/angular/angular.min.js:7:76
g/<@http://localhost:3000/bower_components/angular/angular.min.js:162:186
h/<@http://localhost:3000/bower_components/angular/angular.min.js:137:167
$digest@http://localhost:3000/bower_components/angular/angular.min.js:148:130
$apply@http://localhost:3000/bower_components/angular/angular.min.js:151:353
l@http://localhost:3000/bower_components/angular/angular.min.js:103:165
t@http://localhost:3000/bower_components/angular/angular.min.js:108:228
yg/</A.onload@http://localhost:3000/bower_components/angular/angular.min.js:109:139

我确实尝试过更新 angular 版本或重新安装它（bower），但它对我不起作用。

我相信错误是在 app.js 代码段中产生的：

// create the module and name it woonked
    var app = angular.module('app', ['ngRoute','ngSanitize',"checklist-model"]);
    // configure our routes
    app.config(["$routeProvider","$locationProvider",function($routeProvider,$locationProvider) {       
        var signed = localStorage.getItem("signed_in");
        var temp;
        var ctrl;       
        if(signed)
        {
            temp = 'views/dashboard.html';
            ctrl = 'dashboardCtrl';
        }
        else
        {
            temp = 'views/home.html';
            ctrl = 'mainController';
        }

        //$locationProvider.html5Mode(true);        
        $locationProvider.hashPrefix('');
        $routeProvider

            .when('/', {
                templateUrl : temp,
                controller  : ctrl
            })


            .when('/dashboard', {
                templateUrl : 'views/dashboard.html',
                controller  : 'dashboardCtrl'
            })  

            /*
            .when('/branches', {
                templateUrl : 'views/branches/branches.html',
                controller  : 'branchesCtrl'
            })

            .when('/branch/:deviceId', {
                templateUrl : 'views/branches/branch/branch.html',
                controller  : 'branchCtrl'
            })
            */

            .otherwise({ redirectTo: '/' });
    }]);

已解决

最后我发现错误是因为我没有在express中设置路由以使用views路径，我添加了app.use('/views', express.static(__dirname + '/kospr-mgr/views'));，它对我有用。

Answer 1

没有看到您的代码很难回答，但正如文档所述，尝试加载模板时会发生此错误。因此，您可以在传递该模板 url 的地方检查它或提供一些代码来查看。

Answer 2

当$compile 尝试从某个 URL 获取模板并且请求失败时会发生此错误。

要解决此错误，请确保模板的 URL 拼写正确并解析为正确的绝对 URL。 Chrome Developer Tools 也可能有助于确定请求失败的原因。

如果您使用$templateCache 预加载模板，请确保缓存已填充模板。

如需了解更多信息，请参阅AngularJS Error Reference - Error: $compile:tpload。