Angular 2，Auth0 Uncaught SyntaxError：意外的令牌＆lt;

时间：2016-07-09 18:20:01

标签： javascript node.js angular mean-stack auth0

编辑（7月21日）：修复发现并发布在下方。

编辑（7月10日）：所有的javascript文件都在检索index.html的内容而不是实际的javascript文件。因此unexpected token <。有谁知道为什么这些文件没有被正确导入？目录结构：

app/
  |-app.component.js
  |-main.js
node_modules/
server/
  |-app.js
index.html
package.json
systemjs.config

编辑：删除第29行的脚本会导致相同的错误。让我相信它不是system.config.js的问题，而是缺少脚本文件。在许多其他角度2 Unexpect token <情况下就是这种情况。我无法弄清楚我可能缺少什么导入。

代码基于Auth0 Custom Login。与顶级服务器目录相同的代码结构。

当我使用npm start运行我的应用程序时，它运行时没有错误。我添加了服务器端文件来配置MEAN应用程序。当我运行node server/app.js时，任何非服务器端路由都会导致：

shim.min.js:1 Uncaught SyntaxError: Unexpected token <
zone.js:1 Uncaught SyntaxError: Unexpected token <
Reflect.js:1 Uncaught SyntaxError: Unexpected token <
system.src.js:1 Uncaught SyntaxError: Unexpected token <
systemjs.config.js:1 Uncaught SyntaxError: Unexpected token <
app:1 Uncaught SyntaxError: Unexpected token <
(index):29 Uncaught SyntaxError: Unexpected token <
    Evaluating http://localhost:3000/app
    Error loading http://localhost:3000/app

我曾经遇到System not defined错误，但我已导入code.angularjs.org/tools/system.js来解决此问题。我已经尝试为rxjs，angular2-jwt和angular2-in-memory添加脚本文件，但是还没有修复它。

有关错误或可以添加到index.html以解决此问题的任何想法？代码如下。

的index.html 

<html>
<head>
<base href="/">
<title>Angular 2 Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

 <!-- Auth0 Lock script -->
<script src="https://cdn.auth0.com/w2/auth0-7.0.2.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<!-- Needed when running 'node server/app.js' to avoid 'System not defined' -->
<script src="https://code.angularjs.org/tools/system.js"></script>


<script src="systemjs.config.js"></script>
<script>
  <!-- index:29 -->
  System.import('app').catch(function(err){ console.error(err); });
</script>
</head>

<body>
<my-app>Loading...</my-app>
</body>
</html>

System.config.js 

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',

    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'angular2-jwt':               'node_modules/angular2-jwt/angular2-jwt.js',
    'rxjs':                       'node_modules/rxjs'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js', defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-jwt':               { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];

  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }

  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }

  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);

  // No umd for router yet
  packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

  var config = {
    map: map,
    packages: packages
  };

  System.config(config);

})(this);

app.component.ts（我的应用内）

import { Component }         from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { Auth }              from './auth.service';

@Component({
    selector: 'my-app',
    providers: [ Auth ],
    directives: [ ROUTER_DIRECTIVES ],
    templateUrl: 'app/app.template.html'
})

export class AppComponent {
  constructor(private auth: Auth) {}
};

main.ts 

import { bootstrap }                              from '@angular/platform-browser-dynamic';
import { disableDeprecatedForms, provideForms }   from '@angular/forms';
import { provide }                                from '@angular/core';
import { APP_ROUTER_PROVIDERS }                   from './app.routes';
import { AUTH_PROVIDERS }                         from 'angular2-jwt';
import { AppComponent }                           from './app.component';

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS,
  AUTH_PROVIDERS,
  disableDeprecatedForms(),
  provideForms()
]);

服务器/ app.js 

/**
 * Import dependencies
 */

var express = require('express');
var logger = require('morgan');
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var mongoose = require('mongoose');
//var path = require('path');

/**
 * Configure database
 */
mongoose.connect(process.env.MONGO_URL || 'mongodb://localhost:27017/database'); // Connects to your MongoDB.  Make sure mongod is running!
mongoose.connection.on('error', function() {
  console.log('MongoDB Connection Error. Please make sure that MongoDB is running.');
  process.exit(1);
});

/**
 * Configure app
 */
var app = express(); // Creates an Express app
app.set('port', process.env.PORT || 3000); // Set port to 3000 or the provided PORT variable
app.use(logger('dev')); // Log requests to the console
app.use(bodyParser.json()); // Parse JSON data and put it into an object which we can access
app.use(methodOverride()); // Allow PUT/DELETE

require('./routes')(app);

/**
 * Start app
 */  
app.listen(app.get('port'), function() {
  console.log(`App listening on port ${app.get('port')}!`);
});

的package.json 

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "description": "Very basic Angular 2 structure appication",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "docker-build": "docker build -t ng2-quickstart .",
    "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
    "pree2e": "npm run webdriver:update",
    "e2e": "tsc && concurrently \"http-server\" \"protractor protractor.config.js\"",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "postinstall": "typings install",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "webdriver:update": "webdriver-manager update"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.2",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "angular2-jwt": "^0.1.16",
    "body-parser": "^1.15.2",
    "canonical-path": "0.0.2",
    "concurrently": "^2.0.0",
    "express": "^4.14.0",
    "http-server": "^0.9.0",
    "jasmine-core": "~2.4.1",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^0.2.3",
    "karma-cli": "^0.1.2",
    "karma-htmlfile-reporter": "^0.2.2",
    "karma-jasmine": "^0.3.8",
    "lite-server": "^2.2.0",
    "lodash": "^4.11.1",
    "method-override": "^2.3.6",
    "mongoose": "^4.5.3",
    "morgan": "^1.7.0",
    "protractor": "^3.3.0",
    "rimraf": "^2.5.2",
    "tslint": "^3.7.4",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  },
  "repository": {}
}

2 个答案:

答案 0 :(得分：1)

从index.html删除索引：29行

答案 1 :(得分：0)

错误正在抛出，因为服务器端框架不知道在哪里查找库。从那时起我就添加了gulp来构建一个包含目录结构的dist文件夹。

dist/
  |-app
  |-lib
  |-server

重构的index.html：

...
<script src="lib/shim.min.js"></script>

<script src="lib/zone.js"></script>
<script src="lib/Reflect.js"></script>
<script src="lib/system.src.js"></script>
<script src="lib/ng2-bootstrap.min.js"></script>

<script src="systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>
...

告诉server / app.js文件所需的行：

...
var path = require('path');
...
app.use('/', express.static(path.resolve(__dirname + '/..', '')));
app.use('/app', express.static(path.resolve(__dirname + '/..', 'app')));
app.use('/lib', express.static(path.resolve(__dirname + '/..', 'lib')));
相关问题
最新问题