Angular-google-maps: Angular 4 Universal-SyntaxError : 예기치 않은 토큰 내보내기

안녕하세요, 저는 실제로 Agm 문제가 아니라 글로벌 문제인이 문제를 다루어야했습니다.
Agm을 포함한 대부분의 최신 패키지는 import 및 export 키워드로 es6로 구성됩니다.

패키지에 번들 파일이 항상 있기 때문에 Universal 이전에는 문제가되지 않았습니다. 로컬 개발 용 System.js와 Webpack / Rollup이 프로덕션 번들용 es6를 이해할 수 있습니다.

그러나 Universal을 사용하면 es6에서 node_modules의 파일을 직접 사용하고 노드는 아직 import 및 export 토큰에 대해 알지 못합니다.

두 가지 작업을 수행 할 수 있습니다. 범용으로도 앱을 번들링 할 수 있지만 서버 컨텍스트에서 쓸모없는 번들에 대해서는 컴파일 시간이 많이 손실됩니다.

내가 회사에서 사용한 다른 옵션은 컴파일하기 전에 모든 소스를 tmp 폴더에 복사하고이 tmp 폴더에 node_modules 폴더를 만드는 것입니다.
그런 다음 모든 @agm 폴더 (tmp의 "fake"폴더에있는 "real"node_module 폴더에있는 폴더에있는 폴더)를 복사 할 수 있습니다. 그런 다음 babel을 사용하여 commonjs의 fake node_modules 폴더에 복사 된 es6 파일을 변환 할 수 있습니다. nodejs는 이해할 것입니다. ( @ agm 노드가 필요할 때 가짜 node_modules 폴더에서 파일을 찾습니다)

이것은 매우 성가신 일이며 현재로서는 다른 옵션이 없습니다 (더 나은 옵션을 찾으면 알려주세요). ng2 모듈이 범용으로 사용하기 쉽도록하려면 es6 및 commonjs 파일을 모두 제공하는 방법을 찾아야한다고 생각합니다. :)

webpack.config 사용

externals: [nodeExternals({
    whitelist: [
      /^@agm\/core/,
    ]
})],

@kkaabbaa 이것이 작동하는지 확인할 수 있습니까?
내 웹팩에 추가하는 것만으로는 작업이 완료되지 않았습니다.

나는 같은 문제가 있고, 나는 바벨이 있고 새 폴더에 프로젝트의 사본을 만든 다음 바벨을 로컬로 설치했지만 Adrienboulle이 회사를 위해 만든 프로세스를 이해하고 싶습니다. 미리 감사드립니다.

나는 그것을 webpack.config에 추가했고 그것은 나를 위해 작동하지 않습니다.

외부 : [nodeExternals ({
허용 목록 : [
/ ^ @ agm / core /,
]
})],

브라우저 또는 서버인지 여부에 따라 내 agm-map이 포함 된 구성 요소를 동적으로로드하여 해결 방법을 사용하고 있습니다. https://angular.io/guide/dynamic-component-loader

es5로 컴파일했지만 오류도 표시합니다.

마침내 보편적으로 구글지도를 사용할 수 있습니다. 나는 repo와 비디오를 만들고있다

이 게시물을 사용했습니다 https://medium.com/@evertonrobertoauler/angular -4-universal-app-with-angular-cli-db8b53bba07d

그리고 추가

externals: [nodeExternals({
    whitelist: [
      /^@agm\/core/,
    ]
})],

@kkaabbaa 어디에 추가 했습니까?

내 webpack.config.js
https://gist.github.com/kkaabbaa/a308b218938ae55357f73c162e887bd5

여전히 작동하지 않음, @kkaabbaa 솔루션을 시도했지만 동일한 문제로 작동하지 않았습니다.

_ 바벨 최신 버전으로 솔루션 업데이트

@philippeboyd @dkmostafa 나는 최근에이 모듈과-> ngx translate 등의 다른 모듈에 대해 동일한 문제를 해결했습니다.

솔루션 (js 파일을 es2015로 컴파일) :

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. .babelrc 이름으로 루트 프로젝트에 추가하거나 cli를 통해 직접 사전 설정을 추가하십시오.
   { "presets": ["@babel/preset-env"] }

3. "scrtipsts"범위의 package.json에 npm 스크립트 추가
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",

4. "scrtipsts"범위의 package.json에 설치 후 스크립트 추가
   "postinstall": "npm run compile_@agm_core",

5. npm i 를 실행하여 deps를 설치하십시오. deps를 설치하면 postinstall 스크립트가 실행되고 babel은 대상 js 파일을 컴파일합니다.

6. 서버를 실행하고

7. 작동하면 피드백을주세요. 내 컴퓨터에서 작동하는 3 개 이상의 npm 모듈에 대해 동일한 작업을 수행했습니다 .D

@AnthonyNahas 는 매우 흥미로운 아이디어입니다. 사실 이라기에는 너무 좋아 보인다! 나는 그것을 줄 것이다

누구든지 이것에 대한 해결책이 있습니까? 최근에 이것도 만났습니다.

@adrienboulle 설명

@AnthonyNahas 나는 그것을 시도했다. 이제 다른 오류가 표시됩니다.

import * as i0 from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import

@AnthonyNahas , 솔루션에 감사드립니다! 약 한 달 동안 작동하지 않는 다른 솔루션을 여러 가지 시도했습니다! 이것은 실제로 내 문제를 해결합니다 =)

@karthikeyanmanureva u는 "SyntaxError : Unexpected token import"를 던지는 npm 모듈에 대해 동일한 작업을 수행해야합니다.
@martinreus 건배

@AnthonyNahas 이것은 나를 위해 일했습니다. 어떻게 그 솔루션을 생각해

@AnthonyNahas ， 귀하의 솔루션이이 문제를 해결하는 데 도움이되었습니다.

@AnthonyNahas , 감사합니다. 하나의 모듈이 작동했습니다. 하지만 이제 다른 패키지 ng2-slim-loading-bar를 사용 하고 있으며 오류가 발생합니다.

some_path/client/dist/ngfactory/node_modules/ng2-slim-loading-bar/style.css.shim.ngstyle.ts:9

export const styles:any[] = ['.slim-loading-bar[_ngcontent-%COMP%] {\n    position: fixed;\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 99999;\n}\n\n\n.slim-loading-bar-progress[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 0;\n    z-index: 99998;\n    background-color: green;\n    color: green;\n    box-shadow: 0 0 10px 0; \n    height: 2px;\n    opacity: 0;\n\n    \n    -webkit-transition: all 0.5s ease-in-out;\n    -moz-transition: all 0.5s ease-in-out;\n    -o-transition: all 0.5s ease-in-out;\n    transition: all 0.5s ease-in-out;\n}'];
^^^^^^

SyntaxError: Unexpected token export

어떻게 고칠 수 있을까요?

제외 섹션에 추가하고 웹팩에 최소한 시도해보십시오.
공장

2017-11-20 15:18 GMT + 01 : 00 lomboboo [email protected] :

@AnthonyNahas https://github.com/anthonynahas , 하나의 모듈에 감사드립니다.
작동했습니다. 하지만 지금은 다른 패키지 ng2-slim-loading-bar를 사용하고 있습니다.
https://github.com/akserg/ng2-slim-loading-bar 및 오류가 발생합니다.

some_path / client / dist / ngfactory / node_modules / ng2-slim-loading-bar / style.css.shim.ngstyle.ts : 9

const 스타일 내보내기
^^^^^^

SyntaxError : 예기치 않은 토큰 내보내기

어떻게 고칠 수 있을까요?

—
댓글을 달았 기 때문에 수신 한 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-345708386 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AQFpli_Y29p1Fd66V0COJ32nX1LbECVpks5s4Yo7gaJpZM4OAQmB
.

@lomboboo 는 ng2-slim ... 모듈을 트랜스 파일하기 위해 새 npm 스크립트를 추가합니다.
-> "scrtipsts"범위의 package.json에 npm 스크립트 추가
"compile_ng2-slim-loading-bar": "babel node_modules/ng2-slim-loading-bar -d node_modules/ng2-slim-loading-bar --presets es2015",

그런 다음->

add a postinstall script in package.json in "scrtipsts" scope "postinstall": "npm run compile_<strong i="11">@agm_core</strong> && npm run compile_ng2-slim-loading-bar ",

-> 그 후 npm i 한 번 더 실행

-> 결과
다른 모듈도 트랜스 파일해야합니다.

@AnthonyNahas 정말 감사합니다

@AnthonyNahas , 이미 언급했듯이이 모듈을 2015 년으로 변환하는 스크립트가 있습니다. 약간 다른 방법이 있지만 아이디어는 동일합니다. 그래서 나는 가지고있다:

    "ng2_slim:tocommonjs": "node node_modules/babel-cli/bin/babel.js node_modules/ng2-slim-loading-bar/src -d --out-dir node_modules/ng2-slim-loading-bar/src --presets es2015",
    "prestart": "npm run ng2_slim:tocommonjs && npm run ngxerrors:tocommonjs && ng build --prod && ngc",
    "start": "ts-node src/server.ts"

아니면 postinstall 훅 중에 정확히 당신의 방식

@AnthonyNahas , postinstall 후크 동안 2015로 컴파일을 시도했지만 어쨌든 오류가 나타납니다. Angular에서 생성 한 client/dist/ngfactory/node_modules/ng2-slim-loading-bar/style.css.shim.ngstyle 파일이라고 생각하지만 어떻게 작동하는지 모르겠습니다.

뿡뿡

postinstall 에서는 중요하지 않습니다!

그 블록이 프로젝트에서 사용한 것과 동일한 블록입니까?

