AngularJS动态路由出现意外的标记错误

Question

当我尝试创建一个动态路由时，我遇到了几个“意外的标记<”错误。普通路由没有问题。所以，如果我设置以下路由：

.when('/user',{
    templateUrl: 'views/user/new', 
    controller: "addUserCtrl"
  })

请求发送到服务器并被我的 express 全捕获路由处理程序捕获，然后 Angular 接管并请求了 express 的 API 路由 api/user，绑定了数据、控制器和模板，我看到了一个漂亮的页面。一切都很正常，没有错误。

如果我尝试创建动态路由或更深层次的路由，当我尝试请求该路由时，会出现意外令牌错误。

.when('/user/:id',{
    templateUrl: 'views/user/new', 
    controller: "addUserCtrl"
  })

例如，当我请求/user/3时，出现错误，并且addUserCtrl从未被调用。有什么想法是什么原因导致这种情况发生。

.when('/user/show,{
    templateUrl: 'views/user/new', 
    controller: "addUserCtrl"
  })

请求 /user/show 也会抛出错误。在控制台中，错误会显示在对所有 Angular 文件（angular.js、App.js、services.js、controllers.js、filters.js、directives.js）的请求旁边，这些文件被加载到我的 index.html 的 body 中。

我注意到每当我在路由中添加超过一个斜杠时就会发生此问题。如果尝试 /user/show，我可以看到以下请求：

   /user/show

   syntax errors for the below:
   /user/js/App.js
   /user/js/lib/angular/angular.js
   /user/js/filters.js
   /user/js/controllers.js'
   /user/js/services.js
   /user/js/directives.js

如果我尝试访问/abc/def，我将得到以下请求：

   /abc/def

    syntax errors for the below:
   /abc/js/App.js
   /abc/js/lib/angular/angular.js
   /abc/js/filters.js
   /abc/js/controllers.js'
   /abc/js/services.js
   /abc/js/directives.js

- Kdigital

---

可能是因为/user/show和/user/:id冲突了？试着去掉其中一个。 - Andrew Joslin

很遗憾，这不是问题的原因，因为我实际上是用/user/show替换了/user/:id。我删除了所有路由，只剩下一个。事实上，我删除了所有路由，仍然得到了语法错误的意外标记错误，这使得问题更加混乱。如果我尝试像/abc/def这样的东西，它会给我错误。每当我在路由中输入两个或多个斜杠时，就会出现错误。 - Kdigital

Answer 1

我遇到了同样的问题，就像 atentaten 描述的一样，问题是由于 js 文件的相对路径引起的。然而，这与 Express 没有任何关系。它同样可以是由于 html 文件头部中脚本标签的相对包含路径引起的。因此，为了澄清，我将我的 HTML 代码从以下方式更改：

<script src="bower_components/angular/angular.js"></script>

to:

<script src="/bower_components/angular/angular.js"></script>

- Per

Answer 2

显然，这不是一个 Angular 的问题，而是一个 Express 的问题。

问题在于我的 index.jade 文件中的 Angular JS 包含文件缺少了开头的斜杠：

script(src='js/lib/angular/angular.js')
script(src='js/App.js')
script(src='js/services.js')
script(src='js/controllers.js')
script(src='js/filters.js')
script(src='js/directives.js')

我将它们改为了这个：

script(src='/js/lib/angular/angular.js')
script(src='/js/App.js')
script(src='/js/services.js')
script(src='/js/controllers.js')
script(src='/js/filters.js')
script(src='/js/directives.js')

错误已经消失了。虽然js没有以斜杠开头加载，但它仍然导致express出现问题，创建语法错误，这可能破坏了angular，但我不确定具体原因。

- Kdigital

Answer 3

templateUrl必须是绝对路径，否则如果URL中有超过一个斜杠/深度级别，Express将无法处理：

.when('/user/show,{
  templateUrl: '/views/user/new', /* add slash */
  controller: "addUserCtrl"
})

- cyberwombat

Answer 4

这是在AngularJS应用程序中使用ui-router动态路由时发生的情况。我遇到了同样的错误，通过更改路径解决了问题。

<script src="app/components/services/campaign.services.js"></script>

到

<script src="/app/components/services/campaign.services.js"></script>

但在我的情况下，index.html文件路径是由gulp任务gulp-inject生成的，所以我更改了gulp-inject的配置，如下：

inject: { addRootSlash: true }

对我来说它有效 :)

- Deepak Sisodiya