Question

在我构建我的角度应用程序后，它向我显示此错误[$ compile：tpload]无法加载模板：app / app.html（HTTP状态：404 Not Found）。请大家帮帮我!!!!!

app.html

<div class="root">
    <div ui-view></div>
</div>

app.component.js

    (function(angular) {
    'use strict'
    var app = {
        templateUrl:"app/app.html"
    }
    angular.module('mainApp')
           .component('app',app);
})(window.angular);

的index.html

<!doctype html>
<html class="no-js" lang="" ng-app="mainApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <title>IES</title>
      <!-- Place favicon.ico in the root directory -->
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
    <!-- bower:css -->
    <!-- run `gulp inject` to automatically populate bower styles dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp/serve,src}) styles/app.css -->
    <!-- inject:css -->
    <!-- css files will be automatically insert here -->
    <!-- endinject -->
    <!-- endbuild -->
    <!--<script src="bower_components/angular/angular.js"></script>-->
</head>
<body>
    <app></app>
</body>
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp inject` to automatically populate bower script dependencies -->
<!-- endbower -->
<!-- endbuild -->

<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<!-- js files will be automatically insert here -->
<!-- endinject -->

<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
</html>

app.module.js

 (function(angular) {
      'use strict';

      angular.module('mainApp',[
        'components',
        'common',
               ])
      .config(['$httpProvider', function ($httpProvider) {
          $httpProvider.interceptors.push('HeaderInterceptor');
          console.log("Configuration Hook");
        }])

      .run(['$http', '$rootScope', function ($http, $rootScope) {
        if (typeof $rootScope.global === "undefined") {
            if (localStorage.getItem('user')) {
              $rootScope.global = {
                user: JSON.parse(localStorage.getItem('user')),
              }
            }
         }
      }])

    })(window.angular, window.localStorage);

如果你想在这里看到整个代码，那就是 https://github.com/masresha/testfiles/tree/master/IES/src

Answer 1

app.component.js

(function(angular) {
'use strict'
var app = {
    templateUrl:"./app.html"
}
angular.module('mainApp')
       .component('app',app);
})(window.angular);

您不需要指明app文件夹，您已经在其中。

Angularjs在构建后无法加载模板

1 个答案: