Build Error When Duplicating Home Component

[joelcdoyle]

Steps to reproduce Duplicate Home component and add references throughout client code:

Created src/client/app/frameworks/sample/components/login with the following contents:

login.css (empty) login.tns.css (empty) login.component.tns.html (empty) login.component.html:

<form>
  <label for="">Username</label>
  <input type="text" name="username" value="">
  <label for="">Password</label>
  <input type="password" name="password" value="">
</form>

login.component.ts

import { OnInit } from '@angular/core';
import { BaseComponent } from '../../../core/decorators/base.component';

@BaseComponent({
  moduleId: module.id,
  selector: 'sd-home',
  templateUrl: 'login.component.html',
  styleUrls: ['login.css']
})
export class LoginComponent implements OnInit {

  constructor() {}

  ngOnInit() {

  }
}

login.routes.ts:

import { Route } from '@angular/router';

import { LoginComponent } from './login.component';

export const LoginRoutes: Route[] = [
  {
    path: '/login',
    component: LoginComponent
  },
];

Modified the following files:

src/client/app/frameworks/sample/routes.ts:

import {HomeRoutes} from './components/home/home.routes';
import {LoginRoutes} from './components/login/login.routes';

export const routes: Array<any> = [
  ...HomeRoutes,
  ...LoginRoutes
];

src/client/app/frameworks/sample/components/index.ts:

import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';

// for routes
export const ENTRY_COMPONENTS: any[] = [
  HomeComponent,
  LoginComponent
];

export * from './app/app.component';
export * from './home/home.component';
export * from './login/login.component';

src/client/app/frameworks/sample/components/app/app.routes.ts:

// app
import {HomeRoutes} from '../../components/home/home.routes';
import {LoginRoutes} from '../../components/login/login.routes';

export const routes: Array<any> = [
  ...HomeRoutes,
  ...LoginRoutes
];

Current behavior New TS files are never compiled to JS counterparts. Project does not build correctly, and browser window shows Loading...

Chrome developer tools console shows:

Failed to load resource: the server responded with a status of 404 (Not Found)
zone.js?1486153429616:344 Unhandled Promise rejection: Failed to load http://localhost:5555/app/frameworks/sample/components/login/login.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load http://localhost:5555/app/frameworks/sample/components/login/login.component.html undefined
consoleError @ zone.js?1486153429616:344
zone.js?1486153429616:346 Error: Uncaught (in promise): Failed to load http://localhost:5555/app/frameworks/sample/components/login/login.component.html
    at resolvePromise (zone.js?1486153429616:418)
    at resolvePromise (zone.js?1486153429616:403)
    at zone.js?1486153429616:451
    at ZoneDelegate.invokeTask (zone.js?1486153429616:225)
    at Zone.runTask (zone.js?1486153429616:125)
    at drainMicroTaskQueue (zone.js?1486153429616:357)
    at XMLHttpRequest.ZoneTask.invoke (zone.js?1486153429616:297)

Build process in command line shows the following error:

[14:48:35] Using gulpfile C:\Development\WebDev\web-banking-native\gulpfile.ts
[14:48:35] Starting 'serve.dev'...
[14:48:35] Starting 'build.dev'...
[14:48:35] Starting 'build.assets.dev'...
[14:48:36] Finished 'build.assets.dev' after 229 ms
[14:48:36] Starting 'build.html_css'...
[14:48:36] Finished 'build.html_css' after 788 ms
[14:48:36] Starting 'build.js.dev'...
src\client\tokens.web.ts(1,9): error TS2305: Module '"C:/Development/WebDev/my-app/src/client/app/frameworks/core/tokens"' has no exported member 'ENUMS'.
[14:48:39] TypeScript: 1 semantic error
[14:48:39] TypeScript: emit succeeded (with errors)
[14:48:39] Finished 'build.js.dev' after 2.58 s
[14:48:39] Starting 'build.index.dev'...
[14:48:39] gulp-inject 4 files into index.html.
[14:48:39] gulp-inject 2 files into index.html.
[14:48:39] gulp-inject Nothing to inject into index.html.
[14:48:39] Finished 'build.index.dev' after 143 ms
[14:48:39] Finished 'build.dev' after 3.74 s
[14:48:39] Starting 'server.start'...
[14:48:39] Finished 'server.start' after 103 ms
[14:48:39] Starting 'watch.dev'...
[14:48:39] Finished 'watch.dev' after 127 ms
[14:48:39] Finished 'serve.dev' after 3.98 s
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:5555/
    External: http://223.1.1.192:5555/
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://223.1.1.192:3001
 -------------------------------------
[BS] Serving files from: dist/empty/

Referring to this reference in src/client/tokens.web.ts:

import {ENUMS} from './app/frameworks/core/tokens';

export const TOKENS_WEB: Array<any> = [
  { provide: ENUMS, useValue: {} }
];

Expected/desired behavior Expected build to succeed.

[jlooper]

hi, I have a feeling that this project needs to be updated for NativeScript 2.5. I will try to do this next week, I may however wait until 2.5.1 comes out with a fix for the CLI. In the meantime, you could take a look at the original Advanced Seed which has been updated (it's also a much more complex project): https://github.com/NathanWalker/angular-seed-advanced

[joelcdoyle]

I'm actually trying to stay away from the advanced seed. Too much too fast, :blush: That's why I'm here. I want to get a simple multi-platform Nativescript app up and running before I dive into everything that the advanced seed has to offer. I'll be looking forward to the update

[jlooper]

Well, miraculously I got this seed back in business. I basically had to take the advanced seed and strip it down again, these two projects were too far out of sync. So definitely the web and NativeScript bits are back in business. Please give it a try, I hope I got everything back in place!

[jlooper]

I believe this is sorted now

[NathanWalker]

All issues cleared here - best way to move forward:

• Just clone fresh and npm i from the root 👍