Angular2 bundle.js:2 Uncaught ReferenceError: google is not defined - google-maps

Question

I use the 2.0.0-rc.4 version of Angular. I have always "google is not defined" problem in my console
console error
bundle.js:2 Uncaught ReferenceError: google is not defined
With Angular Beta without gulp, I have not had the problem.
typings folder content
my ** gulpfile.js** file
var gulp = require('gulp');
gulp.task('bundle', function() {
var SystemBuilder = require('systemjs-builder');
var builder = new SystemBuilder();
builder.loadConfig('./system.config.js')
.then(function(){
var outputFile = 'dist/bundle.js';
return builder.buildStatic('app', outputFile, {
minify: true,
mangle: true,
rollup: true
});
})
.then(function(){
console.log('bundle built successfully!');
});
});
package.json
{
"name": "angular2-poc",
"scripts": {
"clean": "gulp clean",
"compile": "gulp compile",
"build": "gulp build",
"postinstall": "typings install",
"test": "tsc && karma start",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"typings": "typings"
},
"devDependencies": {
"concurrently": "^1.0.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-jshint": "^2.0.1",
"gulp-minify": "0.0.11",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.1",
"gulp-uglify": "^1.5.3",
"gulp-util": "^3.0.7",
"jasmine-core": "~2.3.4",
"jshint": "^2.9.2",
"karma": "~0.13.15",
"karma-jasmine": "~0.3.6",
"karma-phantomjs2-launcher": "^0.3.2",
"lite-server": "2.0.1",
"path": "^0.12.7",
"systemjs-builder": "^0.15.16",
"traceur": "^0.0.91",
"typescript": "^1.7.3",
"yargs": "^4.7.0"
},
"dependencies": {
"#angular/common": "2.0.0-rc.4",
"#angular/compiler": "2.0.0-rc.4",
"#angular/core": "2.0.0-rc.4",
"#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.1",
"#angular/upgrade": "2.0.0-rc.4",
"#angular/forms": "0.2.0",
"es6-shim": "^0.35.0",
"events": "^1.0.2",
"fbjs": "^0.3.1",
"flux": "^2.1.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
}
}
My tsd.json file
{
"version": "v4",
"repo": "borisyankov/DefinitelyTyped",
"ref": "master",
"path": "typings",
"bundle": "typings/tsd.d.ts",
"installed": {
"googlemaps/google.maps.d.ts": {
"commit": "de82425735f84a10b43921ae4b1d085b3752a626"
}
}
}
Thanks you

Answer 1

Try loading these 2 files from your index.html
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
For more details, refer this - https://developers.google.com/chart/interactive/docs/basic_load_libs
See if this helps.