첫 번째 npm 스크립트에서 버그를 발견했습니다 : u는 src에있는이 파일이 아닌 다른 파일을 트랜스 파일해야 할 수도 있습니다 .-->

이전->
"ng2_slim:tocommonjs": "node node_modules/babel-cli/bin/babel.js node_modules/ng2-slim-loading-bar/src -d --out-dir node_modules/ng2-slim-loading-bar/src --presets es2015",

(이후)->

"ng2_slim:tocommonjs": "babel node_modules/ng2-slim-loading-bar -d --out-dir node_modules/ng2-slim-loading-bar --presets es2015",

PS : 당신이 터미널에서 NPM 스크립트를 실행하는 경우 u는 사용할 수 babel 대신 node_modules/babel-cli/bin/babel.js . 다른 하나는 npm이 아닌 터미널에서 즉시 작업을 실행할 때만 유용합니다.

이 저장소를 방금 분기했으며 예기치 않은 토큰 내보내기 / 가져 오기와 같은 이러한 종류의 오류를 해결하는 더 나은 솔루션을 곧 제공 할 것입니다. 그러면 개발자가 src 파일을 수동으로 트랜스 파일하지 않고이 모듈을 사용할 수 있고 사용자 지정 npm 스크립트를 실행할 수 있습니다. ..

@AnthonyNahas MVP

@AnthonyNahas 이므로이 솔루션으로 끝났습니다. 서버용 webpack.config.js 만들고 다음과 같이 구성합니다.

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
module.exports = {
  entry: {
    server: './src/server.ts'
  },
  resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      'main.server': path.join(__dirname, 'dist', 'server', 'main.bundle.js')
    }
  },
  target: 'node',
  plugins: [
    //new webpack.NormalModuleReplacementPlugin(/\.\.\/environments\/environment/, '../environments/environment.prod')
  ],
  externals: [nodeExternals({
    whitelist: [
      /^ng2-slim-loading-bar/,
    ]
  })],
  node: {
    __dirname: false,
    __filename: false
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
};

따라서 webpack 및 webpack-node-externals를 로컬로 설치해야합니다. nodeExternals 내에서 서버 컴파일시 필요하지 않은 플러그인, 패키지를 정의 할 수 있습니다. 제 경우에는 제가 설명한 오류를 발생시키는 ng2-slim-loading-bar 플러그인입니다.
마지막으로 서버 스크립트를 실행할 때 webpack 를 package.json 에 추가합니다. 내 package.json 은 (는) 다음과 같습니다.

...
"prestart": "ng build --prod && ngc && webpack",
 "start": "node dist/server.js",
...

webpack.config.js 의 표준 이름이없는 경우 webpack 인수로 올바른 이름을 지정해야합니다. 예를 들면

...
"prestart": "ng build --prod && ngc && webpack --config webpack.server.config.js", // <<<-------
 "start": "node dist/server.js",
...

누군가에게 도움이되기를 바랍니다. 제 생각에는 서버에 문제가있는 모든 플러그인을 컴파일하는 것이 더 강력한 솔루션입니다.

@AnthonyNahas 나는 같은 문제에 직면하고 있으며 해결책을 시도했지만
솔루션에서 지정한 아래 포인트에 대해 수행 할 작업

• 이것을 .babelrc라는 이름으로 루트 프로젝트에 추가하십시오.
  { "사전 설정": [ "es2015"]}

뿡뿡
프로젝트의 최상위 (루트)에서-> .babelrc 라는 이름의 파일을 만들고 붙여 넣습니다.
해당 파일의 다음-> { "presets": ["es2015"] } <-

안녕하세요.
솔루션이 webpack.config 파일을 사용하거나 사용하지 않고 작동합니까?

프로젝트가 배출 되었는지 여부에 따라 다릅니다.
그러나 코드를 es5로 트랜스 파일하는 것은 webpack.config 파일에 직접적인 종속성이 없습니다.

@AnthonyNahas 그의 솔루션에 따라 컴파일 된 버전을 git에 푸시하여 babel 등을 설치하지 않고도 package.json에서 직접 사용할 수 있습니다.

"@agm/core": "git+https://github.com/cmddavid/core.git"

누구에게나 유용 할 수 있습니다. Firebase 호스팅을 사용하고 있으며 어떤 이유로 Firebase 용 package.json에서 Anthony가 설명한 것과 동일한 방법을 사용하더라도 Firebase가 코드를 컴파일하지 않는 것 같습니다. 그래서이 해결 방법을 사용합니다.

@cmddavid Firebase

@dockleryxk 그렇다면 Firebase를 사용할 때 내 솔루션이 유일한 솔루션이라는 의미입니까?

