angular2 routing - Angular 2.1.2 (SystemJS) Can't resolve all parameters for AppComponent -
i getting error @ app startup
error: (systemjs) can't resolve parameters appcomponent: (?, ?, ?). error: can't resolve parameters appcomponent: (?, ?, ?). @ compilemetadataresolver.getdependenciesmetadata (https://npmcdn.com/@angular/compiler@2.1.2:14598:21) @ compilemetadataresolver.gettypemetadata (https://npmcdn.com/@angular/compiler@2.1.2:14499:28) @ compilemetadataresolver.getdirectivemetadata (https://npmcdn.com/@angular/compiler@2.1.2:14274:30) @ eval (https://npmcdn.com/@angular/compiler@2.1.2:14678:35) @ array.foreach (native) @ compilemetadataresolver._getentrycomponentsfromprovider (https://npmcdn.com/@angular/compiler@2.1.2:14677:32) @ eval (https://npmcdn.com/@angular/compiler@2.1.2:14635:85) @ array.foreach (native) @ compilemetadataresolver.getprovidersmetadata (https://npmcdn.com/@angular/compiler@2.1.2:14622:21) @ eval (https://npmcdn.com/@angular/compiler@2.1.2:14629:43) error loading http://localhost:3000/app/main.ts @ compilemetadataresolver.getdependenciesmetadata (https://npmcdn.com/@angular/compiler@2.1.2:14598:21) @ compilemetadataresolver.gettypemetadata (https://npmcdn.com/@angular/compiler@2.1.2:14499:28) @ compilemetadataresolver.getdirectivemetadata (https://npmcdn.com/@angular/compiler@2.1.2:14274:30) @ eval (https://npmcdn.com/@angular/compiler@2.1.2:14678:35) @ array.foreach (native) @ compilemetadataresolver._getentrycomponentsfromprovider (https://npmcdn.com/@angular/compiler@2.1.2:14677:32) @ eval (https://npmcdn.com/@angular/compiler@2.1.2:14635:85) @ array.foreach (native) @ compilemetadataresolver.getprovidersmetadata (https://npmcdn.com/@angular/compiler@2.1.2:14622:21) @ eval (https://npmcdn.com/@angular/compiler@2.1.2:14629:43) error loading http://localhost:3000/app/main.ts here code
app.module.ts
import { ngmodule } '@angular/core'; import { browsermodule } '@angular/platform-browser'; import { formsmodule } '@angular/forms'; import { httpmodule,requestoptions } '@angular/http'; /* app root */ import { appcomponent } './app.component'; /* routing module */ import { approutingmodule } './app.routing.module'; import { platformlocation, location, locationstrategy, hashlocationstrategy, pathlocationstrategy, app_base_href} '@angular/common'; import {componentref, enableprodmode, } '@angular/core'; import {authservice} '../login/auth.service'; import {routenames,customrequestoptions} '../shared/services/index'; @ngmodule({ imports: [ browsermodule, approutingmodule, formsmodule, httpmodule, approutingmodule, ], exports: [ formsmodule, httpmodule ], declarations: [ appcomponent, ], bootstrap: [ appcomponent, [ approutingmodule, { provide: requestoptions, useclass: customrequestoptions }, { provide: locationstrategy, useclass: hashlocationstrategy }, //provide(app_base_href, {usevalue: location.pathname}), authservice, httpmodule, routenames ] ] }) export class appmodule { } app.routing.module.ts
import { ngmodule } '@angular/core'; import { routes, routermodule } '@angular/router'; import { homecomponent} '../home/home.component'; import { appcomponent } './app.component'; import { authguard, logincomponent } '../login/auth.index'; export const routes: routes = [ { path: '', component: appcomponent }, { path: 'home', component: homecomponent, canactivate: [authguard] }, ]; @ngmodule({ imports: [routermodule.forroot(routes)], exports: [routermodule] }) export class approutingmodule {} app.component.ts
import { component } '@angular/core'; //,provide, oninit import { router } '@angular/router'; // import { dialogservice, dialogcomponent, routenames} "../shared/services/index"; import { authservice,logincomponent } '../login/auth.index'; @component({ selector: 'my-app', templateurl: 'app/appshell/app.component.html', styleurls: ['app/appshell/app.component.css'], }) export class appcomponent { title = {}; constructor( public _auth: authservice, public router: router, private _routenames:routenames ) { this._routenames.name.subscribe(n => this.title = n); } onlogout() { this._auth.logout(); this.router.navigate(['/login']); } onhome() { this.router.navigate(['/home']); } } main.ts
import { platformbrowserdynamic } '@angular/platform-browser-dynamic'; import { appmodule } './appshell/app.module'; platformbrowserdynamic().bootstrapmodule(appmodule); systemjs.config.js
(function(global) { var ngver = '@2.1.2'; // lock in angular package version; not let float current! var routerver = '@3.1.2'; // lock router version //map tells system loader things var map = { 'app': 'app', // angular bundles '@angular/core': 'https://npmcdn.com/@angular/core' + ngver, '@angular/common': 'https://npmcdn.com/@angular/common' + ngver, '@angular/compiler': 'https://npmcdn.com/@angular/compiler' + ngver, '@angular/platform-browser': 'https://npmcdn.com/@angular/platform-browser' + ngver, '@angular/platform-browser-dynamic': 'https://npmcdn.com/@angular/platform-browser-dynamic' + ngver, '@angular/http': 'https://npmcdn.com/@angular/http' + ngver, '@angular/router': 'https://npmcdn.com/@angular/router' + routerver, '@angular/forms': 'https://npmcdn.com/@angular/forms' + ngver, '@angular/upgrade': 'https://npmcdn.com/@angular/upgrade' + ngver, // other libraries 'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.12', 'angular-in-memory-web-api': 'https://npmcdn.com/angular-in-memory-web-api', // latest 'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js', 'typescript': 'https://npmcdn.com/typescript@2.0.3/lib/typescript.js', }; //packages tells system loader how load when no filename and/or no extension var packages = { 'app': { main: 'main.ts', defaultextension: 'ts' }, 'rxjs': { defaultextension: 'js' }, 'angular2-in-memory-web-api': { main: 'index.js', defaultextension: 'js' }, }; var ngpackagenames = [ 'common', 'compiler', 'core', 'http', 'forms', 'platform-browser', 'platform-browser-dynamic', 'upgrade', ]; // add package entries angular packages ngpackagenames.foreach(function(pkgname) { // bundled (~40 requests): //packages['@angular/'+pkgname] = { main: '/bundles/' + pkgname + '.umd.js', defaultextension: 'js' }; }); var config = { transpiler: 'ts', meta: { 'typescript': { "exports": "ts" } }, map: map, packages: packages }; system.config(config); // bootstrap `appmodule`(previously in `app/main.ts` this) function bootstrap() { // stub out `app/main.ts` system.import('app') doesn't fail if called in index.html system.set(system.normalizesync('app/main.ts'), system.newmodule({ })); // bootstrap , launch app (equivalent standard main.ts) promise.all([ system.import('@angular/platform-browser-dynamic'), // in index.html system.import('app/main').then().catch() system.import('app/app.module') ]) .then(function (imports) { var platform = imports[0]; var app = imports[1]; platform.platformbrowserdynamic().bootstrapmodule(app.appmodule); }) .catch(function(err){ console.error(err); }); } })(this); what did miss here?
route.names.service.ts
import {injectable} '@angular/core'; import {subject} 'rxjs/rx'; @injectable() export class routenames{ public name = new subject(); }
change app.module to:
@ngmodule({ imports: [ browsermodule, approutingmodule, formsmodule, httpmodule, approutingmodule, ], // exports: [ formsmodule, httpmodule ], declarations: [ appcomponent, ], bootstrap: [ appcomponent ], providers: [ { provide: requestoptions, useclass: customrequestoptions }, { provide: locationstrategy, useclass: hashlocationstrategy }, //provide(app_base_href, {usevalue: location.pathname}), authservice, routenames ] ] }) export class appmodule { }
Comments
Post a Comment