个人中心
gpt4 book ai didi

javascript - Angular 2，Auth0 未捕获语法错误 : Unexpected token <

转载 作者：行者123 更新时间：2023-12-03 06:34:37 25 4
gpt4 key购买 nike

编辑 (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 的问题，而是缺少脚本文件。许多其他 Angular 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>

系统.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(my-app)

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": {}
}

最佳答案

从index.html中删除index:29行

关于javascript - Angular 2，Auth0 未捕获语法错误 : Unexpected token <，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38284907/

25 4 0
文章推荐： javascript - 使用jquery检查页面高度
文章推荐： hibernate - 何时使用 Hibernate 投影？
文章推荐： applepay - Apple Pay 在 "APP"中不可用
文章推荐： javascript - 将十进制字符串从 php 传递到 jquery
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com