Firebase가 모든 모듈을 다시 설치하는 이유를 완전히 이해하지 못합니다. 배포 전에 클라이언트에서 생성되는 서버 번들이 충분하지 않습니까? Firebase 함수에 의해 실행되는 노드 스크립트는 매우 제한된 노드 패키지 세트 만 필요하다고 말할 수 있습니다. 확실히 @agm/core 패키지는 아닙니다. 배포 중에 서버 번들이 이미 서버로 전송되고 있기 때문입니다.

@cmddavid 노드 모듈 디렉토리를 업로드하는 데 잠재적으로 오랜 시간이 걸릴 수 있습니다. 이유는 제 추측이지만 실제로는 모르겠습니다. 개인적으로 컴파일 된 모듈을 functions 디렉토리 내의 디렉토리에 넣고 functions 디렉토리의 package.json에서 참조합니다. 예 : "@agm/core": "file:./compiled_modules/@agm/core"

@AnthonyNahas 가 내 하루를 구했습니다. 이 Angular Universal Server Side 렌더링을 몇 주 동안 실행하는 데 어려움을 겪었습니다. 당신의 솔루션은 매력처럼 작동했습니다 !!

@AnthonyNahas , 감사합니다, 저에게 잘 작동합니다, @agm 파일을 열었을 때 ES6 구문을 본 후 첫 번째 생각은 가장 힘든 웹팩을 사용하여 컴파일하는 것이 었습니다. Angular Universl SSR 및 이제 절대적으로 괜찮습니다!

externals: [nodeExternals({ whitelist: [ /^@agm\/core/, ] })], 이 (가) 나를 위해 일했습니다. 감사합니다. 그렇지 않으면 @AnthonyNahas 솔루션이 작업을 수행해야합니다.

내 패키지 중 하나에 동일한 문제가 있었는데 "Angular Package Format"과 호환되는 패키지를 만드는 것이 트릭이었습니다. 이것은 매우 유용한 npm 패키지입니다 : https://github.com/dherges/ng-packagr

거의 플러그 앤 플레이입니다.

트윗 담아 가기 이것은 또한 나를 위해 일하고 있습니다.
감사

너희들 아직도 이것에 문제가 있습니까? 저는이 모듈을 Universal 프로젝트에서 사용하고 있으며 모든 작업 파일이 바로 사용할 수 있습니다. 어떤 버전을 사용하고 있습니까?

안녕하세요 @AnthonyNahas , ng2-google-place-autocomplete에서 작동하지 않는 것 같습니다.

이 오류 메시지가 나타납니다.
`C : \ Users \ Andrenode_modules \ ng2-google-place-autocompleteindex.ts : 6
내보내기 * from './src/index';
^^^^^^

SyntaxError : 예기치 않은 토큰 내보내기
createScript에서 (vm.js : 80 : 10)
Object.runInThisContext에서 (vm.js : 139 : 10)
Module._compile (module.js : 599 : 28)에서
Module._extensions..js (module.js : 646 : 10)
Object.require.extensions. (익명 함수) [.ts] (C : \ Users \ Andrenode_modulests-node \ srcindex.ts : 392 : 14)
Module.load (module.js : 554 : 32)
tryModuleLoad (module.js : 497 : 12)에서
Function.Module._load (module.js : 489 : 3)
Module.require (module.js : 579 : 17)
필요시 (internal / module.js : 11 : 18)`

그런 다음 귀하의 단계를 따랐습니다.

1. npm i --save -dev babel-cli babel-preset-es2015

2. 이것을 .babelrc라는 이름으로 루트 프로젝트에 추가하십시오.
   { "사전 설정": [ "es2015"]}

3. 이 스크립트를 내 package.json 파일에 추가하십시오.

"스크립트": {
"compile_ng2-google-place-autocomplete": "babel node_modules / ng2-google-place-autocomplete -d node_modules / ng2-google-place-autocomplete --presets es2015",
"사전 시작": "ng build --prod && ngc",
"start": "ts-node src / server.ts",
"postinstall": "npm run compile_ng2-google-place-autocomplete"
}

1. npm i를 실행하여 deps를 설치하십시오. deps를 설치하면 postinstall 스크립트가 실행되고 babel은 대상 js 파일을 컴파일합니다.

2. npm run start 실행

3. 여전히 동일한 오류가 발생합니다.

당신이 나를 도울 수 있다면 나는 이것을 고치기 위해 몇 시간을 보냈기 때문에 정말 큰 도움이 될 것입니다!

@dockleryxk , @AnthonyNahas , @cmddavid 는 더 간단하고 쉬운 방법입니다 ...
원 사는 agm 컴파일을 추가합니다. webpack 및 sytemjs nonsens없이 angular5 ^ + 범용 + ssr + firebase 호스팅 / 기능을 작동합니다.

@retrwood 는 훌륭하지만 NPM 버전도 사용할 수 있으면 좋을 것입니다.

감사합니다 @AnthonyNahas ,
내가 cli 도구를 꺼내는 데 동의하지 않았기 때문에 당신은 내 하루를 저장했습니다.

