Angular App의 구문 오류: 예기치 않은 토큰 <
로컬 및 프로덕션 환경에서 완벽하게 실행되는 Angular 앱이 있습니다.제가 약간의 변경을 한 후에, 저는 그 앱을 로컬로 실행했고 그것은 잘 작동합니다.그런 다음 프로젝트를 구축하고 dist 폴더를 웹 서버에 복사했습니다.문제는 앱에 액세스하려고 하면 Chrome Inspector에서 다음 오류가 발생한다는 것입니다.
Uncaught SyntaxError: Unexpected token < inline.1a152b6….bundle.js:1
Uncaught SyntaxError: Unexpected token < polyfills.1553fdd….bundle.js:1
Uncaught SyntaxError: Unexpected token < vendor.94d0113….bundle.js:1
Uncaught SyntaxError: Unexpected token < main.d6f56a1….bundle.js:1
그래서, 그것은 잘못된 문자처럼 보이지만, 나의 로컬 환경에서는 앱이 잘 작동합니다. 나는 콘솔에서 어떠한 경고나 오류 메시지도 받지 않습니다.
파일 일반 html을 . ( 페이지는 은이것을페립트크는파자나거예상되스시일다높다것제니가습이페다로작니합으음는성능일지이리페한션공렉는하디로이지반과바의이이지결신일에대)▁(ht▁thisml을▁(▁toa▁with▁instead▁starts시▁the▁page다▁html▁of▁a▁redirect▁a▁is▁result▁likely4페▁that▁most▁a▁regular이▁html로다▁or4작니으합음▁java<html> 는또.<!DOCTYPE...>)
파일을 올바르게 업로드했는지 확인하고 페이지에 올바르게 액세스합니다.브라우저를 사용하여 URL에 수동으로 액세스하여 확인하거나 브라우저 개발 도구의 네트워크 탭을 조사하여 응답을 검사할 수 있습니다.
저도 같은 문제가 있었습니다.
명령을 실행했습니다.
ng build --aot --prod
오류 없이 모든 것이 컴파일되었습니다.
서버의 모든 파일을 삭제하고 FTP(FileZilla)를 통해 Windows Azure 서버에 모두 복사했습니다.
가끔 오류가 발생합니다.
Unexpected token <
그리고 다른 때는 그렇지 않습니다.
어제 메인[해시]이 눈에 띄었습니다.서버에서 js가 누락되었고 Filezilla가 복사 오류를 주지 않았습니다.
그런 다음 해당 파일만 복사해 보았습니다.그것은 작동하지 않았습니다.파일 이름에서 해시 부분을 제거하면 문제없이 복사됩니다.
워크어라운드
실행:
ng build --aot --prod --output-hashing none
항상 작동하는 거죠.
따라서 Filezilla 또는 Windows Server는 특정 길이의 파일 이름을 허용하지 않거나 특정 해시를 좋아하지 않습니다.
express와 함께 각진을 사용하여 이 오류도 발생했습니다.
각진 프로젝트를 구축할 때 프로젝트가 단순히 'dist'가 아닌 'dist/the-app'에 저장되므로 익스프레스에서 제 문제가 해결되었습니다.
// Point static path to dist
app.use(express.static(path.join(__dirname, 'dist/the-app')));
이 오류는 빌드된 응용 프로그램의 올바른 경로를 설정하지 않았기 때문입니다.
는 문는다같습다니과음에 있습니다.<base href="/">의 index.html 것처럼 빌드 이 파일, 각가내빌 안에 됩니다.dist/{yourProjectName}/ 러나그나index.html은 파이다통니다합과를 .dist/빌드 파일용.이제 두 가지 옵션이 있습니다.
변할내용을 합니다.
<base href="/">의index.html을 로다철하에 합니다.<base href="/dist/{yourProjectName}/">하지만 지금 당신은 그들 사이에 모순이 있습니다.ng serve및 및휘ng build그리고 당신은 당신의 프로젝트를 끝까지 볼 수 없습니다.ng serve그래서 당신은 매번 그 부분을 바꾸어야 합니다!제가 추천하는 두 번째 접근법은 프로젝트의 출력 경로를 변경하는 것입니다!이동
angular.json을 저장하고 합니다."outputPath": "dist/{yourProjcetName}","outputPath": "dist/"그리고 변경하지 마십시오.base href!
수 , 페이지가 로드할 일이 의 "Angular"에서 에저않도분많되사움게이에지명보들해수그때로람일있페닌다가지아이의페루우트경저만이지시를지는마다거할은드서나아전완적않어도익지하숙히▁the▁i,▁that▁from▁fact▁came▁that▁my아페▁every▁so▁happened루▁it페경,다우로▁and▁to때의 그리고 그것은 제가 가진 사실에서 비롯되었습니다.index.html는 이 파일, 기태는다같습음다와 같이 .<base href="./">을 제거해야 했기 이렇게 : 때다같습음다니과에문했기제.<base href="/">.
<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
인덱스에 위의 행을 추가합니다.
이유: Chrome은 main.hash.js의 해시가 업데이트되지 않도록 index.html을 캐시하여 "예상치 못한 토큰 오류 <"가 발생합니다.
옷을 갈아입어서 해결했습니다.index.html
<base href="/">
로.
<base href=".">
또는 인덱스가 들어 있는 폴더의 정확한 경로를 설정할 수 있습니다.
<base href="/path/to/index-folder">
예를 들어 SpaStaticFile 서비스 컬렉션 확장 및 API 프로젝트를 사용하는 경우 .NET Core 솔루션입니다.
기본 href: /
// ConfigureServices
// Correct RootPath to your angular app build, based on angular.json prop
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "App/dist";
});
// Configure
// In order to serve files
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), "App", "dist")),
RequestPath = ""
});
저도 같은 문제에 직면해 있었습니다.
저같은경는에우는에.main.bundle.js누락되었습니다.을 해당 에복중는하사다시로 복사하는 것.dist폴더가 문제를 해결했습니다.
한 또 는 제가한또변다같다습니음에서 을 바꾼 입니다.index.html - 디트에있파일는 -
<base href=".">
로.
<base href="/">
제 경우 서버 파일에 경로 경로가 일치하지 않습니다.statics로의 경로는 index.dir와 assetsdir를 모두 포함하는 dir여야 하며 assetsdir 자체가 아닙니다.
app.use(express.static(path.resolve(__dirname,'/dist')));
app.get('/*', function (req, res) {
res.sendFile(path.join(path.resolve(__dirname, '/dist/index.html')));
});
나는 나를 위해 아래와 같이 노력했습니다.
여기서
HTML<base href="xyz"/>이미지, 스크립트 및 스타일시트와 같은 자산에 대한 상대 URL에 액세스하기 위한 기본 경로를 지정합니다.
를 들어, 예들어고가 , 다을려할때음를때▁for▁the고▁given할려,.<base href="/myApp/">assets/stylesstyles. 파일은 /assets/styles.css 파일의 합니다.
아래의 두 가지 방법으로 Xampp 서버에 각진 빌드를 로컬로 배포했습니다.
- xampp -> htdocs -> "빌드 파일"(자산, .htaccess, index.dll 등 포함)
- xampp -> htdocs -> myApp -> "build files" (자산, .htaccess, index.html 등 포함)
1인분.
styles localhost:80/assets/css/styles.css를 입력해야 .<base href="./">루트 수준에서 자산 폴더에 액세스합니다.
다음 URL로 이동: localhost:80/assets/css/styles.css
2인분.
에 액세스하기를 때문에 수준이므로 localhost:80/myApp/assets/css/styles.css를 넣어야 .<base href="/myApp/">MyApp 내부에서 자산 폴더에 액세스할 수 있습니다.
URL 위치: localhost:80/myApp/assets/css/styles.css
나는 webapi 프로젝트를 가지고 있고, 다른 방법을 시도한 후에, 나를 위해 리디렉션 문제를 해결한 후에 각진.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
//For angular url rewriting
app.Use(async (context, next) =>
{
await next();
if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))
{
context.Request.Path = "/index.html";
await next();
}
})
.UseDefaultFiles(new DefaultFilesOptions { DefaultFileNames = new List<string> { "index.html" } })
.UseStaticFiles();
app.UseAuthentication();
app.UseMvc();
}
▁from▁the▁▁you다있니에서 기본 태그를 변경해 볼 수 있습니다.<base href="/"><base href="/project-app/">index.file.instance index.instance가 있습니다.
사용 중인 서버에 따라 다릅니다.예를 들어 Apache를 사용하면 .htaccess 파일을 드라이브의 상대 경로로 설정할 수 있습니다. 여기서 앱은RewriteBase또한 설정합니다.<base href="">따라서.
노드를 사용할 경우
app.use(express.static(__dirname + '/dist'));
다 먼저 .app.get.
빌드에 오류가 없고 모든 파일이 dist에 복사되었는지도 확인합니다.
server : 노드서버:server.js
const express = require('express');
const app = express();
const path = require('path');
const port = process.env.PORT || 3000;
const pathDeploy = path.join(__dirname, 'dist', 'oursurplus');
app.use(express.static(pth));
app.listen(port, () => {
console.log(`running on port ${port}`);
});
app.get('/*', (req, res) => {
res.sendFile(path.join(pathDeploy, 'index.html'));
});
package.json스크립트가 있어야 합니다.
scripts: {
"build": "ng build --prod --baseHref=\"./\""
}
제 경험상 wwwroot에 다른 자산을 추가하는 것은 asp.net 코어의 정적 기본 주소를 감지하기 위해 충돌합니다.
예:
wwwroot
|--> assets
|---> ckeditor
와 충돌합니까?angular -> src -> assets그리고 이 오류를 표시합니다.
Uncaught SyntaxError: Unexpected token < inline.1a152b6….bundle.js:1
...
나의 경우에는<!--...-->의 원인이 되었습니다.
저도 같은 문제가 있었습니다. 매우 짜증이 났습니다.여기 있는 솔루션 중 몇 가지를 시도해 보았지만 아무 것도 작동하지 않았습니다.
Azure 포털에 있는 응용 프로그램의 응용 프로그램 설정 블레이드에 다음을 추가하면 유용합니다.
앱 설정명 : WEBITE_NODE_DEFAULT_VERSION 값 : 6.9.1
> 배포 로그에서 발췌한 전후.
remote: The package.json file does not specify node.js engine version constraints.
remote: The node.js application will run with the default node.js version 0.10.40.
remote: Selected npm version 1.4.28
remote: The package.json file does not specify node.js engine version constraints.
remote: The node.js application will run with the default node.js version 6.9.1.
remote: Selected npm version 3.10.8
약간의 변화와 함께..htaccess파일은 제가 이 문제를 해결했습니다.
https://angular.io/guide/deployment#fallback 에서 다음과 같이 일부 행을 변경했습니다.
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html
저의 경우 UTF-8 문자를 잘못 입력한 결과입니다.
구문:
<component [inputField]="Artikelns Mått"></component>
먼저 그것은 단지 그것을 교체하는 것으로 해결되었습니다.å와 함께a하지만, 그것은 진정한 해결책이 아닙니다.
그것을 해결한 것은 추가하는 것이었습니다.''본문 주위에
<component [inputField]="'Artikelns Mått'"></component>
오류:
Error: Template parse errors:
Parser Error: Unexpected token 'å' at column 11 in [Artikelns mått] in CadComponent@25:28 ("
<div class="col-md-4">
<lte-box>
<lte-box-header [ERROR ->][headerTitle]="Artikelns mått"></lte-box-header>
<lte-box-body>
<table "): CadComponent@25:28
Parser Error: Lexer Error: Unexpected character [å] at column 12 in expression [Artikelns mått] at column 13 in [Artikelns mått] in CadComponent@25:28 ("
<div class="col-md-4">
<lte-box>
<lte-box-header [ERROR ->][headerTitle]="Artikelns mått"></lte-box-header>
<lte-box-body>
<table "): CadComponent@25:28
at SyntaxError.BaseError [as constructor] (webpack:///./@angular/compiler/src/facade/errors.js?:31:27) [<root>]
at new SyntaxError (webpack:///./@angular/compiler/src/util.js?:163:16) [<root>]
at TemplateParser.parse (webpack:///./@angular/compiler/src/template_parser/template_parser.js?:170:19) [<root>]
at JitCompiler._compileTemplate (webpack:///./@angular/compiler/src/jit/compiler.js?:381:68) [<root>]
at eval (webpack:///./@angular/compiler/src/jit/compiler.js?:264:62) [<root>]
at Set.forEach (<anonymous>) [<root>]
at JitCompiler._compileComponents (webpack:///./@angular/compiler/src/jit/compiler.js?:264:19) [<root>]
at createResult (webpack:///./@angular/compiler/src/jit/compiler.js?:146:19) [<root>]
at Zone.run (webpack:///./zone.js/dist/zone.js?:112:43) [<root> => <root>]
at eval (webpack:///./zone.js/dist/zone.js?:534:57) [<root>]
at Zone.runTask (webpack:///./zone.js/dist/zone.js?:150:47) [<root> => <root>]
at drainMicroTaskQueue (webpack:///./zone.js/dist/zone.js?:432:35) [<root>]
저는 이것이 많은 가능한 오류의 광범위한 예라는 것을 알게 되었습니다.Jhipster가 생성한 프로젝트를 사용하던 애플리케이션에서, 우리는 index.html에 구글 분석을 추가했습니다.우리는 또한 토마토 분석을 시도했습니다.index.html 안에는 스크립트 태그도 있습니다.
오류는 누군가가 우리의 구글 분석 스니펫에서 코드 한 줄을 주석으로 달았다는 것입니다.
다음은 오류가 발생한 코드의 예입니다.
<script>
(function (b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] =
function () {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = '//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', '123123'); <! --
ga('send', 'pageview');
-->
</script>세에 지막세줄주목요세하에마▁where가 있었던 것을 하세요.<! --그것이 우리에게 오류를 일으킵니다.
을 달기 .html을 사용합니다.\\더블 백슬래시누군가가 다음을 사용하여 이 라인 아웃에 대한 의견을 제시하려고 시도했을 수 있습니다.<!-- -->.
이것은 어디에나 있을 수 있었기 때문에 까다롭습니다.
하지만 그것은 항상 시작하기에 좋은 장소입니다.index.html
이것이 조금이나마 도움이 되길 바랍니다.
folder) 한 app.use(express.static(static folder.unexpected token <message
다음 항목을 확인합니다.app.use(express.static(static folder))문에는 js 및 css 파일이 위치하고 노드를 실행 중인 위치와 관련된 적절한 정적 폴더가 포함되어 있습니다.
하는 경우 (Angular 및사을사용는경우하일파컴전▁(경ang▁if우)ng build --prod) 파일이 있는 에 배치하지 별도의 백엔드). 해야 할 수 프론트 엔드 Angular 코드를 이러한 파일이 들어 있는 dist 폴더에 넣고 백엔드 노드 파일을 같은 폴더에 넣지 않습니다(예: 별도의 백엔드). 그러면 올바른 경로도 포함해야 할 수 있습니다.
저는 편찬된 .ng build --prod) 디렉토리의 에 있는 프로젝트 디렉터리 바로 옆 /dist에 있는 각진 파일..json이 되도록 했습니다."outputPath": "dist"사전 컴파일하기 전에 사전 컴파일된 Angular 코드가 사용되는 위치를 확인합니다.하는 내 server. server.js 파일이 있는 app.은 app.js 파일입니다.app.use(express.static(static folder))문 및 나머지 백엔드 노드 코드는 /dll이라는 폴더에 있습니다. 다음 파일을 다음진술에 js와 css파정확찾고하다됩니를 하는 데 .unexpected token < 오류: 오류:
app.use(express.static(path.join('dist')));
또는
app.use(express.static(path.join(__dirname, '../dist')));
두 문 모두 노드가 정적 js 및 css 파일을 찾도록 적절하게 지시합니다./dist폴더를 누릅니다.
답변 수에 따라 이 문제는 여러 가지 이유로 나타날 수 있습니다.
다른 사람들에게 도움이 될 경우를 대비해서 제 것을 추가하겠습니다.제 경우에는 index.html로 다시 전달하고 싶은 URL을 직접 누르고 Angular가 처리하도록 하려고 했습니다.
그래서 제가 만약에.http://example.com/some-angular-route/12345
URL의 했습니다.http://example.com/some-angular-route/runtime.js)
가 히연당을 못했기 때문에, nginx 수찾없때문에기었가을./some-angular-route/runtime.js내가 설정한 이후로 인덱스.html에 서비스를 제공하기 위해 뒤로 떨어졌습니다.try_files에서) $수 .suber index.suber indexnginx 파일) $uri를 지정합니다.그래서 본질적으로:
- 에는 index.dll 로드를 .
http://example.com/some-angular-route/runtime.js - 파일을 확인할 수 없는 경우 nginx config services index.fallback
- runtime 시작하는 index..js의 내용은 이제 다음으로 시작하는 index.js와 같습니다.
<html> - j가 아니기 에, 은 그은유효 js가때아문에, 은신당기니를 얻게 .
Uncaught SyntaxError: Unexpected token <
그럼 어떻게 해야 할까요?/some-angular-route/"URL"의.runtime.js우리는 당신이 base-href를 설정했는지 확인해야 합니다./ 플래그를 하여 이 을 수행할 수 .--base-href=/
이 플래그는 index.html의 헤드 태그에 추가되며 브라우저가 사이트 루트에서 모든 스크립트를 확인하도록 합니다.당신은 다을포에는 URL을수있습이 수 .some-angular-route "runtime.js(상대 URL)"에서 runtime. URL와 같은 합니다./.
ng 빌드 후 dist/프로젝트 폴더에 'something'이라고 입력합니다.그런 다음 index.html 파일을 열고 기본 URL(기본값)을 변경합니다.
프로젝트 폴더를 nginx 또는 apache에 둔 경우 둘러보기 기본 URL은
<base href="http://localhost/something/">
그리고 제 경우, Angular 버전은 7.1.4입니다.
구성 요소를 생성했지만 라우팅이 제대로 되지 않았거나 라우팅이 완료되지 않았기 때문에 이 문제에 직면하게 되었습니다. 먼저 이 오류가 발생하는 사람이 있을 것입니다. 확인해 보십시오.
저에게 그것은 라우팅 때문이었습니다.
의 신의에index.ts
<!--doctype html-->
<!DOCTYPE html>
기억해요...그 <!DOCYPE > 선언은 대소문자를 구분하지 않습니다.다음 링크를 확인합니다.
나를 위한 해결책은: in index.dll이었습니다.
<base href="./">
--base-href와 --deploy-url을 동일한 매개 변수로 사용했기 때문에 동일한 문제가 있었습니다.다음과 같이:
ng build --base-href /spo/ --deploy-url /spo/
--deploy-url 플래그를 제거하면 모든 것이 정상적으로 작동하기 시작합니다.
우리의 경우, 호스트 서버에 배포된 index.html 파일을 수정하는 경우, 파일의 인코딩을 UTF-8에 저장하여 페이지를 그대로 로드해야 합니다.
제 경우 HTML은 단일 따옴표 안에 있었고 템플릿에 여러 줄이 있습니다.
그래서 저는 단지 하나의 인용문(') 대신에 백틱 문자(') 안에 HTML을 제공했습니다.
언급URL : https://stackoverflow.com/questions/45222464/syntax-error-in-angular-app-unexpected-token
'sourcecode' 카테고리의 다른 글
| 사용자 MVCEF Core를 기반으로 다른 데이터베이스에 연결 (0) | 2023.07.28 |
|---|---|
| ADODB.Command: 준비된 문이 예상 레코드 수를 반환하지 않습니다. (0) | 2023.07.28 |
| PowerShell에서 문자열을 datetime으로 변환 (0) | 2023.07.28 |
| HTML 양식 데이터를 JSON으로 서버에 보내는 방법은 무엇입니까? (0) | 2023.07.28 |
| @Test 컨테이너가 있는 Mongo 드라이버, 테스트가 성공적으로 실행된 후 예외 발생 (0) | 2023.07.28 |