i trying angular2 demo code run in chrome dev engine. followed example , following error.
uncaught referenceerror: require not defined main.js:4 uncaught typeerror: cannot read property 'component' of undefined
however, when put exact same code anywhere else (static html served python) works expected. not getting other errors on page when inspect element or inspect background page.
i tried right clicking on project , doing "refactor csp" , did not change error.
function appcomponent() {} appcomponent.annotations = [ new angular.component({ selector: 'my-app' }), new angular.view({ template: '<h1>my first angular 2 app</h1>' }) ]; document.addeventlistener('domcontentloaded', function() { angular.bootstrap(appcomponent); });
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js"></script> <my-app></my-app>
here manifest
{ "manifest_version": 2, "name": "myapp", "short_name": "myapp", "description": "", "version": "0.0.1", "minimum_chrome_version": "38", "icons": { "16": "assets/icon_16.png", "128": "assets/icon_128.png" }, "app": { "background": { "scripts": ["background.js"] } } }
so found issue difference between angular2_sfx.js , angular2.dev.sfx.js file included snippet. below angular2_sfx.js. compare 30k+ lines of dev version.
"use strict"; var $__angular2__; var angular = ($__angular2__ = require("./angular2"), $__angular2__ && $__angular2__.__esmodule && $__angular2__ || {default: $__angular2__}); var _prevangular = window.angular; angular.noconflict = function() { window.angular = _prevangular; return angular; }; window.angular = angular; //# sourcemappingurl=angular2_sfx.es6.map //# sourcemappingurl=./angular2_sfx.map
@user41341 on right path might have missed few pieces of information. since installed angular2 npm, repo has angular2-sfx.js posted 12 lines of code. reason, npm repo missing angular2.dev.sfx.js
has approximately 30,000 lines of code. not quite sure why there's missing, switching dev version should give need.