small medium large xlarge

03 Aug 2017, 15:44
Whit Walters (1 post)

I’m having trouble getting Angular to display the test component (or any components in Chapter 6). I can get the template to render in /shine/app/views/angular_test/index.html.erb if I put it there

/shine/app/views/angular_test/index.html.erb (with template)

Angular Test

<h2 *ngIf=”name”>Hello {{name}}!</h2>




But if I take it out and put it in /shine/webpack/application.js


require (“application.css”); require(“bootstrap/dist/css/bootstrap.css”);

var coreJS = require(‘core-js’); var zoneJS = require(‘zone.js’); var reflectMetadata = require(‘reflect-metadata’); var ng = { core: require(“@angular/core”), common: require(“@angular/common”), compiler: require(“@angular/compiler”), forms: require(“@angular/forms”), platformBrowser: require(“@angular/platform-browser”), platformBrowserDynamic: require(“@angular/platform-browser-dynamic”), router: require(“@angular/router”) };

var AngularTestComponent = ng.core.Component({ selector: “shine-angular-test”, template: ‘<h2 *ngIf=”name”>Hello {{name}}!</h2> \


\ Name \ \

\ </form> ‘ }).Class({ constructor: function(){ = null; } });

var AngularTestAppMdoule = ng.core.NgModule({ imports: [ ng.platformBrowser.BrowserModule, ng.forms.FormsModule ], declarations: [ AngularTestComponent ], bootstrap: [ AngularTestComponent ] }) .Class({ constructor: function () {} });

document.addEventListenter(‘DOMContnentLoaded’, function(){ var shouldBootstrap = document.getElementById(“angular-test”); if (shouldBootstrap){ ng.platformBrowserDynamic. platformBrowserDynamic(). bootstrapModule(AngularTestAppMdoule); }} );

I then have two issues - 1. It’s not generating the same HTML in the console as it was when I put the template in the index.html.erb - no template code is rendered by the browser (Chrome or FireFox) 2. I also get this error Uncaught TypeError: document.addEventListenter is not a function at eval (eval at (application.js:47), :41:10) at Object. (application.js:47) at __webpack_require__ (application.js:20) at application.js:40 at application.js:43

I’ve spent a few hours Googling the issues and I can’t seem to find anything that relates to what we are doing.

Thanks Whit Walters

03 Aug 2017, 15:54
David Copeland (512 posts)

It’s hard to tell what you are trying to do since the message is all jumbled—can you post a link to your repo and maybe reformat the message here?

You must be logged in to comment