Angularjs在构建后无法加载模板答案

【问题标题】：Angularjs failed to load template after buildAngularjs在构建后无法加载模板
【发布时间】：2017-11-15 10:36:48
【问题描述】：

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

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

【问题讨论】：

你可以复制粘贴你在控制台中遇到的所有错误吗？
错误：[$compile:tpload] 无法加载模板：app/app.html（HTTP 状态：404 未找到）errors.angularjs.org/1.6.6/$compile/… 在 vendor.js:28001 在你（vendor.js: 48139) 在 l (vendor.js:44936) 在 vendor.js:44980 在 h.$digest (vendor.js:46118) 在 h.$apply (vendor.js:46416) 在 l (vendor.js:40432)在 v (vendor.js:40670) 在 XMLHttpRequest.C.onload (vendor.js:40587)
GET localhost/work/app/app.html 404（未找到）
你试过@Zooly 回答吗？
抱歉回复晚了。是的，我确实解决了。它不起作用的原因是我没有在生产文件夹中添加视图（app.html）。一个菜鸟的错误。我希望你能解决你的问题@ZiOS

标签： javascript angularjs frontend

【解决方案1】：

app.component.js

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

你不需要指明app文件夹，你已经在里面了。

【讨论】：

它不起作用，现在它向我显示此错误错误：[$compile:tpload] 无法加载模板：./app.html（HTTP 状态：404 未找到）