angular / angular2-seed

MIT License
1.01k stars 640 forks source link

Importing a custom component via npm #135

Closed joshterrill closed 7 years ago

joshterrill commented 7 years ago

I've just forked this project and installed a custom component that I built that I would like to use in the project.

Here is the source to my component:

Package.json:

{
  "name": "frame1",
  "version": "0.0.1",
  "description": "r",
  "main": "index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "CWS",
  "license": "ISC",
  "dependencies": {
    "@angular/core": "^2.0.1"
  }
}

index.ts:


import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'frame1',
  template: '<h1>Hello world</h1>'
})
export class Frame1Component implements OnInit {

  constructor() { }

  ngOnInit() { }

}

I installed this via npm and now the two files live in node_modules/frame1

So I want to import it into my project so I can use <frame1></frame1> somewhere in my app and have Hello world show up.

So the app.module.ts file looks like this now:

import {NgModule} from '@angular/core'
import {RouterModule} from "@angular/router";
import {rootRouterConfig} from "./app.routes";
import {AppComponent} from "./app";
import {Github} from "./github/shared/github";
import {FormsModule} from "@angular/forms";
import {BrowserModule} from "@angular/platform-browser";
import {HttpModule} from "@angular/http";
import {About} from './about/about';
import {Home} from './home/home';
import {RepoBrowser} from './github/repo-browser/repo-browser';
import {RepoList} from './github/repo-list/repo-list';
import {RepoDetail} from './github/repo-detail/repo-detail';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

import { Frame1Component } from 'frame1';

@NgModule({
  declarations: [AppComponent, About, RepoBrowser, RepoList, RepoDetail, Home, Frame1Component],
  imports     : [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig)],
  providers   : [Github, {provide: LocationStrategy, useClass: HashLocationStrategy}],
  bootstrap   : [AppComponent]
})
export class AppModule {

}

And when I start the app I get Unexpected value 'Frame1Component' declared by the module 'AppModule'