정말 고맙습니다.

@AnthonyNahas babel-preset-es2015는 이제 더 이상 사용되지 않습니다. 이 문제를 어떻게 처리 할 수 ​​있습니까?

@Gomathipriya 물어 주셔서 감사합니다! 드디어 풀 리퀘스트를 보낼 동기를 주셨습니다!

21.9.2017 ,이 버그를 처리하는 솔루션을 게시했습니다! 그 당시에는 라이브러리가 번들, es5와 같은 쓰기 코드를 생성하고 있다는 사실을 몰랐습니다. 프로젝트가 너무 많았고 @ agm / core에서 정말 문제가되는 부분을 찾을 수 없었습니다! 글쎄, 어제 @ agm / core를 사용하는 앵귤러 앱을위한 앵귤러 머티리얼 익스텐션을 개발하고 jest 테스팅 하는 동안 같은 문제에 직면했습니다. 그래서 저는이 프로젝트를 더 자세히 살펴보기로 결정했고 흥미로운 것을 발견했습니다.

사실,이 프로젝트의 빌드가 이미 우리를 위해 그렇게했기 때문에 우리는 더 이상 코드를 es5로 트랜스 파일 할 필요가 없습니다. 그러나 typescript는 그들에 대해 모릅니다! package.json 에서 일부 정보가 누락되었습니다.

그래서 그것을 해결하기 위해 팁 :

1. cd node_modules
2. cd \@agm/core
3. package.json 열기
4. 다음을 추가하십시오

 "main": "core.umd.js",
  "es2015": "index.js",
  "typings": "index.d.ts",

버그가 해결되어야합니다! 이제 컴파일 할 때 typescript가 올바른 js 코드를 선택합니다!

몇 초 전에 풀 요청을 보냈습니다!

기계에서 테스트 한 후이 PR 을 지원하십시오!

이 프로젝트 @ angular-material-extensions / google-maps-autocomplete 에서 다음 시나리오를 테스트합니다.

프로젝트가 마음에 들면 주연으로 응원 해주시고 공유 해주세요!

모두 감사합니다 👍 ❤️

어떤 소식이라도? 뿡 빵뀨

@bastienlemaitre PR을 조정하겠습니다.

여기를보세요 :

https://www.dropbox.com/s/88pez0ytawx59ar/fix-agm-ssr-1.mp4?dl=0
https://www.dropbox.com/s/yu1vq328o96brvd/fix-agm-ssr-2.mp4?dl=0
https://www.dropbox.com/s/5i9r64lotq1cfuo/fix-agm-ssr-3.mp4?dl=0

트릭이 당신을 위해 그것을했는지 말하십시오!

@AnthonyNahas 지도 클러스터 러 패키지에서도 이와 동일한 문제가 발생했습니다. 매우 실망 스럽습니다. 시간을내어 작업 해 주셔서 감사합니다. PR이 검토되는 동안 구현할 수있는 제안 된 솔루션이 있습니까?

수동으로 추가하여 테스트를 통과 할 수 있지만 파이프 라인에서는 여전히 실패합니다.

@Gomathipriya 방금 위에 게시 된 솔루션을 babel v7.1.0의 최신 버전으로 업데이트했으며 내 npm mobule @ angular-material-extensions / google-maps-autocomplete 에서 프로세스를 테스트했습니다.

여기서 circleci 상태 확인

여기에 travis-ci 상태

@mcblum 아마도 코어 모듈과 같은 것이 될 것입니다 (위에 게시 된 솔루션 참조).

건배 🍻

Agm은 정말 멋지고 편리하지만 안타깝게도 PR과 관련하여 도움을 드릴 수 없었습니다. 아마도 저에게는 너무 복잡했을 것입니다.

그래서 저는 Google Maps Javascript API에 대한 사용자 지정 코드를 구현하기로 결정했습니다.이 코드는 web-google-maps 라는 새로운 웹 구성 요소로 바뀌 었습니다.이 코드는 오늘 게시하고 문제를 해결하기 위해 프로젝트에서 대체로 사용했습니다.

다시 말하지만, Agm은 굉장하며이 웹 구성 요소는이 라이브러리가 제공하는 것만 큼 많은 가능성을 제공하지 않습니다. 나는 문제에 직면 한 누군가가 잠재적 인 해결책을 찾기 위해 서두르는 경우를 대비하여이 줄을 쓰고 언급 할 것이라고 생각했습니다.

빌드하는 동안 문제가 없지만 서버 측에서 렌더링되는 페이지를 요청할 때 다음 오류가 발생합니다.

