角度指令中模板的路径？

Question

我已经为我的角度应用程序创建了一个指令,在指令中我使用templateUrl来获取模板.

templateUrl: 'templates/searchbox-template.html',

这在我的本地服务器上工作正常,但当我在firebase上托管它时,它会反复发出此警告 -

WARNING: Tried to load angular more than once

此外,页面陷入循环,反复将index.html添加到页面.如果您从我使用该指令的导航栏转到公司或工作选项卡,您可以在此处查看该应用程序.我无法弄清楚应该使用什么路径来阻止它.这是应用程序的结构 -

.
??? app
?   ??? 404.html
?   ??? favicon.ico
?   ??? images
?   ??? index.html
?   ??? robots.txt
?   ??? scripts
?   ??? styles
?   ??? templates
?   ??? views
??? bower_components
?   ??? angular
?   ??? angular-mocks
?   ??? angular-route
?   ??? animate.css
?   ??? bootstrap
?   ??? jquery
?   ??? jssocials
??? bower.json
??? dist
?   ??? 404.html
?   ??? favicon.ico
?   ??? fonts
?   ??? index.html
?   ??? robots.txt
?   ??? scripts
?   ??? styles
??? firebase.json


.
??? app
?   ??? 404.html
?   ??? favicon.ico
?   ??? images
?   ??? index.html
?   ??? robots.txt
?   ??? scripts
?   ?   ??? app.js
?   ?   ??? controllers
?   ?   ??? directives
?   ?   ??? services
?   ??? styles
?   ?   ??? main.css
?   ??? templates
?   ?   ??? searchbox-template.html
?   ??? views
?       ??? about.html
?       ??? companiesall.html
?       ??? company.html
?       ??? contact.html
?       ??? jobsall.html
?       ??? main.html

如您所见,我的模板位于模板文件夹中.请帮我解决一下这个.谢谢.

更新 - 根据这个答案,该指令无法找到模板因此一次又一次地加载index.html - 因为 -

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

我只需要弄清楚模板的正确路径.

这是firebase.json json文件的内容 -

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Answer 1

是否'/'映射到视图main.html？如果是这样，听起来您的服务器仅在该views目录下静态提供文件，并且不允许访问该templates目录。要测试它，请尝试从模板中获取模板并将其放在视图下，然后进行templateUrl相应的更改。

正如您所提到的，Angular 无法访问/查找该目录，因此它默认为该otherwise函数，加载main.html会一次又一次地重新启动问题。

编辑：

如果其他人遇到此问题，该dist目录是生产版本，用于$templateCache从单个文件提供视图，但在将视图组合成一个文件的步骤中，templates未考虑该目录，因此无法被发现。因此，在您的 中Gruntfile.js，更改src模板以包含其他文件夹，如下所示：

ngtemplates: {
      dist: {
        options: {
          module: 'jobSeekerApp',
          htmlmin: '<%= htmlmin.dist.options %>',
          usemin: 'scripts/scripts.js'
        },
        cwd: '<%= yeoman.app %>',
        src: ['views/{,*/}*.html', 'templates/{,*/}*.html'],
        dest: '.tmp/templateCache.js'
      }
    },