angularjs - Component does not displays in UI page -

-

i started learning angular2 , tried "hello world" program. have created .ts file this:

appcomponent.ts

import {   ngmodule,   component } '@angular/core'; import {browsermodule} '@angular/platform-browser'; import {platfrombrowserdynamic} '@angular/platfrom-browser-dynamic';  @component({   selector:'hello-world',   template:`   <div>     hello world   </div>` }) class helloworld { } @ngmodule({   declaration: [helloworld],   imports:[browsermodule],   bootstrap:[helloworld], }) class helloworldappmoduel{ }  platformbrowserdynamic().bootstrapmodule(helloworldappmoduel);

but when deployed , ran code in tomcat, didn't show anything, should show "hello world". not able why nothing appeared in ui.

/* importing component decorator function anularjs library module */  system.register(['@angular/core', '@angular/platform-browser'], function(exports_1, context_1) {      "use strict";      var __modulename = context_1 && context_1.id;      var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {          var c = arguments.length, r = c < 3 ? target : desc === null ? desc = object.getownpropertydescriptor(target, key) : desc, d;          if (typeof reflect === "object" && typeof reflect.decorate === "function") r = reflect.decorate(decorators, target, key, desc);          else (var = decorators.length - 1; >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;          return c > 3 && r && object.defineproperty(target, key, r), r;      };      var __metadata = (this && this.__metadata) || function (k, v) {          if (typeof reflect === "object" && typeof reflect.metadata === "function") return reflect.metadata(k, v);      };      var core_1, platform_browser_1;      var helloworld, helloworldappmoduel;      return {          setters:[              function (core_1_1) {                  core_1 = core_1_1;              },              function (platform_browser_1_1) {                  platform_browser_1 = platform_browser_1_1;              }],          execute: function() {              helloworld = (function () {                  function helloworld() {                  }                  helloworld = __decorate([                      core_1.component({                          selector: 'hello-world',                          template: "\n<div>\nhello world\n</div>\n"                      }),                       __metadata('design:paramtypes', [])                  ], helloworld);                  return helloworld;              }());              helloworldappmoduel = (function () {                  function helloworldappmoduel() {                  }                  helloworldappmoduel = __decorate([                      core_1.ngmodule({                          declaration: [helloworld],                          imports: [platform_browser_1.browsermodule],                          bootstrap: [helloworld],                      }),                       __metadata('design:paramtypes', [])                  ], helloworldappmoduel);                  return helloworldappmoduel;              }());              platformbrowserdynamic().bootstrapmodule(helloworldappmoduel);          }      }  });  //# sourcemappingurl=appcomponent.js.map
<html>  <head>  <title>angular -2       </title>      <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/reflect-metadata/reflect.js"></script>  <script src="../node_modules/systemjs/dist/system.src.js"></script>        </head>      <body>          <script src="../systemjs.config.js"></script>      <script>          system.import('appcomponent.js')              .then(null,console.error.bind(consol));          </script>          <hello-world></hello-world>      </body>  </html>
main.ts file

import {bootstrap} 'angular2/platform/browser'  import {appcomponent} './appcomponent'  bootstrap(appcomponent);

pfb snippet. what's going on?
edit 1:
checked thing in chrome shwos in console this

uncaught referenceerror: consol not defined(…)(anonymous function) @ (index):15 system.src.js:1154 http://localhost:8080/angularassign/@angular/core 404 (not found)fetchtextfromurl @ system.src.js:1154(anonymous function) @ system.src.js:1710zoneawarepromise @ zone.js:563(anonymous function) @ system.src.js:1709(anonymous function) @ system.src.js:2734(anonymous function) @ system.src.js:3308(anonymous function) @ system.src.js:3575(anonymous function) @ system.src.js:3960(anonymous function) @ system.src.js:4419(anonymous function) @ system.src.js:4671(anonymous function) @ system.src.js:406zonedelegate.invoke @ zone.js:306zone.run @ zone.js:201(anonymous function) @ zone.js:550zonedelegate.invoketask @ zone.js:339zone.runtask @ zone.js:237drainmicrotaskqueue @ zone.js:456zonetask.invoke @ zone.js:408 zone.js:443 unhandled promise rejection: error: xhr error (404 not found) loading http://localhost:8080/angularassign/@angular/core         @ xmlhttprequest.wrapfn [as _onreadystatechange] (http://localhost:8080/node_modules/zone.js/dist/zone.js:745:30)         @ zonedelegate.invoketask (http://localhost:8080/node_modules/zone.js/dist/zone.js:339:38)         @ zone.runtask (http://localhost:8080/node_modules/zone.js/dist/zone.js:237:48)         @ xmlhttprequest.zonetask.invoke (http://localhost:8080/node_modules/zone.js/dist/zone.js:405:34)     error loading http://localhost:8080/angularassign/@angular/core "@angular/core" http://localhost:8080/angularassign/appcomponent.js ; zone: <root> ; task: promise.then ; value: error: error: xhr error (404 not found) loading http://localhost:8080/angularassign/@angular/core(…)consoleerror @ zone.js:443drainmicrotaskqueue @ zone.js:472zonetask.invoke @ zone.js:408 zone.js:445 error: uncaught (in promise): error: error: xhr error (404 not found) loading http://localhost:8080/angularassign/@angular/core(…)consoleerror @ zone.js:445drainmicrotaskqueue @ zone.js:472zonetask.invoke @ zone.js:408 system.src.js:1154 http://localhost:8080/angularassign/@angular/platform-browser 404 (not found)

edit 2: here's systemjs.config.js file:

/**  * system configuration angular samples  * adjust necessary application needs.  */ (function (global) {   system.config({     paths: {       // paths serve alias       'npm:': 'node_modules/'     },     // map tells system loader things     map: {       // our app within app folder       app: 'app',       // angular bundles       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',       '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',       // other libraries       'rxjs':                      'npm:rxjs',       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'     },     // packages tells system loader how load when no filename and/or no extension     packages: {       app: {         main: './main.js',         defaultextension: 'js'       },       rxjs: {         defaultextension: 'js'       }     }   }); })(this);

edit 3: after editing package.json file this

{   "name": "angularjs2-app",   "version": "1.0.0",   "scripts": {     "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",     "tsc": "tsc",     "tsc:w": "tsc -w",     "lite": "lite-server",     "typings": "typings",     "postinstall": "typings install"   },   "license": "isc",   "dependencies": {     "angular2": "2.0.0-beta.14",      "@angular/common": "~2.1.1",     "@angular/compiler": "~2.1.1",     "@angular/core": "~2.1.1",     "@angular/forms": "~2.1.1",     "@angular/http": "~2.1.1",     "@angular/platform-browser": "~2.1.1",     "@angular/platform-browser-dynamic": "~2.1.1",     "@angular/router": "~3.1.1",     "@angular/upgrade": "~2.1.1",      "angular-in-memory-web-api": "~0.1.5",     "core-js": "^2.4.1",     "systemjs": "0.19.25",     "es6-shim": "^0.35.0",      "es6-promise": "^3.0.2",     "reflect-metadata": "0.1.2",     "rxjs": "5.0.0-beta.2",     "zone.js": "0.6.6"    },   "devdependencies": {     "concurrently": "^2.0.0",     "lite-server": "^2.2.0",     "typescript": "^1.8.9",     "typings":"^0.7.12"   } }

most of error has gone still 1 error persisted 

zone.js:306 error: referenceerror: platformbrowserdynamic not defined         @ execute (http://localhost:3000/angularassign/appcomponent.js:50:13)         @ zonedelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:306:29)         @ zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:201:44)     error loading http://localhost:3000/angularassign/appcomponent.js

please let me still remaining add?

here working example , few things whatch when creating new components,

  1. anytime create component must add

app.module.ts example

import { ngmodule }                         '@angular/core'; import { browsermodule }                    '@angular/platform-browser';     import { hellocomponent }                  './hello.component';     @ngmodule({         declarations: [ hellocomponent ],         imports: [             hellocomponent,         ],         bootstrap: [appcomponent]     })     export class appmodule {      }

then create route,

app.routing.ts

import { routes, routermodule }     "@angular/router"; import { hellocomponent }                  './hello.component';  const app_routes: routes = [     { path: '', component: hellocomponent } ]; export const routing = routermodule.forroot(app_routes);

then have 2 component files,

once

hello.component.ts

   import { component, oninit } '@angular/core';      @component({       templateurl: './hello.component.html',     })      export class hellocomponent {        constructor() { }      }

and can see instead ot using template , injecting html specify template. load html file specify. last file is,

hello.component.html

make sure have , run. every time want add new component or view follow these steps.


Comments

Post a Comment

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

-
i have password protected page on frontend. on page, want display full list of purchases associated single woocommerce product id. option 1: i've looked through woocommerce docs , , found: wc_cli_order , list_( $args, $assoc_args ) function lists orders. presumably, orders can filtered product id [--=] filter orders based on order property. line item fields (numeric array, started index zero): line_items.0.product_id option 2: i found article , based on customer id. i've modified code based on guesses meta_key , meta_value. $customer_orders = get_posts( array( 'numberposts' => -1, 'meta_key' => '_product', 'meta_value' => get_product_id(), 'post_type' => wc_get_order_types(), 'post_status' => array_keys( wc_get_order_statuses() ), ) ); how display orders single product showing recent order first? here solution put based on these articles: http://www.w...
Read more

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

-
i'm having difficult time , hope guys can help. using helicon isapi rewrite version 3.1.0.104 on our iis server. edit http.conf file , have tried , still fail. this trying do: redirect url: https://www.domain.com/switch-by-version?version=2.8.5.2594 to: https://test.domain.com/load/load.aspx?tver=2.8.5.2594 the version number @ end source url change, , need target url have same version number @ end of url example above shows. i tried following not work: rewritecond %{query_string} ^version=(\d\d?)\.(\d\d?)\.(\d\d?)\.(.*)$ [nc] rewriterule ^/switch-by-version(.*)$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l] any appreciated! thanks. if it's running in equivalent context of .htaccess , rule shouldn't start / . here's simpler version: rewritecond %{query_string} ^version=(\d+\.\d+\.\d+(?:\..+)?)$ [nc] rewriterule ^switch-by-version/?$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l]
Read more

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -

-
https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps following tutorials, try write authentication restrict admin panel, didn't understood how can that. this admin panel, admin panel don't want show , request database unauthenticated users. my laravel-routes route::get('/admin',function(){ return view('index'); }); route::get('/api/v1/employees/{id?}', 'employees@index'); route::get('/api/v1/users/{id?}', 'employees@users'); route::post('/api/v1/employees', 'employees@store'); route::post('/api/v1/employees/{id}', 'employees@update'); route::delete('/api/v1/employees/{id}', 'employees@destroy'); route::group(['prefix' => 'api'], function() { route::resource('authenticate', 'authenticatecontroller', ['only' => ['index']]); route::post('authenticate', 'authentic...
Read more