ERROR { ReferenceError: window is not defined
    at WindowRef.getNativeWindow (webpack:///./node_modules/@agm/core/utils/browser-globals.js?:8:57)
    at LazyMapsAPILoader.load (webpack:///./node_modules/@agm/core/services/maps-api-loader/lazy-maps-api-loader.js?:45:38)
    at new FitBoundsService (webpack:///./node_modules/@agm/core/services/fit-bounds.js?:38:81)
    at createClass (webpack:///./node_modules/@angular/core/fesm5/core.js?:19057:20)
    at _createProviderInstance$1 (webpack:///./node_modules/@angular/core/fesm5/core.js?:19042:20)
    at createProviderInstance (webpack:///./node_modules/@angular/core/fesm5/core.js?:18919:12)
    at createViewNodes (webpack:///./node_modules/@angular/core/fesm5/core.js?:20149:36)
    at Object.createEmbeddedView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20070:5)
    at TemplateRef_.createEmbeddedView (webpack:///./node_modules/@angular/core/fesm5/core.js?:18651:38)
    at ViewContainerRef_.createEmbeddedView (webpack:///./node_modules/@angular/core/fesm5/core.js?:18517:35)
    at NgIf._updateView (webpack:///./node_modules/@angular/common/fesm5/common.js?:3489:45)
    at NgIf.set [as ngIf] (webpack:///./node_modules/@angular/common/fesm5/common.js?:3457:18)
    at updateProp (webpack:///./node_modules/@angular/core/fesm5/core.js?:19212:37)
    at checkAndUpdateDirectiveInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:18963:19)
    at checkAndUpdateNodeInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:20270:20)
    at checkAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:20232:16)
    at prodCheckAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:20773:5)
    at Object.eval [as updateDirectives] (webpack:///./dist/server/main.js?:45103:316)
    at Object.updateDirectives (webpack:///./node_modules/@angular/core/fesm5/core.js?:20561:72)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20214:14)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20455:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20397:13)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20220:5)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20455:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20397:13)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20220:5)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20455:21)
    at execEmbeddedViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20418:17)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20215:5)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20455:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20397:13)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20220:5)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20455:21)
    at execEmbeddedViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20418:17)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20215:5)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20455:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:20397:13)
    at Object.checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:20220:5)
    at ViewRef_.detectChanges (webpack:///./node_modules/@angular/core/fesm5/core.js?:18595:22)
    at eval (webpack:///./node_modules/@angular/core/fesm5/core.js?:15257:63)
    at Array.forEach (<anonymous>)
    at ApplicationRef.tick (webpack:///./node_modules/@angular/core/fesm5/core.js?:15257:25)
    at eval (webpack:///./node_modules/@angular/core/fesm5/core.js?:15148:105)
    at ZoneDelegate.invoke (webpack:///./node_modules/zone.js/dist/zone-node.js?:387:26)
    at Object.onInvoke (webpack:///./node_modules/@angular/core/fesm5/core.js?:14529:33)
    at ZoneDelegate.invoke (webpack:///./node_modules/zone.js/dist/zone-node.js?:386:32)
    at Zone.run (webpack:///./node_modules/zone.js/dist/zone-node.js?:137:43)
    at NgZone.run (webpack:///./node_modules/@angular/core/fesm5/core.js?:14443:28)
    at Object.next (webpack:///./node_modules/@angular/core/fesm5/core.js?:15148:81)
    at SafeSubscriber.schedulerFn [as _next] (webpack:///./node_modules/@angular/core/fesm5/core.js?:10544:52)

@ maxime1992 는 빠른 수정을 시도 할 수 있습니다. 브라우저 측에만 맵을 표시하고 서버 측에는 window 요소가 없습니다 (이것이 빌드 할 수 있지만 런타임에 실패 함).

의사 코드 :

<ng-container *ngIf="isPlatformBrowser(platformId)">
  <here-your-agm-map/>
</ng-container>

@AnthonyNahas 귀하의 솔루션을 시도했지만 여전히 동일한 오류가 발생했습니다.
클라우드 파이어 기능에서 서버 번들을 배포하려고합니다 ...

agm이 없으면 모든 것이 정상 / 작동하지만 agm에는 오류가 있습니다.

functions [ssr (us-central1)] : 배포 오류입니다.
함수로드 오류 : index.js 파일의 코드를로드 할 수 없습니다.
코드에 구문 오류가 있습니까?
자세한 스택 추적 : /user_code/node_modules/@agm/core/services/managers/circle-manager.js:1
(함수 (내보내기, 필요, 모듈, __filename, __dirname)
{ '@ angular / core'에서 {Injectable, NgZone} 가져 오기
^^^^^^

SyntaxError : 예기치 않은 토큰 가져 오기
createScript에서 (vm.js : 56 : 10)
Object.runInThisContext (vm.js : 97 : 10)
Module._compile (module.js : 549 : 28)
Object.Module._extensions..js (module.js : 586 : 10)
Module.load (module.js : 494 : 32)
tryModuleLoad (module.js : 453 : 12)에서
Function.Module._load (module.js : 445 : 3)
Module.require (module.js : 504 : 17)에서
필요시 (internal / module.js : 20 : 19)
Object. @ agm / core / services / managers / circle-manager (/user_code/dist/server/main.js:4999:18)

답장주세요

즉, babel 컴파일러가 가져 오기를 대체했을 때 작업을 수행하지 않았 음을 의미합니다. 두 저장소 모두 내 github에서 미리 컴파일하여 사용할 수 있어야합니다. 바벨 부분을 할 수 없다면 그것을 사용할 수 있습니다.

@AnthonyNahas 솔직히 귀하의 솔루션에 감사드립니다. 최신 버전 babel 및 angular 6으로 저를 위해 일하고 있습니다.

안녕하세요.

당신은 나의 친구입니다 ...

Angular Universal을 통해 해당 패키지가 서버 측에서 사용되지 못하게하는 여러 문제가 있습니다. 이미 다양한 라이브러리 (예 : https://github.com/salemdar/ngx-cookie/pull/41, https://github.com/zefoy/ngx-perfect-scrollbar/pull/129, https://github.com/mattlewis92/angular-resizable-element/pull/80), 그래서 제가 한 번 볼 것이라고 생각했습니다.

간단히 말해서 Angular CLI로 서버 플랫폼을 대상으로 할 때 앱 자체 만 컴파일됩니다. 라이브러리 UMD 번들은 NodeJS에서 실행할 때 사용되기 때문입니다. @AnthonyNahas가 지적했듯이 이것은 main 패키지 진입 점이 UMD 번들, 즉 NodeJS가 기본적으로 이해하는 것을 가리켜 야 함을 의미합니다.

NodeJS 네이티브 UMD 번들 외에도 Angular Package Format 지침에 따른 라이브러리의 모범 사례는 해당 패키지가 이미 수행하고있는 AoT 친화적 인 ES 모듈 및 metadata.json 메타 데이터 파일도 게시하는 것입니다. 그러나 https://github.com/angular/angular-cli/issues/7200 으로 인해 해당 라이브러리가 대신 별도의 ES 모듈로 게시 될 때 Angular Universal 빌드가 현재 실패합니다 ( SyntaxError: Unexpected token export 유사 오류 발생). 딥 임포트가 ES 모듈로 해석되어 ES 모듈을 이해하지 못해 노드가 실패하게되므로 플랫 한 것 (fesm)의

수정은 https://angular.io/guide/aot-compiler 에 따라 angularCompilerOptions 의 flatModuleOutFile & flatModuleId 매개 변수를 사용하고 출력을 Rollup을 통해 전달하는 것입니다. , 플랫 ES 모듈 및 타이핑 파일을 생성 한 다음 module 및 typings 진입 점으로 설정합니다. 이러한 옵션에는 라이브러리 당 고유 한 진입 점이 필요하기 때문에 js-marker-clusterer & snazzy-info-window 를 지원하기 위해 기본 tsconfig.json 파일을 분할해야했습니다.

또한 롤업 구성은 서버 측에서 중단되는 context: 'window' 하고 있었는데, 이는 롤업의 기본 "이는 정의되지 않은 동작"으로 다시 전환되었습니다 (경고이기는하지만 실제로는 예상되는 동작입니다).

마지막으로 앱 범용 빌드가이 라이브러리로 컴파일되었으므로 런타임시 수행 할 작업을 결정하고 코드 자체를 범용 친화적으로 만들어야합니다. Google Maps SDK 로더 load() 에서 isPlatformBrowser(this.platformId) 를 사용하여 달성했습니다. 주입을 건너 뛰는 load() 함수. 현재 사용 사례에 대한 트릭을 수행하지만 서버 측에서 해당 라이브러리를 비활성화하려면 대부분의 보호 장치가 필요할 수 있습니다 (Google Maps SDK가 어차피 실행되지 않기 때문입니다).

어쨌든 PR은 https://github.com/SebastianM/angular-google-maps/pull/1554에 있으며 의견을 환영합니다. 내 프로젝트에 성공적으로 사용하고있는 @ laurentgoudet / agm-core 에서 실행중인 포크가 있습니다 (이 PR이 병합 될 때까지). Angular CLI를 사용하고 있지만 모든 빌더에서 작동합니다. 피드백 환영합니다.

많은 시도 끝에 @AnthonyNahas가 제공 한 솔루션을 통해 범용 앱을
내 제안은 ts 파일이 js로 효과적으로 변환되는지 확인하는 것입니다. 그렇다면 가져 오기 / 내보내기에 대한 오류가 나타나지 않아야합니다.

수정 (2018/12/26)
멋진 정보 창 모듈로 문제가 다시 발생합니다. 결국 firebase deploy를 사용할 때 babel이 실행되고 있지 않다는 것을 알게되었습니다 (Firebase 기능으로 AU를 배포 할 때 npm 설치가 수행되며 이는 패키지가 ts 파일로 다시 설치됨을 의미합니다). 결국 라이브러리 (https://github.com/jota12x/angular-google-maps)를 포크하고 바벨을 적용한 다음 저장소에서 설치했습니다. 문제 해결됨. (기본 리포지토리에서 수정을 기다리는 중).

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 발생하지 않으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.

이것에 대한 활동이 있습니까? 수정하는 것은 매우 간단합니다. @angular-devkit/build-angular 사용을 시작하기 만하면됩니다. 사람들은 두 가지 방법이 있기 때문에 이것은 가장 심각한 문제 중 하나입니다.
1) 사용자 지정 웹팩 구성 사용
2) 일부 해킹 사용

@ angular-devkit / build-angular 사용을 시작하는 것은 매우 간단하며 해킹 시간을 절약 할 수 있습니다.

안녕하세요.

_ 바벨 최신 버전으로 솔루션 업데이트

@philippeboyd @dkmostafa 나는 최근에이 모듈과-> ngx translate 등의 다른 모듈에 대해 동일한 문제를 해결했습니다.

솔루션 (js 파일을 es2015로 컴파일) :

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
2. .babelrc 이름으로 루트 프로젝트에 추가하거나 cli를 통해 직접 사전 설정을 추가하십시오.
   { "presets": ["@babel/preset-env"] }
3. "scrtipsts"범위의 package.json에 npm 스크립트 추가
   "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",
4. "scrtipsts"범위의 package.json에 설치 후 스크립트 추가
   "postinstall": "npm run compile_@agm_core",
5. npm i 를 실행하여 deps를 설치하십시오. deps를 설치하면 postinstall 스크립트가 실행되고 babel은 대상 js 파일을 컴파일합니다.
6. 서버를 실행하고
7. 작동하면 피드백을주세요. 내 컴퓨터에서 작동하는 3 개 이상의 npm 모듈에 대해 동일한 작업을 수행했습니다 .D

고마워요, Angular 7에서 여전히 작동합니다.

하지만 그건 해킹 ... 아니면 해결 방법 ...

2019 년 4 월 2 일 화요일 오후 12:53 PEA [email protected] 작성 :

@AnthonyNahas https://github.com/AnthonyNahas

솔루션을 최신 버전의 바벨로 업데이트했습니다.

@philippeboyd https://github.com/philippeboyd @dkmostafa
https://github.com/dkmostafa 최근에 동일한 문제를 해결했습니다.
모듈 및 기타-> ngx 번역 등 ...

솔루션 (js 파일을 es2015로 컴파일) :

1. npm install --save-dev @ babel / core @ babel / cli @ babel / preset-env
2. 이것을 .babelrc라는 이름으로 루트 프로젝트에 추가하거나
   CLI를 통해 직접 사전 설정
   { "presets": [ "@ babel / preset-env"]}
3. "scrtipsts"범위의 package.json에 npm 스크립트 추가
   " compile_ @ agm_core ": "babel node_modules / @ agm / core -d
   node_modules / @ agm / core --presets @ babel / preset-env ",
4. "scrtipsts"범위의 package.json에 설치 후 스크립트 추가
   "postinstall": "npm run compile_ @ agm_core ",
5. npm i를 실행하여 deps를 설치하십시오. deps를 설치 한 후
   postinstall 스크립트가 실행되고 babel이 대상 js 파일을 컴파일합니다.
6. 서버를 실행하고
7. 작동하면 피드백을주세요. 나는 더 많은 것을 위해 똑같은 얇은 것을했다
   3 npm 모듈보다 내 컴퓨터에서 작동합니다.

고마워요, Angular 7에서 여전히 작동합니다.

—
댓글을 달았 기 때문에 수신 한 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/SebastianM/angular-google-maps/issues/1052#issuecomment-478944955 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/ADvMl79FA7YGEZN_DSvwaOsUS7zXFW9Rks5vczbEgaJpZM4OAQmB
.

@AnthonyNahas 의 솔루션을 사용했지만이 오류가 발생합니다.

/node_modules/@agm/core/services/maps-api-loader/maps-api-loader.js:44
        type: _core.Injectable
                    ^

TypeError: Cannot read property 'Injectable' of undefined

@ HighSoftWare96 문제가 라이브러리와 직접 관련이 없습니다 ... 컴파일 오류 인 것 같습니다 ...

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 발생하지 않으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.

우리는 곧 ngc로 이동할 예정이므로 Angular Universal과 함께 작동하기를 바랍니다. 개인적으로 저는 보편적이고 AoT에 대한 경험과 지식이 없습니다.

좋아, ng-packagr PR을 가져 왔으므로 이제 작동 할 것입니다. 마스터를 포크하고 작동하는지 확인할 수 있습니까?

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 발생하지 않으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.

안녕하세요 @ doom777
이 병합을 해제 할 계획 인 경우 말씀해 주시겠습니까? 이 라이브러리의 패치 버전을 삭제하고 싶습니다. :)

나에게 달려 있지 않다