I am brand new to web development, and I am feeling completely overwhelmed.
Recently, I decided to follow the Angular tutorial by downloading the Angular Quickstart from this link: https://github.com/angular/quickstart. My goal was to add a simple x3d element to it. In order to achieve this, I made modifications in the files app.module.ts
, app.component.ts
, and index.html
.
The changes in the file app.module.ts
are as follows:
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';`
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
schemas: [ NO_ERRORS_SCHEMA ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
The newly created app.component.ts
now looks like this:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<x3d width='600px' height='400px'>
<scene>
<shape>
<appearance>
<material diffuseColor='1 0 0'></material>
</appearance>
<box></box>
</shape>
</scene>
</x3d>`,
})
export class AppComponent { name = 'Angular'; }
Finally, the updated version of index.html
is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
However, after running $ npm start
, nothing appears on the screen without any error messages. I am using Angular 4 but cannot seem to identify the issue. Any help or guidance on how to resolve this problem would be highly appreciated. Thank you.